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

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

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

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

@ -10,6 +10,4 @@
<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="ToggleSwitchIndicatorBorderBrush" Opacity="0.16" Color="#F9F9F9" />
</ResourceDictionary> </ResourceDictionary>

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

@ -10,6 +10,4 @@
<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="ToggleSwitchIndicatorBorderBrush" Opacity="0.09" Color="#1C1F23" />
</ResourceDictionary> </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="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double> <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</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="ToggleSwitchDefaultFontSize">12</x:Double>
<x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double> <x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double>