feat: redesign ButtonToggleSwitch.
This commit is contained in:
Zhang Dian
parent
147d4fd968
commit
3c8854f9de
@ -8,22 +8,23 @@
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<StackPanel Spacing="8" Margin="20">
|
||||
<ToggleSwitch
|
||||
Content="Content"
|
||||
OffContent="OffContent"
|
||||
OnContent="OnContent" />
|
||||
<ToggleSwitch
|
||||
Content="Content"
|
||||
IsChecked="True"
|
||||
IsEnabled="False"
|
||||
OffContent="OffContent"
|
||||
OnContent="OnContent" />
|
||||
<ToggleSwitch
|
||||
Content="Content"
|
||||
IsChecked="False"
|
||||
IsEnabled="False"
|
||||
OffContent="OffContent"
|
||||
OnContent="OnContent" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<StackPanel>
|
||||
<ToggleSwitch />
|
||||
<ToggleSwitch IsChecked="True" />
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<ToggleSwitch IsEnabled="False" />
|
||||
<ToggleSwitch IsChecked="True" IsEnabled="False" />
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
|
||||
<ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
|
||||
<ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
|
||||
<ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
|
||||
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
|
||||
@ -44,8 +45,8 @@
|
||||
</StackPanel>
|
||||
|
||||
<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 Orientation="Horizontal">
|
||||
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
|
||||
@ -60,21 +61,35 @@
|
||||
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
|
||||
</StackPanel>
|
||||
|
||||
<ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
|
||||
<ToggleSwitch.OnContent>
|
||||
<PathIcon
|
||||
Width="16"
|
||||
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"
|
||||
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
|
||||
</ToggleSwitch.OnContent>
|
||||
<ToggleSwitch.OffContent>
|
||||
<PathIcon
|
||||
Width="16"
|
||||
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"
|
||||
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
|
||||
</ToggleSwitch.OffContent>
|
||||
</ToggleSwitch>
|
||||
<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>
|
||||
<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>
|
||||
</UserControl>
|
||||
@ -1,15 +1,8 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<ControlTheme x:Key="ThemeToggleSwitch" TargetType="ToggleSwitch">
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||||
<ControlTheme x:Key="ThemeToggleSwitch"
|
||||
BasedOn="{StaticResource ButtonToggleSwitch}"
|
||||
TargetType="ToggleSwitch">
|
||||
<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">
|
||||
<DataTemplate>
|
||||
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
|
||||
@ -20,48 +13,17 @@
|
||||
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
|
||||
</DataTemplate>
|
||||
</Setter>
|
||||
<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}" />
|
||||
</Panel>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
<Setter Property="ContentTemplate">
|
||||
<DataTemplate>
|
||||
<PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
|
||||
</DataTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="SplitViewToggleSwitch"
|
||||
BasedOn="{StaticResource ThemeToggleSwitch}"
|
||||
TargetType="ToggleSwitch">
|
||||
<Setter Property="Width" Value="32" />
|
||||
<Setter Property="Height" Value="32" />
|
||||
<Setter Property="OnContent"
|
||||
<Setter Property="Content"
|
||||
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>
|
||||
</ResourceDictionary>
|
||||
@ -52,14 +52,11 @@
|
||||
<StackPanel.Styles>
|
||||
<Style Selector="Button">
|
||||
<Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
|
||||
<Setter Property="Width" Value="32" />
|
||||
<Setter Property="Height" Value="32" />
|
||||
<Setter Property="Padding" Value="8" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
|
||||
</Style>
|
||||
<Style Selector="ToggleSwitch">
|
||||
<Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
|
||||
<Setter Property="Width" Value="32" />
|
||||
<Setter Property="Height" Value="32" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
|
||||
</Style>
|
||||
<Style Selector="PathIcon">
|
||||
|
||||
@ -263,6 +263,7 @@
|
||||
TargetType="ToggleSwitch">
|
||||
<Setter Property="OnContent" Value="{x:Null}" />
|
||||
<Setter Property="OffContent" Value="{x:Null}" />
|
||||
<Setter Property="Content" Value="{x:Null}" />
|
||||
<Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="ToggleSwitch">
|
||||
@ -370,48 +371,104 @@
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme
|
||||
x:Key="ButtonToggleSwitch"
|
||||
BasedOn="{StaticResource {x:Type ToggleSwitch}}"
|
||||
TargetType="ToggleSwitch">
|
||||
<Setter Property="Padding" Value="8" />
|
||||
<Setter Property="CornerRadius" Value="3" />
|
||||
<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="FocusAdorner">
|
||||
<FocusAdornerTemplate>
|
||||
<Border Theme="{StaticResource AdornerLayerBorder}" />
|
||||
</FocusAdornerTemplate>
|
||||
</Setter>
|
||||
<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}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
Cursor="Hand">
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Panel>
|
||||
<Panel Name="PART_SwitchKnob" />
|
||||
<Panel Name="PART_MovingKnobs" />
|
||||
<ContentPresenter
|
||||
Name="PART_OnContentPresenter"
|
||||
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
|
||||
IsVisible="{TemplateBinding IsChecked}"
|
||||
Content="{TemplateBinding OnContent}"
|
||||
ContentTemplate="{TemplateBinding OnContentTemplate}" />
|
||||
<ContentPresenter
|
||||
Name="PART_OffContentPresenter"
|
||||
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
|
||||
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="^: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}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
|
||||
<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>
|
||||
Loading…
x
Reference in New Issue
Block a user