Skip to content

Fix ToggleSwitch TODO and add missing pressed colors #1513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Fix ToggleSwitch TODO and add missing pressed colors #1513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c7a1c1
Update ToggleSwitch.xaml
Nuklon Aug 14, 2025
ac4bc8e
Update Light.xaml
Nuklon Aug 14, 2025
30b00a2
Update Dark.xaml
Nuklon Aug 14, 2025
9cf8591
Update HC1.xaml
Nuklon Aug 14, 2025
558714f
Update HC2.xaml
Nuklon Aug 14, 2025
0ee4ace
Update HCBlack.xaml
Nuklon Aug 14, 2025
f1ca2a6
Update HCWhite.xaml
Nuklon Aug 14, 2025
179d6c3
Update ToggleSwitch.xaml
Nuklon Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 90 additions & 23 deletions src/Wpf.Ui/Controls/ToggleSwitch/ToggleSwitch.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
xmlns:controls="clr-namespace:Wpf.Ui.Controls"
xmlns:system="clr-namespace:System;assembly=System.Runtime">

<!-- TODO: Increase size on mouse over -->

<system:Double x:Key="RadioButtonBorderThemeThickness">1</system:Double>
<system:Double x:Key="ToggleButtonWidth">40</system:Double>
<system:Double x:Key="ToggleButtonHeight">20</system:Double>
Expand Down Expand Up @@ -74,33 +72,35 @@
RadiusX="10"
RadiusY="10"
StrokeThickness="0" />
<Ellipse
<Rectangle
x:Name="ToggleEllipse"
Width="12"
Height="12"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource ToggleSwitchKnobFillOff}"
RenderTransformOrigin="0.5, 0.5">
<Ellipse.RenderTransform>
RadiusX="7"
RadiusY="7"
StrokeThickness="0">
<Rectangle.RenderTransform>
<TranslateTransform X="-9" />
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle
x:Name="ActiveToggleEllipse"
Width="12"
Height="12"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource ToggleSwitchKnobFillOn}"
Opacity="0.0"
RenderTransformOrigin="0.5, 0.5">
<Ellipse.RenderTransform>
RadiusX="7"
RadiusY="7"
StrokeThickness="0">
<Rectangle.RenderTransform>
<TranslateTransform X="-9" />
</Ellipse.RenderTransform>
</Ellipse>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Expand Down Expand Up @@ -132,7 +132,7 @@

<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<BeginStoryboard Name="SlideRight">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ToggleRectangle"
Expand All @@ -148,25 +148,25 @@
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ToggleEllipse"
Storyboard.TargetProperty="(Ellipse.Opacity)"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="1.0"
To="0.0"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ActiveToggleEllipse"
Storyboard.TargetProperty="(Ellipse.Opacity)"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="0.0"
To="1.0"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ToggleEllipse"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
From="-9"
To="9"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ActiveToggleEllipse"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
From="-9"
To="9"
Duration="00:00:00.167" />
Expand All @@ -190,32 +190,38 @@
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ToggleEllipse"
Storyboard.TargetProperty="(Ellipse.Opacity)"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="0.0"
To="1.0"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ActiveToggleEllipse"
Storyboard.TargetProperty="(Ellipse.Opacity)"
Storyboard.TargetProperty="(Rectangle.Opacity)"
From="1.0"
To="0.0"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ToggleEllipse"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
From="9"
To="-9"
Duration="00:00:00.167" />
<DoubleAnimation
Storyboard.TargetName="ActiveToggleEllipse"
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
From="9"
To="-9"
Duration="00:00:00.167" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>

<!-- Skip the animation on load -->
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<SeekStoryboard BeginStoryboardName="SlideRight" Offset="00:00:00.167" />
</EventTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Content" Value="{x:Null}" />
Expand Down Expand Up @@ -248,26 +254,87 @@
<Setter TargetName="ContentPresenter" Property="Content" Value="{Binding OffContent, RelativeSource={RelativeSource TemplatedParent}}" />
</MultiTrigger>

<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ToggleEllipse" Property="Height" Value="14" />
<Setter TargetName="ToggleEllipse" Property="Width" Value="14" />
<Setter TargetName="ActiveToggleEllipse" Property="Height" Value="14" />
<Setter TargetName="ActiveToggleEllipse" Property="Width" Value="14" />
</Trigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="IsChecked" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="ToggleEllipse" Property="Width" Value="17" />
<Setter TargetName="ToggleEllipse" Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="-7.5" />
</Setter.Value>
</Setter>
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True" />
<Condition Property="IsChecked" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ActiveToggleEllipse" Property="Width" Value="17" />
<Setter TargetName="ActiveToggleEllipse" Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="7.5" />
</Setter.Value>
</Setter>
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="False" />
<Condition Property="IsChecked" Value="False" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ToggleRectangle" Property="Fill" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
<Setter TargetName="ToggleRectangle" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
<Setter TargetName="ToggleEllipse" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="True" />
<Condition Property="IsChecked" Value="False" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ToggleRectangle" Property="Fill" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
<Setter TargetName="ToggleRectangle" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
<Setter TargetName="ToggleEllipse" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="False" />
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
<Setter TargetName="ToggleRectangle" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
<Setter TargetName="ActiveToggleEllipse" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="True" />
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
<Setter TargetName="ToggleRectangle" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
<Setter TargetName="ActiveToggleEllipse" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
</MultiTrigger>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="False" />
Expand Down
8 changes: 6 additions & 2 deletions src/Wpf.Ui/Resources/Theme/Dark.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -647,15 +647,19 @@
<SolidColorBrush x:Key="ToggleSwitchContentForegroundDisabled" Color="{StaticResource TextFillColorDisabled}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOff" Color="{StaticResource ControlStrongStrokeColorDefault}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffPointerOver" Color="{StaticResource ControlStrongStrokeColorDefault}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffPressed" Color="{StaticResource ControlStrongStrokeColorDefault}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffDisabled" Color="{StaticResource ControlStrongStrokeColorDisabled}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOn" Color="{DynamicResource SystemAccentColorPrimary}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnPointerOver" Color="{DynamicResource SystemAccentColorSecondary}" />
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These were wrong.

<SolidColorBrush x:Key="ToggleSwitchStrokeOnPointerOver" Color="{DynamicResource AccentFillColorSecondary}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnPressed" Color="{DynamicResource AccentFillColorTertiary}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnDisabled" Color="{StaticResource AccentFillColorDisabled}" />
<SolidColorBrush x:Key="ToggleSwitchFillOn" Color="{DynamicResource SystemAccentColorPrimary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnPointerOver" Color="{DynamicResource SystemAccentColorSecondary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnPointerOver" Color="{DynamicResource AccentFillColorSecondary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnPressed" Color="{DynamicResource AccentFillColorTertiary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnDisabled" Color="{StaticResource AccentFillColorDisabled}" />
<SolidColorBrush x:Key="ToggleSwitchFillOff" Color="{StaticResource ControlAltFillColorSecondary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffPointerOver" Color="{StaticResource ControlAltFillColorTertiary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffPressed" Color="{StaticResource ControlAltFillColorQuarternary}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffDisabled" Color="{StaticResource ControlAltFillColorDisabled}" />
<SolidColorBrush x:Key="ToggleSwitchKnobFillOff" Color="{StaticResource TextFillColorSecondary}" />
<SolidColorBrush x:Key="ToggleSwitchKnobFillOffPointerOver" Color="{StaticResource TextFillColorSecondary}" />
Expand Down
4 changes: 4 additions & 0 deletions src/Wpf.Ui/Resources/Theme/HC1.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,15 +532,19 @@
<SolidColorBrush x:Key="ToggleSwitchContentForegroundDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOff" Color="{StaticResource SystemColorWindowTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffPointerOver" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffPressed" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOffDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOn" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnPointerOver" Color="{StaticResource SystemColorWindowTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnPressed" Color="{StaticResource SystemColorWindowTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchStrokeOnDisabled" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOn" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnPointerOver" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnPressed" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOnDisabled" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOff" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffPointerOver" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffPressed" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchFillOffDisabled" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="ToggleSwitchKnobFillOff" Color="{StaticResource SystemColorWindowTextColor}" />
<SolidColorBrush x:Key="ToggleSwitchKnobFillOffPointerOver" Color="{StaticResource SystemColorHighlightColor}" />
Expand Down
Loading