xstefen/winutil
1
0
Fork 0
mirror of https://github.com/ChrisTitusTech/winutil.git synced 2024-12-24 23:11:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

ToggleButtonStyle animation

Browse Source 
- add hover animation to white dot
- remove IsPressed trigger
- improve some comments
This commit is contained in:
MyDrift 2024-10-27 12:59:40 +01:00
parent 402082b376
commit f04b52d0db
2 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
functions/public/Invoke-WPFUIApps.ps1
View File

@ -315,12 +315,12 @@ function Invoke-WPFUIApps {
$childCheckBox.isChecked = -not $childCheckbox.IsChecked $childCheckBox.isChecked = -not $childCheckbox.IsChecked
}) })
$border.Add_MouseEnter({ $border.Add_MouseEnter({
if (($sync.$($this.Tag).IsChecked) -eq $false){ if (($sync.$($this.Tag).IsChecked) -eq $false) {
$this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallHighlightedColor") $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallHighlightedColor")
} }
}) })
$border.Add_MouseLeave({ $border.Add_MouseLeave({
if (($sync.$($this.Tag).IsChecked) -eq $false){ if (($sync.$($this.Tag).IsChecked) -eq $false) {
$this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor") $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
} }
}) })

76
xaml/inputXML.xaml
View File

@ -357,41 +357,73 @@
CornerRadius="{DynamicResource ButtonCornerRadius}"> CornerRadius="{DynamicResource ButtonCornerRadius}">
<Grid> <Grid>
<!-- Toggle Dot Background --> <!-- Toggle Dot Background -->
<Ellipse <Ellipse Width="8" Height="16"
Width="8" Height="16" Fill="{DynamicResource ToggleButtonOnColor}"
Fill="{DynamicResource ToggleButtonOnColor}" HorizontalAlignment="Right"
HorizontalAlignment="Right" VerticalAlignment="Top"
VerticalAlignment="Top" Margin="0,3,5,0" />
Margin="0,3,5,0" />
<!-- Toggle Dot --> <!-- Toggle Dot with hover grow effect -->
<Ellipse x:Name="ToggleDot" <Ellipse x:Name="ToggleDot"
Width="8" Height="8" Width="8" Height="8"
Fill="{DynamicResource ButtonForegroundColor}" Fill="{DynamicResource ButtonForegroundColor}"
HorizontalAlignment="Right" HorizontalAlignment="Right"
VerticalAlignment="Top" VerticalAlignment="Top"
Margin="0,3,5,0" /> Margin="0,3,5,0"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Ellipse.RenderTransform>
</Ellipse>
<!-- Content Presenter --> <!-- Content Presenter -->
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,2,10,2"/> <ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="10,2,10,2"/>
</Grid> </Grid>
</Border> </Border>
</Grid> </Grid>
<!-- Triggers for ToggleButton states --> <!-- Triggers for ToggleButton states -->
<ControlTemplate.Triggers> <ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True"> <!-- Hover effect -->
<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>
<Trigger Property="IsMouseOver" Value="True"> <Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundMouseoverColor}"/> <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> </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"> <Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundSelectedColor}"/> <Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundSelectedColor}"/>
<Setter Property="Foreground" Value="DimGray"/> <Setter Property="Foreground" Value="DimGray"/>