zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add OnContent & OffContent to SimpleToggleSwitch.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
View File

@ -26,9 +26,9 @@
OnContent="OnContent" /> OnContent="OnContent" />
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" /> <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" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True"/> <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" /> <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
@ -38,9 +38,26 @@
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" /> <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" />
<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> </StackPanel>
<ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}"> <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">

68
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
View File

@ -278,29 +278,29 @@
x:Key="SimpleToggleSwitch" x:Key="SimpleToggleSwitch"
BasedOn="{StaticResource {x:Type ToggleSwitch}}" BasedOn="{StaticResource {x:Type ToggleSwitch}}"
TargetType="ToggleSwitch"> TargetType="ToggleSwitch">
<Setter Property="OnContent" Value="{x:Null}" />
<Setter Property="OffContent" Value="{x:Null}" />
<Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch"> <ControlTemplate TargetType="ToggleSwitch">
<Grid <Border
x:Name="SwitchBackgroundBorder"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Cursor="Hand" 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
Grid.Column="0" ColumnDefinitions="*,*">
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>
<Canvas <Canvas
x:Name="PART_SwitchKnob" x:Name="PART_SwitchKnob"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left"> HorizontalAlignment="Left">
@ -347,9 +347,41 @@
</Arc> </Arc>
</Grid> </Grid>
</Canvas> </Canvas>
</Border> <ContentPresenter
</Grid> 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> </ControlTemplate>
</Setter> </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> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

3
src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
View File

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

3
src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
View File

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

2
src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
View File

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