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

Merge pull request #481 from irihitech/switch

Browse Source 
Enhance ToggleSwitch
This commit is contained in:
Dong Bin 2024-12-02 12:02:32 +08:00 committed by GitHub
commit a8cdf5688b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 217 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,22 +8,23 @@
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel Spacing="8" Margin="20"> <StackPanel Spacing="8" Margin="20">
<ToggleSwitch <StackPanel Orientation="Horizontal">
Content="Content" <StackPanel>
OffContent="OffContent" <ToggleSwitch />
OnContent="OnContent" /> <ToggleSwitch IsChecked="True" />
<ToggleSwitch </StackPanel>
Content="Content" <StackPanel>
IsChecked="True" <ToggleSwitch IsEnabled="False" />
IsEnabled="False" <ToggleSwitch IsChecked="True" IsEnabled="False" />
OffContent="OffContent" </StackPanel>
OnContent="OnContent" /> </StackPanel>
<ToggleSwitch <StackPanel Orientation="Horizontal">
Content="Content" <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
IsChecked="False" <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
IsEnabled="False" <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
OffContent="OffContent" <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
OnContent="OnContent" /> </StackPanel>
<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" />
@ -60,21 +61,35 @@
<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}"> <StackPanel Orientation="Horizontal">
<ToggleSwitch
HorizontalAlignment="Left"
Padding="8"
Theme="{DynamicResource ButtonToggleSwitch}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
<ToggleSwitch.Content>
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
</ToggleSwitch.Content>
</ToggleSwitch>
<ToggleSwitch
HorizontalAlignment="Left"
Padding="8"
Theme="{DynamicResource ButtonToggleSwitch}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
<ToggleSwitch.OnContent> <ToggleSwitch.OnContent>
<PathIcon <PathIcon
Width="16" Theme="{DynamicResource InnerPathIcon}"
Height="16" Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" />
Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</ToggleSwitch.OnContent> </ToggleSwitch.OnContent>
<ToggleSwitch.OffContent> <ToggleSwitch.OffContent>
<PathIcon <PathIcon
Width="16" Theme="{DynamicResource InnerPathIcon}"
Height="16" Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</ToggleSwitch.OffContent> </ToggleSwitch.OffContent>
</ToggleSwitch> </ToggleSwitch>
</StackPanel> </StackPanel>
</StackPanel>
</UserControl> </UserControl>

54
demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
View File

@ -1,15 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="ThemeToggleSwitch" TargetType="ToggleSwitch"> <ControlTheme x:Key="ThemeToggleSwitch"
<Setter Property="HorizontalAlignment" Value="Center" /> BasedOn="{StaticResource ButtonToggleSwitch}"
<Setter Property="VerticalAlignment" Value="Center" /> TargetType="ToggleSwitch">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="8" /> <Setter Property="Padding" Value="8" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="OnContentTemplate"> <Setter Property="OnContentTemplate">
<DataTemplate> <DataTemplate>
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" /> <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
@ -20,48 +13,17 @@
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" /> <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
</DataTemplate> </DataTemplate>
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="ContentTemplate">
<ControlTemplate TargetType="ToggleSwitch"> <DataTemplate>
<Border <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
Name="Background" </DataTemplate>
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Panel Name="PART_SwitchKnob" />
<Panel Name="PART_MovingKnobs" />
<ContentPresenter
Name="PART_OnContentPresenter"
IsVisible="{TemplateBinding IsChecked}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter
Name="PART_OffContentPresenter"
IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
</Panel>
</Border>
</ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="SplitViewToggleSwitch" <ControlTheme x:Key="SplitViewToggleSwitch"
BasedOn="{StaticResource ThemeToggleSwitch}" BasedOn="{StaticResource ThemeToggleSwitch}"
TargetType="ToggleSwitch"> TargetType="ToggleSwitch">
<Setter Property="Width" Value="32" /> <Setter Property="Content"
<Setter Property="Height" Value="32" />
<Setter Property="OnContent"
Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" /> Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
<Setter Property="OffContent" Value="{Binding $self.OnContent}" />
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

5
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@ -52,14 +52,11 @@
<StackPanel.Styles> <StackPanel.Styles>
<Style Selector="Button"> <Style Selector="Button">
<Setter Property="Theme" Value="{DynamicResource BorderlessButton}" /> <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
<Setter Property="Width" Value="32" /> <Setter Property="Padding" Value="8" />
<Setter Property="Height" Value="32" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style> </Style>
<Style Selector="ToggleSwitch"> <Style Selector="ToggleSwitch">
<Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" /> <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
<Setter Property="Width" Value="32" />
<Setter Property="Height" Value="32" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Style> </Style>
<Style Selector="PathIcon"> <Style Selector="PathIcon">

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

@ -3,18 +3,41 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True"> x:CompileBindings="True">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20"> <ThemeVariantScope RequestedThemeVariant="Dark">
<ToggleSwitch <StackPanel Spacing="8" Background="{DynamicResource SemiBackground0Color}">
Content="Content" <StackPanel Orientation="Horizontal">
OffContent="OffContent" <ToggleSwitch Classes="Small" />
OnContent="OnContent" /> <ToggleSwitch Classes="Small" IsChecked="True" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch />
<ToggleSwitch IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Classes="Large" />
<ToggleSwitch Classes="Large" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" />
<ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" IsChecked="True" />
</StackPanel>
</StackPanel>
</ThemeVariantScope>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch"> <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusAdorner"> <Setter Property="FocusAdorner">
<FocusAdornerTemplate> <FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}" <Border Theme="{DynamicResource AdornerLayerBorder}"
@ -32,8 +55,6 @@
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch"> <ControlTemplate TargetType="ToggleSwitch">
<Grid <Grid
Background="{TemplateBinding Background}"
Cursor="Hand"
RowDefinitions="Auto, *" RowDefinitions="Auto, *"
ColumnDefinitions="Auto, *"> ColumnDefinitions="Auto, *">
<ContentPresenter <ContentPresenter
@ -53,9 +74,10 @@
TemplatedControl.IsTemplateFocusTarget="True" TemplatedControl.IsTemplateFocusTarget="True"
Width="{DynamicResource ToggleSwitchDefaultWidth}" Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"> CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -66,7 +88,7 @@
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left"> HorizontalAlignment="Left">
<Grid <Panel
Name="PART_MovingKnobs" Name="PART_MovingKnobs"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -79,7 +101,7 @@
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"
StrokeThickness="2" StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
StartAngle="0" StartAngle="0"
SweepAngle="140" SweepAngle="140"
StrokeJoin="Round" StrokeJoin="Round"
@ -107,7 +129,7 @@
</Style> </Style>
</Arc.Styles> </Arc.Styles>
</Arc> </Arc>
</Grid> </Panel>
</Canvas> </Canvas>
</Border> </Border>
@ -156,7 +178,6 @@
<Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder"> <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" /> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style> </Style>
</Style> </Style>
@ -200,12 +221,13 @@
<Style Selector="^ /template/ Border#SwitchBackgroundBorder"> <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchSmallCornerRadius}" />
</Style> </Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob"> <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
</Style> </Style>
<Style Selector="^ /template/ Grid#PART_MovingKnobs"> <Style Selector="^ /template/ Panel#PART_MovingKnobs">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}" /> <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}" />
@ -218,12 +240,13 @@
<Style Selector="^ /template/ Border#SwitchBackgroundBorder"> <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchLargeCornerRadius}" />
</Style> </Style>
<Style Selector="^ /template/ Canvas#PART_SwitchKnob"> <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
</Style> </Style>
<Style Selector="^ /template/ Grid#PART_MovingKnobs"> <Style Selector="^ /template/ Panel#PART_MovingKnobs">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" /> <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}" /> <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}" />
@ -234,69 +257,25 @@
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme
x:Key="ButtonToggleSwitch"
BasedOn="{StaticResource {x:Type ToggleSwitch}}"
TargetType="ToggleSwitch">
<Setter Property="Padding" Value="8" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{StaticResource AdornerLayerBorder}" />
</FocusAdornerTemplate>
</Setter>
<Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch">
<Border
Name="Background"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Cursor="Hand">
<Panel>
<Panel Name="PART_SwitchKnob" />
<Panel Name="PART_MovingKnobs" />
<ContentPresenter
Name="PART_OnContentPresenter"
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter
Name="PART_OffContentPresenter"
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
</ControlTheme>
<ControlTheme <ControlTheme
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="OnContent" Value="{x:Null}" />
<Setter Property="OffContent" Value="{x:Null}" /> <Setter Property="OffContent" Value="{x:Null}" />
<Setter Property="Content" Value="{x:Null}" />
<Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch"> <ControlTemplate TargetType="ToggleSwitch">
<Border <Border
Name="SwitchBackgroundBorder" Name="SwitchBackgroundBorder"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Cursor="Hand"
Width="{DynamicResource ToggleSwitchDefaultWidth}" Width="{DynamicResource ToggleSwitchDefaultWidth}"
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BackgroundSizing="OuterBorderEdge"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"> CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -311,7 +290,7 @@
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
HorizontalAlignment="Left"> HorizontalAlignment="Left">
<Grid <Panel
Name="PART_MovingKnobs" Name="PART_MovingKnobs"
Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}" Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -324,7 +303,7 @@
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"
StrokeThickness="2" StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
StartAngle="0" StartAngle="0"
SweepAngle="140" SweepAngle="140"
StrokeJoin="Round" StrokeJoin="Round"
@ -352,7 +331,7 @@
</Style> </Style>
</Arc.Styles> </Arc.Styles>
</Arc> </Arc>
</Grid> </Panel>
</Canvas> </Canvas>
<ContentPresenter <ContentPresenter
Name="PART_OnContentPresenter" Name="PART_OnContentPresenter"
@ -391,4 +370,105 @@
</Style> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="ButtonToggleSwitch" TargetType="ToggleSwitch">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="OnContent" Value="{x:Null}" />
<Setter Property="OffContent" Value="{x:Null}" />
<Setter Property="Content" Value="{x:Null}" />
<Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
<Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
<Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch">
<Border
Name="Background"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Panel Name="PART_SwitchKnob" />
<Panel Name="PART_MovingKnobs" />
<ContentPresenter
Name="PART_OnContentPresenter"
IsVisible="{TemplateBinding IsChecked}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter
Name="PART_OffContentPresenter"
IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
<ContentPresenter
Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentPresenter.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
<TemplateBinding Property="OnContent" Converter="{x:Static ObjectConverters.IsNull}" />
<TemplateBinding Property="OffContent" Converter="{x:Static ObjectConverters.IsNull}" />
</MultiBinding>
</ContentPresenter.IsVisible>
</ContentPresenter>
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pressed">
<Setter Property="RenderTransform" Value="scale(0.98)" />
</Style>
<Style Selector="^ /template/ Border#Background">
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="Background" Value="{TemplateBinding Background}" />
</Style>
<Style Selector="^:pointerover /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
<Style Selector="^:disabled /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
</Style>
<Style Selector="^.Large">
<Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
<Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
</Style>
<Style Selector="^.Small">
<Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
<Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
</Style>
<Style Selector="^ /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
</Style>
<Style Selector="^:disabled /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
<!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

@ -5,13 +5,18 @@
<x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double> <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
<x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double> <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
<x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double> <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
<Thickness x:Key="ToggleSwitchDefaultBorderThickness">1</Thickness>
<CornerRadius x:Key="ToggleSwitchDefaultCornerRadius">12</CornerRadius>
<CornerRadius x:Key="ToggleSwitchSmallCornerRadius">8</CornerRadius>
<CornerRadius x:Key="ToggleSwitchLargeCornerRadius">16</CornerRadius>
<CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius> <CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius>
<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="ToggleSwitchIndicatorDefaultMargin">1 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness> <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness> <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">2 0 0 0</Thickness>
<x:Double x:Key="ToggleSwitchLoadingIndicatorDefaultStrokeThickness">2</x:Double>
<x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double> <x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
<x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double> <x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>