feat: add ToggleSwitch
This commit is contained in:
rabbitism
Dong Bin
parent
7723579095
commit
33eaa1edc7
@ -1,9 +1,14 @@
|
||||
<Window
|
||||
x:Class="Semi.Avalonia.Demo.MainWindow" xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:pages="using:Semi.Avalonia.Demo.Pages"
|
||||
Title="Semi.Demo" d:DesignHeight="450"
|
||||
d:DesignWidth="800" mc:Ignorable="d">
|
||||
x:Class="Semi.Avalonia.Demo.MainWindow"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:pages="using:Semi.Avalonia.Demo.Pages"
|
||||
Title="Semi.Demo"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<TabControl Margin="8" TabStripPlacement="Left">
|
||||
<TabItem Header="Overview">
|
||||
<pages:Overview />
|
||||
@ -47,5 +52,8 @@
|
||||
<TabItem Header="Flyout">
|
||||
<pages:FlyoutDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="ToggleSwitch">
|
||||
<pages:ToggleSwitchDemo />
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</Window>
|
||||
|
||||
28
src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
Normal file
28
src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
Normal file
@ -0,0 +1,28 @@
|
||||
<UserControl
|
||||
x:Class="Semi.Avalonia.Demo.Pages.ToggleSwitchDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<StackPanel Margin="20" Spacing="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>
|
||||
</UserControl>
|
||||
18
src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs
Normal file
18
src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs
Normal file
@ -0,0 +1,18 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
public partial class ToggleSwitchDemo : UserControl
|
||||
{
|
||||
public ToggleSwitchDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,7 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
|
||||
|
||||
161
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
Normal file
161
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
Normal file
@ -0,0 +1,161 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Margin="20">
|
||||
<ToggleSwitch
|
||||
Content="Content"
|
||||
OffContent="OffContent"
|
||||
OnContent="OnContent" />
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
|
||||
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
|
||||
<Setter Property="HorizontalAlignment" Value="Left" />
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Left" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="ToggleSwitch">
|
||||
<Grid
|
||||
Background="{TemplateBinding Background}"
|
||||
Cursor="Hand"
|
||||
RowDefinitions="Auto,*">
|
||||
<ContentPresenter
|
||||
x:Name="PART_ContentPresenter"
|
||||
Grid.Row="0"
|
||||
Margin="{DynamicResource ToggleSwitchHeaderMargin}"
|
||||
VerticalAlignment="Top"
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||
RecognizesAccessKey="True" />
|
||||
<Grid
|
||||
Grid.Row="1"
|
||||
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>
|
||||
|
||||
<ContentPresenter
|
||||
x:Name="PART_OnContentPresenter"
|
||||
Grid.Column="1"
|
||||
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="{TemplateBinding OnContent}"
|
||||
ContentTemplate="{TemplateBinding OnContentTemplate}"
|
||||
IsVisible="True" />
|
||||
<ContentPresenter
|
||||
x:Name="PART_OffContentPresenter"
|
||||
Grid.Column="1"
|
||||
Margin="{DynamicResource ToggleSwitchOnContentMargin}"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"
|
||||
VerticalContentAlignment="Center"
|
||||
Content="{TemplateBinding OffContent}"
|
||||
ContentTemplate="{TemplateBinding OffContentTemplate}"
|
||||
IsVisible="False" />
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
|
||||
<Setter Property="Margin" Value="0" />
|
||||
</Style>
|
||||
|
||||
<!-- NormalState -->
|
||||
<Style Selector="^:not(:dragging) /template/ Grid#PART_MovingKnobs">
|
||||
<Setter Property="Transitions">
|
||||
<Transitions>
|
||||
<DoubleTransition
|
||||
Easing="CubicEaseOut"
|
||||
Property="Canvas.Left"
|
||||
Duration="0:0:0.2" />
|
||||
</Transitions>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:unchecked">
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
|
||||
<Setter Property="ContentPresenter.IsVisible" Value="False" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
|
||||
<Setter Property="ContentPresenter.IsVisible" Value="True" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPressedBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
|
||||
<Setter Property="Border.BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
|
||||
<Setter Property="Border.BorderThickness" Value="1" />
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:checked">
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
|
||||
<Setter Property="ContentPresenter.IsVisible" Value="True" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
|
||||
<Setter Property="ContentPresenter.IsVisible" Value="False" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@ -14,6 +14,7 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />
|
||||
|
||||
48
src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
Normal file
48
src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
Normal file
@ -0,0 +1,48 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
|
||||
<SolidColorBrush
|
||||
x:Key="ToggleSwitchContainerUnCheckedDefaultBackground"
|
||||
Opacity="0.05"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush
|
||||
x:Key="ToggleSwitchContainerUnCheckedPointerOverBackground"
|
||||
Opacity="0.09"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush
|
||||
x:Key="ToggleSwitchContainerUnCheckedPressedBackground"
|
||||
Opacity="0.13"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBackground" Color="Transparent" />
|
||||
|
||||
<SolidColorBrush
|
||||
x:Key="ToggleSwitchContainerUnCheckedDisabledBorderBrush"
|
||||
Opacity="0.09"
|
||||
Color="#1C1F23" />
|
||||
|
||||
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#5FB346" />
|
||||
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointerOverBackground" Color="#30953B" />
|
||||
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
|
||||
<SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
|
||||
|
||||
<SolidColorBrush
|
||||
x:Key="ToggleSwitchIndicatorBorderBrush"
|
||||
Opacity="0.09"
|
||||
Color="#1C1F23" />
|
||||
<sys:Double x:Key="SizeSwitchDefaultHeight">24</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchSmallHeight">16</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchLargeHeight">32</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchDefaultWidth">40</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchSmallWidth">26</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchLargeWidth">54</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchIndicatorDefaultWidth">18</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchIndicatorSmallWidth">12</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchIndicatorLargeWidth">24</sys:Double>
|
||||
|
||||
<sys:Double x:Key="SizeSwitchDefaultFontSize">12</sys:Double>
|
||||
<sys:Double x:Key="SizeSwitchLargeFontSize">14</sys:Double>
|
||||
|
||||
<Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
|
||||
<Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
|
||||
</ResourceDictionary>
|
||||
Loading…
x
Reference in New Issue
Block a user