feat: add OnContent & OffContent to SimpleToggleSwitch.

This commit is contained in:
Zhang Dian 2024-08-06 16:38:45 +08:00
parent d355410ff2
commit 3af7e2f29a
5 changed files with 79 additions and 22 deletions

View File

@ -26,9 +26,9 @@
OnContent="OnContent" />
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
@ -38,9 +38,26 @@
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="" OnContent=""/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="" OnContent="" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="" OnContent="" Classes="Large" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" IsChecked="True" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="" OnContent="" Classes="Large" IsChecked="True" />
</StackPanel>
<ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">

View File

@ -278,29 +278,29 @@
x:Key="SimpleToggleSwitch"
BasedOn="{StaticResource {x:Type ToggleSwitch}}"
TargetType="ToggleSwitch">
<Setter Property="OnContent" Value="{x:Null}" />
<Setter Property="OffContent" Value="{x:Null}" />
<Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
<Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch">
<Grid
<Border
x:Name="SwitchBackgroundBorder"
Background="{TemplateBinding Background}"
Cursor="Hand"
ColumnDefinitions="Auto, *">
Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}"
CornerRadius="100">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
</Transitions>
</Border.Transitions>
<Grid
Grid.Column="0"
Grid.ColumnSpan="2"
TemplatedControl.IsTemplateFocusTarget="True" />
<Border
x:Name="SwitchBackgroundBorder"
Grid.Column="0"
Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}"
CornerRadius="100">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
</Transitions>
</Border.Transitions>
ColumnDefinitions="*,*">
<Canvas
x:Name="PART_SwitchKnob"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left">
@ -347,9 +347,41 @@
</Arc>
</Grid>
</Canvas>
</Border>
</Grid>
<ContentPresenter
x:Name="PART_OnContentPresenter"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter
x:Name="PART_OffContentPresenter"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:unchecked">
<Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerUnCheckedForeground}" />
</Style>
<Style Selector="^:checked">
<Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerCheckedForeground}" />
</Style>
<Style Selector="^.Small">
<Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -10,4 +10,7 @@
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#7FD184" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#A6E1A8" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#277731" />
<SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.6" Color="#F9F9F9" />
<SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
</ResourceDictionary>

View File

@ -10,4 +10,7 @@
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#30953B" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
<SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
</ResourceDictionary>

View File

@ -19,4 +19,6 @@
<Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
<Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
<x:Double x:Key="SimpleToggleSwitchFontSize">14</x:Double>
</ResourceDictionary>