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

feat: add ToggleSwitch

Browse Source
This commit is contained in:
rabbitism 2023-01-03 22:38:41 +08:00 committed by Dong Bin
parent 7723579095
commit 33eaa1edc7
7 changed files with 270 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Semi.Avalonia.Demo/MainWindow.axaml
View File

@ -1,9 +1,14 @@
<Window <Window
x:Class="Semi.Avalonia.Demo.MainWindow" xmlns="https://github.com/avaloniaui" x:Class="Semi.Avalonia.Demo.MainWindow"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns="https://github.com/avaloniaui"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:pages="using:Semi.Avalonia.Demo.Pages" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Semi.Demo" d:DesignHeight="450" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DesignWidth="800" mc:Ignorable="d"> 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"> <TabControl Margin="8" TabStripPlacement="Left">
<TabItem Header="Overview"> <TabItem Header="Overview">
<pages:Overview /> <pages:Overview />
@ -47,5 +52,8 @@
<TabItem Header="Flyout"> <TabItem Header="Flyout">
<pages:FlyoutDemo /> <pages:FlyoutDemo />
</TabItem> </TabItem>
<TabItem Header="ToggleSwitch">
<pages:ToggleSwitchDemo />
</TabItem>
</TabControl> </TabControl>
</Window> </Window>

28
src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml Normal file
View 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
View 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);
}
}

1
src/Semi.Avalonia/Controls/Controls.axaml
View File

@ -18,6 +18,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.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/TreeView.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />

161
src/Semi.Avalonia/Controls/ToggleSwitch.axaml Normal file
View 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>

1
src/Semi.Avalonia/Themes/Light/Light.axaml
View File

@ -14,6 +14,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" /> <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/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.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/TreeView.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />

48
src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml Normal file
View 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>