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

feat: redesign ButtonToggleSwitch.

Browse Source 
(cherry picked from commit 3c8854f9de99baffd70d96ff50fcb8364d37af81)
This commit is contained in:
Zhang Dian 2024-12-01 17:19:09 +08:00
parent ee3fa830f0
commit 8563ad93c1
4 changed files with 132 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
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" />
@ -44,8 +45,8 @@
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/> <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/> <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" /> <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" 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.OnContent> <ToggleSwitch
<PathIcon HorizontalAlignment="Left"
Width="16" Padding="8"
Height="16" Theme="{DynamicResource ButtonToggleSwitch}"
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}">
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" /> <ToggleSwitch.Content>
</ToggleSwitch.OnContent> <PathIcon
<ToggleSwitch.OffContent> Theme="{DynamicResource InnerPathIcon}"
<PathIcon 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" />
Width="16" </ToggleSwitch.Content>
Height="16" </ToggleSwitch>
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" <ToggleSwitch
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" /> HorizontalAlignment="Left"
</ToggleSwitch.OffContent> Padding="8"
</ToggleSwitch> Theme="{DynamicResource ButtonToggleSwitch}"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
<ToggleSwitch.OnContent>
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
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" />
</ToggleSwitch.OnContent>
<ToggleSwitch.OffContent>
<PathIcon
Theme="{DynamicResource InnerPathIcon}"
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" />
</ToggleSwitch.OffContent>
</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">

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

@ -263,6 +263,7 @@
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">
@ -370,48 +371,104 @@
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme <ControlTheme x:Key="ButtonToggleSwitch" TargetType="ToggleSwitch">
x:Key="ButtonToggleSwitch" <Setter Property="HorizontalAlignment" Value="Center" />
BasedOn="{StaticResource {x:Type ToggleSwitch}}" <Setter Property="VerticalAlignment" Value="Center" />
TargetType="ToggleSwitch"> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="8" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="3" /> <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="FocusAdorner"> <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<FocusAdornerTemplate> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
<Border Theme="{StaticResource AdornerLayerBorder}" /> <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
</FocusAdornerTemplate> <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
</Setter> <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"> <Setter Property="Template">
<ControlTemplate TargetType="ToggleSwitch"> <ControlTemplate TargetType="ToggleSwitch">
<Border <Border
Name="Background" Name="Background"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}"
Cursor="Hand"> BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel> <Panel>
<Panel Name="PART_SwitchKnob" /> <Panel Name="PART_SwitchKnob" />
<Panel Name="PART_MovingKnobs" /> <Panel Name="PART_MovingKnobs" />
<ContentPresenter <ContentPresenter
Name="PART_OnContentPresenter" Name="PART_OnContentPresenter"
Margin="{DynamicResource ToggleSwitchOnContentMargin}" IsVisible="{TemplateBinding IsChecked}"
Content="{TemplateBinding OnContent}" Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" /> ContentTemplate="{TemplateBinding OnContentTemplate}" />
<ContentPresenter <ContentPresenter
Name="PART_OffContentPresenter" Name="PART_OffContentPresenter"
Margin="{DynamicResource ToggleSwitchOnContentMargin}" IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
Content="{TemplateBinding OffContent}" Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" /> 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> </Panel>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover">
<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}" /> <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style> </Style>
<Style Selector="^:pressed">
<Style Selector="^:pressed /template/ Border#Background">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style> </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> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>