From f04b52d0dbde2be3bbd1026b56f83f3b89f2b4bd Mon Sep 17 00:00:00 2001
From: MyDrift <personal@mdiana.ch>
Date: Sun, 27 Oct 2024 12:59:40 +0100
Subject: [PATCH] ToggleButtonStyle animation

- add hover animation to white dot
- remove IsPressed trigger
- improve some comments
---
 functions/public/Invoke-WPFUIApps.ps1 |  4 +-
 xaml/inputXML.xaml                    | 76 +++++++++++++++++++--------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/functions/public/Invoke-WPFUIApps.ps1 b/functions/public/Invoke-WPFUIApps.ps1
index fa48f37e..3b9cdfbb 100644
--- a/functions/public/Invoke-WPFUIApps.ps1
+++ b/functions/public/Invoke-WPFUIApps.ps1
@@ -315,12 +315,12 @@ function Invoke-WPFUIApps {
             $childCheckBox.isChecked = -not $childCheckbox.IsChecked
         })
         $border.Add_MouseEnter({
-            if (($sync.$($this.Tag).IsChecked) -eq $false){
+            if (($sync.$($this.Tag).IsChecked) -eq $false) {
                 $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallHighlightedColor")
             }
         })
         $border.Add_MouseLeave({
-            if (($sync.$($this.Tag).IsChecked) -eq $false){
+            if (($sync.$($this.Tag).IsChecked) -eq $false) {
                 $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
             }
         })
diff --git a/xaml/inputXML.xaml b/xaml/inputXML.xaml
index 8fec0231..e20470d8 100644
--- a/xaml/inputXML.xaml
+++ b/xaml/inputXML.xaml
@@ -357,41 +357,73 @@
                                     CornerRadius="{DynamicResource ButtonCornerRadius}">
                                 <Grid>
                                     <!-- Toggle Dot Background -->
-                                    <Ellipse
-                                        Width="8" Height="16"
-                                        Fill="{DynamicResource ToggleButtonOnColor}"
-                                        HorizontalAlignment="Right"
-                                        VerticalAlignment="Top"
-                                        Margin="0,3,5,0" />
-                                    <!-- Toggle Dot -->
+                                    <Ellipse Width="8" Height="16"
+                                            Fill="{DynamicResource ToggleButtonOnColor}"
+                                            HorizontalAlignment="Right"
+                                            VerticalAlignment="Top"
+                                            Margin="0,3,5,0" />
+
+                                    <!-- Toggle Dot with hover grow effect -->
                                     <Ellipse x:Name="ToggleDot"
-                                        Width="8" Height="8"
-                                        Fill="{DynamicResource ButtonForegroundColor}"
-                                        HorizontalAlignment="Right"
-                                        VerticalAlignment="Top"
-                                        Margin="0,3,5,0" />
+                                            Width="8" Height="8"
+                                            Fill="{DynamicResource ButtonForegroundColor}"
+                                            HorizontalAlignment="Right"
+                                            VerticalAlignment="Top"
+                                            Margin="0,3,5,0"
+                                            RenderTransformOrigin="0.5,0.5">
+                                        <Ellipse.RenderTransform>
+                                            <ScaleTransform ScaleX="1" ScaleY="1"/>
+                                        </Ellipse.RenderTransform>
+                                    </Ellipse>
 
                                     <!-- Content Presenter -->
-                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,2,10,2"/>
+                                    <ContentPresenter HorizontalAlignment="Center"
+                                                    VerticalAlignment="Center"
+                                                    Margin="10,2,10,2"/>
                                 </Grid>
                             </Border>
                         </Grid>
 
                         <!-- Triggers for ToggleButton states -->
                         <ControlTemplate.Triggers>
-                            <Trigger Property="IsChecked" Value="True">
-                                <Setter TargetName="ToggleDot" Property="VerticalAlignment" Value="Bottom"/>
-                                <Setter TargetName="ToggleDot" Property="Margin" Value="0,0,5,3"/> <!-- Consistent bottom margin on the right -->
-                            </Trigger>
-
-                            <Trigger Property="IsPressed" Value="True">
-                                <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundPressedColor}"/>
-                            </Trigger>
-
+                            <!-- Hover effect -->
                             <Trigger Property="IsMouseOver" Value="True">
                                 <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundMouseoverColor}"/>
+                                <Trigger.EnterActions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <!-- Animation to grow the dot when hovered -->
+                                            <DoubleAnimation Storyboard.TargetName="ToggleDot"
+                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
+                                                            To="1.2" Duration="0:0:0.1"/>
+                                            <DoubleAnimation Storyboard.TargetName="ToggleDot"
+                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
+                                                            To="1.2" Duration="0:0:0.1"/>
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </Trigger.EnterActions>
+                                <Trigger.ExitActions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <!-- Animation to shrink the dot back to original size when not hovered -->
+                                            <DoubleAnimation Storyboard.TargetName="ToggleDot"
+                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
+                                                            To="1.0" Duration="0:0:0.1"/>
+                                            <DoubleAnimation Storyboard.TargetName="ToggleDot"
+                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
+                                                            To="1.0" Duration="0:0:0.1"/>
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </Trigger.ExitActions>
                             </Trigger>
 
+                            <!-- IsChecked state -->
+                            <Trigger Property="IsChecked" Value="True">
+                                <Setter TargetName="ToggleDot" Property="VerticalAlignment" Value="Bottom"/>
+                                <Setter TargetName="ToggleDot" Property="Margin" Value="0,0,5,3"/>
+                            </Trigger>
+
+                            <!-- IsEnabled state -->
                             <Trigger Property="IsEnabled" Value="False">
                                 <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundSelectedColor}"/>
                                 <Setter Property="Foreground" Value="DimGray"/>