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

feat: add CustomToggleSwitch and SimpleToggleSwitch

Browse Source
This commit is contained in:
Zhang Dian 2023-02-23 13:26:18 +08:00
parent 20f421f6fc
commit fa19b9e89a
2 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,12 @@
IsEnabled="False"
OffContent="OffContent"
OnContent="OnContent" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}">
<ToggleSwitch
Theme="{DynamicResource SimpleToggleSwitch}"
Content="Content"
OffContent="OffContent"
OnContent="OnContent" />
<ToggleSwitch Theme="{DynamicResource CustomToggleSwitch}">
<ToggleSwitch.OnContent>
<PathIcon
Width="16"

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

@ -169,7 +169,7 @@
</Style>
</ControlTheme>
<ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
<ControlTheme x:Key="CustomToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
<Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch">
<Grid
@ -192,4 +192,58 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
<Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch">
<Grid
Background="{TemplateBinding Background}"
Cursor="Hand"
RowDefinitions="*">
<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>
<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>
</Grid>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>