From fc4c782be51b79274778a106f83092258daaf98c Mon Sep 17 00:00:00 2001
From: Nuklon <Nuklon@users.noreply.github.com>
Date: Wed, 13 Aug 2025 16:02:04 +0200
Subject: [PATCH 1/5] Add CheckBox animation

---
 src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml | 53 +++++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
index c54d6c90c..c01beb545 100644
--- a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
+++ b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
@@ -32,6 +32,8 @@
     <system:Double x:Key="CheckBoxIconSize">14</system:Double>
     <system:Double x:Key="CheckBoxHeight">22</system:Double>
     <system:Double x:Key="CheckBoxWidth">22</system:Double>
+    <system:TimeSpan x:Key="CheckBoxAnimationOffset">00:00:00.250</system:TimeSpan>
+    <Duration x:Key="CheckBoxAnimationDuration">00:00:00.250</Duration>
 
     <Style x:Key="DefaultCheckBoxStyle" TargetType="{x:Type CheckBox}">
         <!--  Universal WPF UI focus  -->
@@ -78,18 +80,19 @@
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     CornerRadius="{TemplateBinding Border.CornerRadius}">
-                                    <Grid>
-                                        <controls:SymbolIcon
-                                            x:Name="ControlIcon"
-                                            Margin="0"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            FontSize="{StaticResource CheckBoxIconSize}"
-                                            FontWeight="Bold"
-                                            Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
-                                            Symbol="Checkmark48"
-                                            Visibility="Collapsed" />
-                                    </Grid>
+                                    <controls:SymbolIcon
+                                        x:Name="ControlIcon"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        FontSize="{DynamicResource CheckBoxIconSize}"
+                                        FontWeight="Bold"
+                                        Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
+                                        Symbol="Checkmark48"
+                                        Visibility="Collapsed">
+                                        <controls:SymbolIcon.Opacity>
+                                            <system:Double>1</system:Double>
+                                        </controls:SymbolIcon.Opacity>
+                                    </controls:SymbolIcon>
                                 </Border>
                             </Border>
                         </BulletDecorator.Bullet>
@@ -119,7 +122,33 @@
                             <Setter TargetName="ControlIcon" Property="Visibility" Value="Visible" />
                             <Setter TargetName="ControlBorderIconPresenter" Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
                             <Setter TargetName="StrokeBorder" Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBorderBrush}" />
+                            <Trigger.EnterActions>
+                                <BeginStoryboard Name="FadeIn">
+                                    <Storyboard>
+                                        <DoubleAnimation
+                                            Storyboard.TargetName="ControlIcon"
+                                            Storyboard.TargetProperty="Opacity"
+                                            From="0"
+                                            To="1"
+                                            Duration="{StaticResource CheckBoxAnimationDuration}">
+                                            <DoubleAnimation.EasingFunction>
+                                                <CubicEase EasingMode="EaseOut" />
+                                            </DoubleAnimation.EasingFunction>
+                                        </DoubleAnimation>
+                                    </Storyboard>
+                                </BeginStoryboard>
+                            </Trigger.EnterActions>
                         </Trigger>
+                        <!--  Skip the animation when it becomes visible  -->
+                        <Trigger Property="Visibility" Value="Visible">
+                            <Trigger.EnterActions>
+                                <SeekStoryboard BeginStoryboardName="FadeIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
+                            </Trigger.EnterActions>
+                        </Trigger>
+                        <!--  Skip the animation on load  -->
+                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
+                            <SeekStoryboard BeginStoryboardName="FadeIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
+                        </EventTrigger>
                         <MultiTrigger>
                             <MultiTrigger.Conditions>
                                 <Condition Property="IsMouseOver" Value="True" />

From 73521d05e9e476fce84b6d5d9cb7b2f63e21d282 Mon Sep 17 00:00:00 2001
From: Nuklon <Nuklon@users.noreply.github.com>
Date: Wed, 13 Aug 2025 20:10:48 +0200
Subject: [PATCH 2/5] Switch back to original idea

---
 src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml | 39 ++++++++++++++--------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
index c01beb545..11a391c8f 100644
--- a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
+++ b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
@@ -80,19 +80,32 @@
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     CornerRadius="{TemplateBinding Border.CornerRadius}">
-                                    <controls:SymbolIcon
-                                        x:Name="ControlIcon"
+                                    <Grid
+                                        Width="{DynamicResource CheckBoxIconSize}"
                                         HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontSize="{DynamicResource CheckBoxIconSize}"
-                                        FontWeight="Bold"
-                                        Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
-                                        Symbol="Checkmark48"
-                                        Visibility="Collapsed">
-                                        <controls:SymbolIcon.Opacity>
-                                            <system:Double>1</system:Double>
-                                        </controls:SymbolIcon.Opacity>
-                                    </controls:SymbolIcon>
+                                        VerticalAlignment="Center">
+                                        <controls:SymbolIcon
+                                            x:Name="ControlIcon"
+                                            HorizontalAlignment="Left"
+                                            VerticalAlignment="Center"
+                                            FontSize="{DynamicResource CheckBoxIconSize}"
+                                            FontWeight="Bold"
+                                            Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
+                                            Symbol="Checkmark48"
+                                            Visibility="Collapsed">
+                                            <controls:SymbolIcon.Tag>
+                                                <system:Double>1</system:Double>
+                                            </controls:SymbolIcon.Tag>
+                                            <controls:SymbolIcon.Width>
+                                                <MultiBinding Converter="{StaticResource CheckBoxAnimationFactorToValueConverter}">
+                                                    <MultiBinding.Bindings>
+                                                        <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
+                                                        <Binding Path="FontSize" RelativeSource="{RelativeSource Self}" />
+                                                    </MultiBinding.Bindings>
+                                                </MultiBinding>
+                                            </controls:SymbolIcon.Width>
+                                        </controls:SymbolIcon>
+                                    </Grid>
                                 </Border>
                             </Border>
                         </BulletDecorator.Bullet>
@@ -127,7 +140,7 @@
                                     <Storyboard>
                                         <DoubleAnimation
                                             Storyboard.TargetName="ControlIcon"
-                                            Storyboard.TargetProperty="Opacity"
+                                            Storyboard.TargetProperty="Tag"
                                             From="0"
                                             To="1"
                                             Duration="{StaticResource CheckBoxAnimationDuration}">

From e50440365c9d4472ea33ca09e2b19bce5aaa89c0 Mon Sep 17 00:00:00 2001
From: Nuklon <Nuklon@users.noreply.github.com>
Date: Thu, 14 Aug 2025 11:46:27 +0200
Subject: [PATCH 3/5] Create ClipConverter

---
 src/Wpf.Ui/Converters/ClipConverter | 34 +++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/Wpf.Ui/Converters/ClipConverter

diff --git a/src/Wpf.Ui/Converters/ClipConverter b/src/Wpf.Ui/Converters/ClipConverter
new file mode 100644
index 000000000..b9f42a362
--- /dev/null
+++ b/src/Wpf.Ui/Converters/ClipConverter
@@ -0,0 +1,34 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using System.Windows.Data;
+
+namespace Wpf.Ui.Converters;
+
+public class ClipConverter : IMultiValueConverter
+{
+    /// <inheritdoc />
+    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (values.Length != 3)
+        {
+            return null;
+        }
+
+        if (values[0] is not double width || values[1] is not double height || values[2] is not double percentage)
+        {
+            return null;
+        }
+
+        double clippedWidth = width * percentage;
+        return new RectangleGeometry(new Rect(0, 0, clippedWidth, height));
+    }
+
+    /// <inheritdoc />
+    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

From 8625923a331929bcf4830467b6b996977921eff4 Mon Sep 17 00:00:00 2001
From: Nuklon <Nuklon@users.noreply.github.com>
Date: Thu, 14 Aug 2025 11:47:21 +0200
Subject: [PATCH 4/5] Update CheckBox.xaml

---
 src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml | 48 +++++++++++-----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
index 11a391c8f..ae7074254 100644
--- a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
+++ b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
@@ -34,6 +34,8 @@
     <system:Double x:Key="CheckBoxWidth">22</system:Double>
     <system:TimeSpan x:Key="CheckBoxAnimationOffset">00:00:00.250</system:TimeSpan>
     <Duration x:Key="CheckBoxAnimationDuration">00:00:00.250</Duration>
+    <converters:AnimationFactorToValueConverter x:Key="CheckBoxAnimationFactorToValueConverter" />
+    <converters:ClipConverter x:Key="ClipConverter" />
 
     <Style x:Key="DefaultCheckBoxStyle" TargetType="{x:Type CheckBox}">
         <!--  Universal WPF UI focus  -->
@@ -80,32 +82,28 @@
                                     BorderBrush="{TemplateBinding BorderBrush}"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     CornerRadius="{TemplateBinding Border.CornerRadius}">
-                                    <Grid
-                                        Width="{DynamicResource CheckBoxIconSize}"
+                                    <controls:SymbolIcon
+                                        x:Name="ControlIcon"
                                         HorizontalAlignment="Center"
-                                        VerticalAlignment="Center">
-                                        <controls:SymbolIcon
-                                            x:Name="ControlIcon"
-                                            HorizontalAlignment="Left"
-                                            VerticalAlignment="Center"
-                                            FontSize="{DynamicResource CheckBoxIconSize}"
-                                            FontWeight="Bold"
-                                            Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
-                                            Symbol="Checkmark48"
-                                            Visibility="Collapsed">
-                                            <controls:SymbolIcon.Tag>
-                                                <system:Double>1</system:Double>
-                                            </controls:SymbolIcon.Tag>
-                                            <controls:SymbolIcon.Width>
-                                                <MultiBinding Converter="{StaticResource CheckBoxAnimationFactorToValueConverter}">
-                                                    <MultiBinding.Bindings>
-                                                        <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
-                                                        <Binding Path="FontSize" RelativeSource="{RelativeSource Self}" />
-                                                    </MultiBinding.Bindings>
-                                                </MultiBinding>
-                                            </controls:SymbolIcon.Width>
-                                        </controls:SymbolIcon>
-                                    </Grid>
+                                        VerticalAlignment="Center"
+                                        FontSize="{DynamicResource CheckBoxIconSize}"
+                                        FontWeight="Bold"
+                                        Foreground="{DynamicResource CheckBoxCheckGlyphForeground}"
+                                        Symbol="Checkmark48"
+                                        Visibility="Collapsed">
+                                        <controls:SymbolIcon.Clip>
+                                            <MultiBinding Converter="{StaticResource ClipConverter}">
+                                                <MultiBinding.Bindings>
+                                                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" />
+                                                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}" />
+                                                    <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
+                                                </MultiBinding.Bindings>
+                                            </MultiBinding>
+                                        </controls:SymbolIcon.Clip>
+                                        <controls:SymbolIcon.Tag>
+                                            <system:Double>1</system:Double>
+                                        </controls:SymbolIcon.Tag>
+                                    </controls:SymbolIcon>
                                 </Border>
                             </Border>
                         </BulletDecorator.Bullet>

From 29a59a9aa8c1aa2042e42d44e61539dedd422af0 Mon Sep 17 00:00:00 2001
From: Nuklon <Nuklon@users.noreply.github.com>
Date: Thu, 14 Aug 2025 11:48:21 +0200
Subject: [PATCH 5/5] Update CheckBox.xaml

---
 src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
index ae7074254..1631e1668 100644
--- a/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
+++ b/src/Wpf.Ui/Controls/CheckBox/CheckBox.xaml
@@ -134,7 +134,7 @@
                             <Setter TargetName="ControlBorderIconPresenter" Property="Background" Value="{DynamicResource CheckBoxCheckBackgroundFillChecked}" />
                             <Setter TargetName="StrokeBorder" Property="BorderBrush" Value="{DynamicResource CheckBoxCheckBorderBrush}" />
                             <Trigger.EnterActions>
-                                <BeginStoryboard Name="FadeIn">
+                                <BeginStoryboard Name="SlideIn">
                                     <Storyboard>
                                         <DoubleAnimation
                                             Storyboard.TargetName="ControlIcon"
@@ -153,12 +153,12 @@
                         <!--  Skip the animation when it becomes visible  -->
                         <Trigger Property="Visibility" Value="Visible">
                             <Trigger.EnterActions>
-                                <SeekStoryboard BeginStoryboardName="FadeIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
+                                <SeekStoryboard BeginStoryboardName="SlideIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
                             </Trigger.EnterActions>
                         </Trigger>
                         <!--  Skip the animation on load  -->
                         <EventTrigger RoutedEvent="FrameworkElement.Loaded">
-                            <SeekStoryboard BeginStoryboardName="FadeIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
+                            <SeekStoryboard BeginStoryboardName="SlideIn" Offset="{StaticResource CheckBoxAnimationOffset}" />
                         </EventTrigger>
                         <MultiTrigger>
                             <MultiTrigger.Conditions>