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

feat: add size Classes to ToggleSwitch.

Browse Source
This commit is contained in:
Zhang Dian 2024-07-16 22:29:35 +08:00
parent b505445b77
commit d3c909a83c
5 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Spacing="20">
<StackPanel Spacing="8" Margin="20">
<ToggleSwitch
Content="Content"
OffContent="OffContent"
@ -24,11 +24,19 @@
IsEnabled="False"
OffContent="OffContent"
OnContent="OnContent" />
<ToggleSwitch
Theme="{DynamicResource SimpleToggleSwitch}"
Content="Content"
OffContent="OffContent"
OnContent="OnContent" />
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
</StackPanel>
<ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
<ToggleSwitch.OnContent>
<PathIcon

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

@ -36,8 +36,7 @@
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,
Converter={x:Static ObjectConverters.IsNotNull}}"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True" />
<Grid
Grid.Row="1"
@ -48,38 +47,34 @@
Grid.ColumnSpan="2"
TemplatedControl.IsTemplateFocusTarget="True" />
<Border
Name="SwitchBackgroundBorder"
x:Name="SwitchBackgroundBorder"
Grid.Column="0"
Width="40"
Height="20"
Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}"
CornerRadius="100">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
</Transitions>
</Border.Transitions>
<Canvas
x:Name="PART_SwitchKnob"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left">
<Grid
x:Name="PART_MovingKnobs"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
<Border
x:Name="SwitchKnobIndicator"
Background="White"
BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" />
</Grid>
</Canvas>
</Border>
<Canvas
x:Name="PART_SwitchKnob"
Grid.Column="0"
Width="20"
Height="20"
HorizontalAlignment="Left">
<Grid
x:Name="PART_MovingKnobs"
Width="20"
Height="20">
<Border
x:Name="SwitchKnobIndicator"
Width="14"
Height="14"
Background="White"
BorderBrush="{DynamicResource ToggleSwitchIndicatorBorderBrush}"
BorderThickness="0.5"
BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" />
</Grid>
</Canvas>
<ContentPresenter
x:Name="PART_OnContentPresenter"
@ -154,6 +149,36 @@
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
</Style>
</Style>
<Style Selector="^.Small">
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
</Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
</Style>
<Style Selector="^ /template/ Grid#PART_MovingKnobs">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
</Style>
</Style>
<Style Selector="^.Large">
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
</Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
</Style>
<Style Selector="^ /template/ Grid#PART_MovingKnobs">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
</Style>
</Style>
</ControlTheme>
<ControlTheme
@ -205,49 +230,40 @@
<Grid
Background="{TemplateBinding Background}"
Cursor="Hand"
RowDefinitions="*">
ColumnDefinitions="Auto, *">
<Grid
Grid.Row="0"
Background="Transparent"
ColumnDefinitions="Auto, *">
<Grid
Grid.Column="0"
Grid.ColumnSpan="2"
TemplatedControl.IsTemplateFocusTarget="True" />
<Border
Name="SwitchBackgroundBorder"
Grid.Column="0"
Width="40"
Height="20"
CornerRadius="100">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
</Transitions>
</Border.Transitions>
</Border>
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>
<Canvas
x:Name="PART_SwitchKnob"
Grid.Column="0"
Width="20"
Height="20"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left">
<Grid
x:Name="PART_MovingKnobs"
Width="20"
Height="20">
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
<Border
x:Name="SwitchKnobIndicator"
Width="14"
Height="14"
Background="White"
BorderBrush="{DynamicResource ToggleSwitchIndicatorBorderBrush}"
BorderThickness="0.5"
BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" />
</Grid>
</Canvas>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter>

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

@ -10,6 +10,4 @@
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#7FD184" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#A6E1A8" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#277731" />
<SolidColorBrush x:Key="ToggleSwitchIndicatorBorderBrush" Opacity="0.16" Color="#F9F9F9" />
</ResourceDictionary>

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

@ -10,6 +10,4 @@
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#30953B" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
<SolidColorBrush x:Key="ToggleSwitchIndicatorBorderBrush" Opacity="0.09" Color="#1C1F23" />
</ResourceDictionary>

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

@ -8,6 +8,9 @@
<x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double>
<Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">2 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness>
<x:Double x:Key="ToggleSwitchDefaultFontSize">12</x:Double>
<x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double>