Merge pull request #487 from gehongyan/combobox-selectionbox

feat: ComboBox should respect SelectionBoxItemTemplate

README.md

@@ -68,7 +68,7 @@ We offer limited free community support for Semi Avalonia and Ursa. If you have
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | 11.2.1           |
+| 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |

README_CN.md

@@ -68,7 +68,7 @@ dotnet add package Semi.Avalonia.TreeDataGrid
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
-| 11.2.1              | 11.2.1           |
+| 11.2.1              | >=11.2.1         |
 | 11.2.0              | 11.2.0           |
 | 11.1.0              | >=11.1.0         |
 | 11.0.7              | >=11.0.7         |

demo/Directory.Build.props

@@ -1,7 +1,7 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.2.1</AvaloniaVersion>
+    <AvaloniaVersion>11.2.2</AvaloniaVersion>
     <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
   </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml

@@ -8,20 +8,26 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <UserControl.Styles>
-        <Style Selector="Border">
+        <Style Selector="Carousel">
             <Setter Property="Height" Value="200" />
+            <Style Selector="^ TextBlock">
+                <Setter Property="HorizontalAlignment" Value="Center" />
+                <Setter Property="VerticalAlignment" Value="Center" />
+                <Setter Property="Foreground" Value="#1C1F23" />
+            </Style>
         </Style>
-        <Style Selector="TextBlock">
+        <Style Selector="RadioButton">
-            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="Theme" Value="{DynamicResource ButtonRadioButton}" />
-            <Setter Property="VerticalAlignment" Value="Center" />
-            <Setter Property="Foreground" Value="#1C1F23" />
         </Style>
     </UserControl.Styles>
     <StackPanel Spacing="20">
-        <Carousel Theme="{DynamicResource FullCarousel}">
+        <Carousel Theme="{DynamicResource FullCarousel}"
-            <Carousel.PageTransition>
+                  Classes.Dot="{Binding #DotButton.IsChecked}"
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
+                  Classes.Columnar="{Binding #ColumnarButton.IsChecked}"
-            </Carousel.PageTransition>
+                  Classes.Line="{Binding #LineButton.IsChecked}"
+                  Classes.Left="{Binding #LeftButton.IsChecked}"
+                  Classes.Center="{Binding #CenterButton.IsChecked}"
+                  Classes.Right="{Binding #RightButton.IsChecked}">
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -35,39 +41,39 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Classes="Line" Theme="{DynamicResource FullCarousel}">
+        <StackPanel Orientation="Horizontal" Spacing="8">
-            <Carousel.PageTransition>
+            <TextBlock VerticalAlignment="Center" Text="Type" />
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
-            </Carousel.PageTransition>
+                <StackPanel Orientation="Horizontal">
-            <Border Background="#EAF5FF">
+                    <RadioButton
-                <TextBlock Text="Text 1" />
+                        Name="DotButton"
+                        IsChecked="True"
+                        Content="Dot" />
+                    <RadioButton
+                        Name="ColumnarButton"
+                        Content="Columnar" />
+                    <RadioButton
+                        Name="LineButton"
+                        Content="Line" />
+                </StackPanel>
             </Border>
-            <Border Background="#F9F9F9">
+        </StackPanel>
-                <TextBlock Text="Text 2" />
+        <StackPanel Orientation="Horizontal" Spacing="8">
+            <TextBlock VerticalAlignment="Center" Text="Position" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton
+                        Name="LeftButton"
+                        IsChecked="True"
+                        Content="Left" />
+                    <RadioButton
+                        Name="CenterButton"
+                        Content="Center" />
+                    <RadioButton
+                        Name="RightButton"
+                        Content="Right" />
+                </StackPanel>
             </Border>
-            <Border Background="#FFF8EA">
+        </StackPanel>
-                <TextBlock Text="Text 3" />
-            </Border>
-            <Border Background="#FEF2ED">
-                <TextBlock Text="Text 4" />
-            </Border>
-        </Carousel>
-        <Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
-            <Border Background="#EAF5FF">
-                <TextBlock Text="Text 1" />
-            </Border>
-            <Border Background="#F9F9F9">
-                <TextBlock Text="Text 2" />
-            </Border>
-            <Border Background="#FFF8EA">
-                <TextBlock Text="Text 3" />
-            </Border>
-            <Border Background="#FEF2ED">
-                <TextBlock Text="Text 4" />
-            </Border>
-        </Carousel>
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml

@@ -27,6 +27,15 @@
         <ComboBox Classes="Small" />
         <ComboBox Classes="Bordered" />
         <ComboBox Classes="Bordered" IsEnabled="False" />
+        <ComboBox>
+          <ComboBox.SelectionBoxItemTemplate>
+            <DataTemplate DataType="x:String">
+              <ContentControl BorderThickness="1"
+                              BorderBrush="Gold"
+                              Content="{Binding}" />
+            </DataTemplate>
+          </ComboBox.SelectionBoxItemTemplate>
+        </ComboBox>
 
         <StackPanel Orientation="Horizontal">
             <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />

demo/Semi.Avalonia.Demo/Pages/GridSplitterDemo.axaml

@@ -1,5 +1,5 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.GridSplitter"
+    x:Class="Semi.Avalonia.Demo.Pages.GridSplitterDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -14,13 +14,13 @@
             RowDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Row="1" ShowsPreview="True" />
             <Border
                 Grid.Row="2"
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
         </Grid>
         <Grid
@@ -29,13 +29,13 @@
             ColumnDefinitions="*, Auto, *">
             <Border
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
             <GridSplitter Grid.Column="1" ShowsPreview="True" />
             <Border
                 Grid.Column="2"
                 HorizontalAlignment="Stretch"
-                Background="#FEFBCB"
+                Background="{DynamicResource SemiYellow3Color}"
                 CornerRadius="10" />
         </Grid>
     </StackPanel>

demo/Semi.Avalonia.Demo/Pages/GridSplitterDemo.axaml.cs

@@ -1,12 +1,11 @@
-using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 
 namespace Semi.Avalonia.Demo.Pages;
 
-public partial class GridSplitter : UserControl
+public partial class GridSplitterDemo : UserControl
 {
-    public GridSplitter()
+    public GridSplitterDemo()
     {
         InitializeComponent();
     }

demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs

@@ -9,7 +9,7 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.1";
 
     public string MainStyle { get; set; } =
         """
@@ -20,7 +20,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.1";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -29,7 +29,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.1";
 
     public string DataGridStyle { get; set; } =
         """

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml

@@ -17,7 +17,7 @@
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
+                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
                 <ResourceInclude Source="../Controls/ColorItemControl.axaml" />
                 <ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
                 <ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
@@ -34,11 +34,11 @@
         PanePlacement="Right">
         <SplitView.Pane>
             <StackPanel>
-                <ToggleButton
+                <ToggleSwitch
                     Name="toggle"
                     HorizontalAlignment="Right"
                     IsChecked="True"
-                    Theme="{DynamicResource SplitViewToggleButton}" />
+                    Theme="{DynamicResource SplitViewToggleSwitch}" />
                 <Border IsVisible="{Binding #splitView.IsPaneOpen}" Theme="{DynamicResource CardBorder}">
                     <Panel>
                         <TextBlock

demo/Semi.Avalonia.Demo/Pages/PathIconDemo.axaml

@@ -7,16 +7,30 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" >
+    <StackPanel HorizontalAlignment="Left">
-        <TextBlock Text="Size"></TextBlock>
+        <StackPanel Orientation="Horizontal">
-        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300"></Slider>
+            <StackPanel.Styles>
-        <ToggleSwitch Name="active" Content="Active"></ToggleSwitch>
+                <Style Selector="PathIcon">
+                    <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
+                    <Setter Property="Data" Value="M10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19C12.3054 19 13.9794 18.4371 15.356 17.4773L19.4393 21.5606C20.0251 22.1464 20.9749 22.1464 21.5606 21.5606C22.1464 20.9749 22.1464 20.0251 21.5606 19.4393L17.4773 15.356C18.4371 13.9794 19 12.3054 19 10.5C19 5.80558 15.1944 2 10.5 2ZM5 10.5C5 7.46243 7.46243 5 10.5 5C13.5376 5 16 7.46243 16 10.5C16 13.5376 13.5376 16 10.5 16C7.46243 16 5 13.5376 5 10.5Z" />
+                </Style>
+            </StackPanel.Styles>
+            <PathIcon Classes="ExtraSmall" />
+            <PathIcon Classes="Small" />
+            <PathIcon />
+            <PathIcon Classes="Large" />
+            <PathIcon Classes="ExtraLarge" />
+        </StackPanel>
+
+        <TextBlock Text="Size" />
+        <Slider Name="width" Minimum="0" Maximum="100" Value="20" Width="300" />
+        <ToggleSwitch Name="active" Content="Active" />
         <PathIcon
-            Classes.Active="{Binding ElementName=active, Path=IsChecked}"
+            Classes.Active="{Binding #active.IsChecked}"
-            BorderBrush="{DynamicResource SemiRed6}"
             Width="{Binding #width.Value}"
             Height="{Binding #width.Value}"
-            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z"
+            Foreground="{DynamicResource SemiBlue6}"
-            Foreground="{DynamicResource SemiBlue6}" />
+            BorderBrush="{DynamicResource SemiRed6}"
+            Data="M12 3L2 12H5V20H19V12H22L12 3M13 18H11V16H13V18M13 14H11V8H13V14Z" />
     </StackPanel>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml

@@ -114,20 +114,9 @@
                                 ItemsSource="{Binding Songs}" />
                             <ToggleSwitch
                                 Grid.Row="2"
-                                Theme="{DynamicResource ButtonToggleSwitch}"
+                                Theme="{DynamicResource SplitViewToggleSwitch}"
+                                HorizontalAlignment="Left"
                                 IsChecked="{Binding #SplitView.IsPaneOpen}">
-                                <ToggleSwitch.OnContent>
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                </ToggleSwitch.OnContent>
-                                <ToggleSwitch.OffContent>
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{StaticResource NavigationMenuExpandIconGlyph}" />
-                                </ToggleSwitch.OffContent>
                             </ToggleSwitch>
                         </Grid>
                     </SplitView.Pane>

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml

@@ -8,22 +8,23 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <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">
             <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}">
+        <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>
 </UserControl>

demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml

@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
-        <Setter Property="TabControl.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="TabControl">
                 <Border
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
@@ -10,7 +10,10 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                        <ScrollViewer
+                            DockPanel.Dock="Left"
+                            Name="PART_ScrollViewer"
+                            VerticalScrollBarVisibility="Auto">
                             <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
                                 <ItemsPresenter Name="PART_ItemsPresenter">
                                     <ItemsPresenter.ItemsPanel>
@@ -19,7 +22,8 @@
                                         </ItemsPanelTemplate>
                                     </ItemsPresenter.ItemsPanel>
                                 </ItemsPresenter>
-                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                                <Border Name="PART_BorderSeparator"
+                                        Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
                             </Panel>
                         </ScrollViewer>
                         <ContentPresenter
@@ -38,5 +42,8 @@
             <Setter Property="VerticalAlignment" Value="Stretch" />
             <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
+        <Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml

@@ -1,26 +0,0 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="SplitViewToggleButton" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Template">
-            <ControlTemplate TargetType="ToggleButton">
-                <Border
-                    Name="Background"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="3">
-                    <PathIcon
-                        Name="Icon"
-                        Width="16"
-                        Height="16"
-                        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"
-                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-    </ControlTheme>
-</ResourceDictionary>

demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml

@@ -0,0 +1,31 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="ThemeToggleSwitch"
+                  BasedOn="{StaticResource ButtonToggleSwitch}"
+                  TargetType="ToggleSwitch">
+        <Setter Property="Padding" Value="8" />
+        <Setter Property="OnContent" Value="{Binding $self.Content}" />
+        <Setter Property="OnContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
+        </Setter>
+        <Setter Property="OffContent" Value="{Binding $self.Content}" />
+        <Setter Property="OffContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
+        </Setter>
+        <Setter Property="ContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="SplitViewToggleSwitch"
+                  BasedOn="{StaticResource ThemeToggleSwitch}"
+                  TargetType="ToggleSwitch">
+        <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" />
+    </ControlTheme>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -15,56 +15,84 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="../Themes/TabMenu.axaml" />
-                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
+                <ResourceInclude Source="../Themes/ToggleSwitch.axaml" />
             </ResourceDictionary.MergedDictionaries>
+            <StreamGeometry x:Key="DocIcon">M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z</StreamGeometry>
+            <StreamGeometry x:Key="RepoIcon">M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z</StreamGeometry>
+            <StreamGeometry x:Key="DarkThemeIcon">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</StreamGeometry>
+            <StreamGeometry x:Key="LightThemeIcon">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</StreamGeometry>
+            <StreamGeometry x:Key="MenuIcon">M2 19.5C2 18.6716 2.67157 18 3.5 18H20.5C21.3284 18 22 18.6716 22 19.5C22 20.3284 21.3284 21 20.5 21H3.5C2.67157 21 2 20.3284 2 19.5ZM2 12C2 11.1716 2.67157 10.5 3.5 10.5H20.5C21.3284 10.5 22 11.1716 22 12C22 12.8284 21.3284 13.5 20.5 13.5H3.5C2.67157 13.5 2 12.8284 2 12ZM2 4.5C2 3.67157 2.67157 3 3.5 3H20.5C21.3284 3 22 3.67157 22 4.5C22 5.32843 21.3284 6 20.5 6H3.5C2.67157 6 2 5.32843 2 4.5Z</StreamGeometry>
         </ResourceDictionary>
     </UserControl.Resources>
     <Grid RowDefinitions="Auto, *">
         <Border
+            Grid.Row="0"
             Margin="8"
             Padding="12,4"
             Theme="{DynamicResource CardBorder}">
-            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
+            <Panel>
-                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <TextBlock
+                    <ToggleSwitch
+                        Name="ExpandButton"
+                        Theme="{DynamicResource SplitViewToggleSwitch}" />
+                    <SelectableTextBlock
                         VerticalAlignment="Center"
                         Classes="H6"
                         Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleTextBlock}" />
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <TextBlock
+                    <SelectableTextBlock
-                        Margin="8,0"
                         VerticalAlignment="Center"
                         Text="/" />
-                    <TextBlock
+                    <SelectableTextBlock
-                        Margin="8,0"
                         VerticalAlignment="Center"
                         Classes="Secondary"
                         Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel Grid.Column="1" Orientation="Horizontal">
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                    <Button Click="OpenDocumentation" Theme="{DynamicResource BorderlessButton}">
+                    <StackPanel.Styles>
-                        <PathIcon
+                        <Style Selector="Button">
-                            Width="16"
+                            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
-                            Height="16"
+                            <Setter Property="Padding" Value="8" />
-                            Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
+                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                        </Style>
-                    </Button>
+                        <Style Selector="ToggleSwitch">
-                    <Button Click="OpenRepository" Theme="{DynamicResource BorderlessButton}">
+                            <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
-                        <PathIcon
+                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                            Width="16"
+                        </Style>
-                            Height="16"
+                        <Style Selector="PathIcon">
-                            Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+                            <Setter Property="Theme" Value="{DynamicResource InnerPathIcon}" />
-                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+                        </Style>
-                    </Button>
+                    </StackPanel.Styles>
-                    <ComboBox
-                        MinWidth="100"
-                        PlaceholderText="Select a theme"
-                        DisplayMemberBinding="{Binding Name}"
-                        ItemsSource="{Binding Themes}"
-                        SelectedItem="{Binding SelectedTheme}" />
-                </StackPanel>
-            </Grid>
 
+                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding DocumentationUrl}">
+                        <PathIcon Data="{StaticResource DocIcon}" />
+                    </Button>
+
+                    <Button Command="{Binding OpenUrlCommand}" CommandParameter="{Binding RepoUrl}">
+                        <PathIcon Data="{StaticResource RepoIcon}" />
+                    </Button>
+
+                    <ToggleSwitch
+                        Command="{Binding ToggleThemeCommand}"
+                        OnContent="{StaticResource DarkThemeIcon}"
+                        OffContent="{StaticResource LightThemeIcon}" />
+
+                    <Button>
+                        <PathIcon Data="{StaticResource MenuIcon}" />
+                        <Button.Flyout>
+                            <MenuFlyout Placement="Bottom" ItemsSource="{Binding MenuItems}" />
+                        </Button.Flyout>
+                        <Button.Styles>
+                            <Style Selector="MenuItem" x:DataType="views:MenuItemViewModel">
+                                <Setter Property="Header" Value="{Binding Header}" />
+                                <Setter Property="ItemsSource" Value="{Binding Items}" />
+                                <Setter Property="Command" Value="{Binding Command}" />
+                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                            </Style>
+                        </Button.Styles>
+                    </Button>
+                </StackPanel>
+            </Panel>
         </Border>
         <TabControl
             Name="tab"
@@ -73,6 +101,7 @@
             Padding="20,0,0,0"
             HorizontalAlignment="Stretch"
             TabStripPlacement="Left"
+            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
             Theme="{DynamicResource NavigationTab}">
             <TabItem Header="Overview">
                 <pages:Overview />
@@ -126,7 +155,7 @@
                 <pages:FlyoutDemo />
             </TabItem>
             <TabItem Header="GridSplitter">
-                <pages:GridSplitter />
+                <pages:GridSplitterDemo />
             </TabItem>
             <TabItem Header="HeaderedContentControl">
                 <pages:HeaderedContentControlDemo />

demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs

@@ -1,10 +1,13 @@
 using System;
-using System.Collections.ObjectModel;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Windows.Input;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Interactivity;
+using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Styling;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -15,62 +18,96 @@ public partial class MainView : UserControl
         InitializeComponent();
         this.DataContext = new MainViewModel();
     }
-
-    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-    {
-        var app = Application.Current;
-        if (app is not null)
-        {
-            var theme = app.ActualThemeVariant;
-            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-        }
-    }
-
-    private async void OpenRepository(object sender, RoutedEventArgs e)
-    {
-        var top = TopLevel.GetTopLevel(this);
-        if (top is null) return;
-        var launcher = top.Launcher;
-        await launcher.LaunchUriAsync(new Uri("https://github.com/irihitech/Semi.Avalonia"));
-    }
-
-    private async void OpenDocumentation(object sender, RoutedEventArgs e)
-    {
-        var top = TopLevel.GetTopLevel(this);
-        if (top is null) return;
-        var launcher = top.Launcher;
-        await launcher.LaunchUriAsync(new Uri("https://docs.irihi.tech/semi"));
-    }
 }
 
 public partial class MainViewModel : ObservableObject
 {
-    public ObservableCollection<ThemeItem> Themes { get; } =
+    public string DocumentationUrl => "https://docs.irihi.tech/semi";
-    [
+    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
-        new("Default", ThemeVariant.Default),
+    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
-        new("Light", ThemeVariant.Light),
-        new("Dark", ThemeVariant.Dark),
-        new("Aquatic", SemiTheme.Aquatic),
-        new("Desert", SemiTheme.Desert),
-        new("Dust", SemiTheme.Dust),
-        new("NightSky", SemiTheme.NightSky)
-    ];
 
-    [ObservableProperty] private ThemeItem? _selectedTheme;
+    public MainViewModel()
-
+    {
-    partial void OnSelectedThemeChanged(ThemeItem? oldValue, ThemeItem? newValue)
+        MenuItems =
+        [
+            new MenuItemViewModel
+            {
+                Header = "High Contrast Theme",
+                Items =
+                [
+                    new MenuItemViewModel
+                    {
+                        Header = "Aquatic",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Aquatic
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Desert",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Desert
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "Dust",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.Dust
+                    },
+                    new MenuItemViewModel
+                    {
+                        Header = "NightSky",
+                        Command = SelectThemeCommand,
+                        CommandParameter = SemiTheme.NightSky
+                    },
+                ]
+            }
+        ];
+    }
+
+    [RelayCommand]
+    private void ToggleTheme()
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        var theme = app.ActualThemeVariant;
+        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+    }
+
+    [RelayCommand]
+    private void SelectTheme(object? obj)
     {
-        if (newValue is null) return;
         var app = Application.Current;
         if (app is not null)
         {
-            app.RequestedThemeVariant = newValue.Theme;
+            app.RequestedThemeVariant = obj as ThemeVariant;
         }
     }
+
+    [RelayCommand]
+    private static async Task OpenUrl(string url)
+    {
+        var launcher = ResolveDefaultTopLevel()?.Launcher;
+        if (launcher is not null)
+        {
+            await launcher.LaunchUriAsync(new Uri(url));
+        }
+    }
+
+    private static TopLevel? ResolveDefaultTopLevel()
+    {
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
+    }
 }
 
-public class ThemeItem(string name, ThemeVariant theme)
+public class MenuItemViewModel
 {
-    public string Name { get; set; } = name;
+    public string? Header { get; set; }
-    public ThemeVariant Theme { get; set; } = theme;
+    public ICommand? Command { get; set; }
+    public object? CommandParameter { get; set; }
+    public IList<MenuItemViewModel>? Items { get; set; }
 }

src/Package.props

@@ -3,7 +3,7 @@
         <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1</Version>
+        <Version>11.2.1.1</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.2.1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.1</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -4,7 +4,7 @@
     
     <PropertyGroup>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.2.1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.1</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -27,28 +27,25 @@
                             Watermark="{TemplateBinding Watermark}" />
                         <Popup
                             Name="PART_Popup"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
                             IsLightDismissEnabled="True"
                             PlacementTarget="{TemplateBinding}">
                             <Border
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                 Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                 HorizontalAlignment="Stretch"
                                 Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                 BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <Border
+                                <ListBox
-                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
+                                    Name="PART_SelectingItemsControl"
-                                    ClipToBounds="True">
+                                    Foreground="{TemplateBinding Foreground}"
-                                    <ListBox
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        Name="PART_SelectingItemsControl"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                        Foreground="{TemplateBinding Foreground}"
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                                </Border>
                             </Border>
                         </Popup>
                     </Panel>
@@ -69,28 +66,25 @@
                             Watermark="{TemplateBinding Watermark}" />
                         <Popup
                             Name="PART_Popup"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
                             IsLightDismissEnabled="True"
                             PlacementTarget="{TemplateBinding}">
                             <Border
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                 Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                 HorizontalAlignment="Stretch"
                                 Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                 BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <Border
-                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
-                                    ClipToBounds="True">
                                     <ListBox
                                         Name="PART_SelectingItemsControl"
                                         Foreground="{TemplateBinding Foreground}"
                                         ItemTemplate="{TemplateBinding ItemTemplate}"
                                         ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                         ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                                </Border>
                             </Border>
                         </Popup>
                     </Panel>

src/Semi.Avalonia/Controls/Button.axaml

@@ -272,18 +272,20 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InnerIconButton" TargetType="Button">
+        <Setter Property="Width" Value="16"/>
+        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
-                <ContentControl Background="Transparent">
+                <PathIcon
-                    <PathIcon
+                    Theme="{DynamicResource InnerPathIcon}"
-                        Width="16"
+                    Width="{TemplateBinding Width}"
-                        Height="16"
+                    Height="{TemplateBinding Height}"
-                        Margin="{TemplateBinding Padding}"
+                    Data="{TemplateBinding Content}"
-                        Data="{TemplateBinding Content}"
+                    Foreground="{TemplateBinding Foreground}"
-                        Foreground="{TemplateBinding Foreground}" />
+                    Background="{TemplateBinding Background}" />
-                </ContentControl>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover">

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -73,8 +73,8 @@
                                 Grid.Row="0"
                                 Theme="{StaticResource ButtonSpinnerRepeatButton}">
                                 <PathIcon
-                                    Width="8"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="8"
+                                    Classes="ExtraSmall"
                                     Data="{DynamicResource ButtonSpinnerIncreaseButtonGlyph}"
                                     Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
                             </RepeatButton>
@@ -83,8 +83,8 @@
                                 Grid.Row="1"
                                 Theme="{StaticResource ButtonSpinnerRepeatButton}">
                                 <PathIcon
-                                    Width="8"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="8"
+                                    Classes="ExtraSmall"
                                     Data="{DynamicResource ButtonSpinnerDecreaseButtonGlyph}"
                                     Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
                             </RepeatButton>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -65,8 +65,8 @@
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
-                                    Width="12"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="12"
+                                    Classes="Large"
                                     Data="{DynamicResource CalendarItemPreviousIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
                             </Button>
@@ -85,8 +85,8 @@
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
-                                    Width="12"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="12"
+                                    Classes="Large"
                                     Data="{DynamicResource CalendarItemNextIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
                             </Button>
@@ -95,7 +95,8 @@
                             Name="PART_MonthView"
                             Grid.Row="1"
                             HorizontalAlignment="Stretch"
-                            IsVisible="False">
+                            IsVisible="False"
+                            ColumnDefinitions="*,*,*,*,*,*,*">
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="{DynamicResource CalendarItemWeekDayNameHeight}" />
                                 <RowDefinition Height="*" />
@@ -105,33 +106,14 @@
                                 <RowDefinition Height="*" />
                                 <RowDefinition Height="*" />
                             </Grid.RowDefinitions>
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
                         </Grid>
                         <Grid
                             Name="PART_YearView"
                             Grid.Row="1"
                             Background="{TemplateBinding Background}"
-                            IsVisible="False">
+                            IsVisible="False"
-                            <Grid.RowDefinitions>
+                            ColumnDefinitions="*,*,*,*"
-                                <RowDefinition Height="*" />
+                            RowDefinitions="*,*,*" />
-                                <RowDefinition Height="*" />
-                                <RowDefinition Height="*" />
-                            </Grid.RowDefinitions>
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
-                        </Grid>
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -151,6 +133,7 @@
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarButton">
                 <ContentControl
@@ -211,6 +194,7 @@
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarDayButton">
                 <ContentControl

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -2,6 +2,11 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Margin="20" Width="800" Height="400">
+            <CalendarDatePicker HorizontalAlignment="Center" Classes="ClearButton" />
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
         <Setter Property="Background" Value="{DynamicResource CalendarDatePickerBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerForeground}" />
@@ -75,41 +80,38 @@
                             <Button
                                 Name="ClearButton"
                                 Grid.Column="1"
-                                Padding="0,0,8,0"
+                                Theme="{DynamicResource InnerIconButton}"
+                                Margin="8 0"
                                 Content="{DynamicResource IconButtonClearData}"
                                 Command="{Binding $parent[CalendarDatePicker].Clear}"
                                 Focusable="False"
-                                IsVisible="False"
+                                IsVisible="False" />
-                                Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
                                 Grid.Column="1"
-                                Padding="0,0,8,0"
+                                Theme="{DynamicResource InnerIconButton}"
+                                Margin="8 0"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
-                                Focusable="False"
+                                Focusable="False" />
-                                Theme="{DynamicResource InnerIconButton}" />
                             <Popup
                                 Name="PART_Popup"
                                 Grid.Column="0"
-                                HorizontalOffset="-8"
                                 IsLightDismissEnabled="True"
-                                PlacementTarget="{TemplateBinding}"
+                                Placement="BottomEdgeAlignedLeft"
-                                VerticalOffset="-4">
+                                PlacementTarget="{TemplateBinding}">
                                 <Border
-                                    Margin="8"
+                                    Margin="4"
-                                    Background="Transparent"
                                     BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
                                     CornerRadius="{DynamicResource CalendarCornerRadius}">
                                     <Calendar
                                         Name="PART_Calendar"
-                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
+                                        BorderThickness="0"
                                         DisplayDate="{TemplateBinding DisplayDate}"
                                         DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
                                         DisplayDateStart="{TemplateBinding DisplayDateStart}"
                                         FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                                         IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                        SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
+                                        SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay}" />
-                                    </Calendar>
                                 </Border>
                             </Popup>
                         </Grid>

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -2,6 +2,9 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <CaptionButtons />
+    </Design.PreviewWith>
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
@@ -46,23 +49,20 @@
                     <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_FullScreenButtonIcon"
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Data="{DynamicResource WindowMinimizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_RestoreButtonIcon"
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Data="{DynamicResource WindowMaximizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
@@ -80,8 +80,7 @@
                             </Style>
                         </Button.Styles>
                         <PathIcon
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Data="{DynamicResource WindowCloseIconGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -1,9 +1,66 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
+    xmlns:converter="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
-    <converters:ItemToObjectConverter x:Key="ItemsConverter" />
+    <Design.PreviewWith>
+        <StackPanel Spacing="20" Width="800" Height="800">
+            <StackPanel.Styles>
+                <Style Selector="Carousel">
+                    <Setter Property="Height" Value="200" />
+                </Style>
+                <Style Selector="TextBlock">
+                    <Setter Property="HorizontalAlignment" Value="Center" />
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Foreground" Value="#1C1F23" />
+                </Style>
+            </StackPanel.Styles>
+            <Carousel Theme="{DynamicResource FullCarousel}">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+            <Carousel Theme="{DynamicResource FullCarousel}"
+                      Classes="Line">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+            <Carousel Theme="{DynamicResource FullCarousel}"
+                      Classes="Columnar Left">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
         <Setter Property="Template">
             <ControlTemplate>
@@ -25,123 +82,94 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
-        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Margin" Value="4 0"/>
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel>
+                <Ellipse
-                    <Border Padding="4" Background="Transparent">
+                    Name="Container"
-                        <Ellipse
+                    Width="{DynamicResource CarouselIndicatorDotWidth}"
-                            Name="Container"
+                    Height="{DynamicResource CarouselIndicatorDotHeight}"
-                            Width="{DynamicResource CarouselIndicatorWidth}"
+                    Fill="{TemplateBinding Foreground}" />
-                            Height="{DynamicResource CarouselIndicatorHeight}"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Fill="{TemplateBinding Foreground}" />
-                    </Border>
-                </Panel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Ellipse#Container">
+        <Style Selector="^:pointerover">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pressed /template/ Ellipse#Container">
+        <Style Selector="^:pressed">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
         </Style>
-        <Style Selector="^:selected /template/ Ellipse#Container">
+        <Style Selector="^:selected">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
+    <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
-        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
+                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
-        <Setter Property="Cursor" Value="Hand" />
+                  TargetType="ListBoxItem">
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel Background="Transparent">
+                <Rectangle
-                    <Border Padding="2,0" Background="Transparent">
+                    Name="Container"
-                        <Border
+                    Height="{DynamicResource CarouselIndicatorLineHeight}"
-                            Name="Container"
+                    Fill="{TemplateBinding Foreground}" />
-                            Width="{DynamicResource CarouselIndicatorLineWidth}"
-                            Height="{DynamicResource CarouselIndicatorLineHeight}"
-                            Background="{TemplateBinding Background}" />
-                    </Border>
-                </Panel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
-        </Style>
-        <Style Selector="^:pressed /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
-        </Style>
-        <Style Selector="^:selected /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
-        </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
+    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
-        <Setter Property="Cursor" Value="Hand" />
+                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+                  TargetType="ListBoxItem">
+        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel Background="Transparent">
+                <Rectangle
-                    <Border Padding="2,0" Background="Transparent">
+                    Name="Container"
-                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}" Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
+                    Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                            <Rectangle
+                    Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                                Name="Container"
+                    VerticalAlignment="Bottom"
-                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                    Fill="{TemplateBinding Foreground}">
-                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                    <Rectangle.Transitions>
-                                VerticalAlignment="Bottom"
+                        <Transitions>
-                                Fill="{TemplateBinding Background}">
+                            <DoubleTransition Property="Height" Duration="0:0:0.2" />
-                                <Rectangle.Transitions>
+                        </Transitions>
-                                    <Transitions>
+                    </Rectangle.Transitions>
-                                        <DoubleTransition Property="Height" Duration="0:0:0.2" />
+                </Rectangle>
-                                    </Transitions>
-                                </Rectangle.Transitions>
-                            </Rectangle>
-                        </Border>
-                    </Border>
-                </Panel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Rectangle#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
-        </Style>
-        <Style Selector="^:pressed /template/ Rectangle#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
-        </Style>
         <Style Selector="^:selected /template/ Rectangle#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
             <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselButton" TargetType="Button">
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
         <Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
-                <Grid Background="Transparent">
+                <PathIcon
-                    <PathIcon
+                    Theme="{DynamicResource InnerPathIcon}"
-                        Width="24"
+                    Width="{TemplateBinding Width}"
-                        Height="24"
+                    Height="{TemplateBinding Height}"
-                        Data="{DynamicResource CarouselButtonGlyph}"
+                    Data="{DynamicResource CarouselButtonGlyph}"
-                        Foreground="{TemplateBinding Foreground}" />
+                    Foreground="{TemplateBinding Foreground}" />
-                </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pointerover /template/ PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPressedForeground}" />
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="FullCarousel" TargetType="Carousel">
+        <Setter Property="PageTransition">
+            <PageSlide Orientation="Horizontal" Duration="0.3" />
+        </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="Carousel">
                 <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
@@ -164,16 +192,15 @@
                     <ListBox
                         Name="PART_ItemsPresenter2"
                         Grid.Row="1"
-                        Grid.Column="1"
+                        Grid.Column="0"
-                        MaxHeight="30"
+                        Grid.ColumnSpan="3"
-                        Margin="0,8"
+                        Margin="32"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        ItemsSource="{TemplateBinding ItemCount,
+                        ItemsSource="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemToObjectConverter}}"
-                                                      Mode=OneWay,
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
-                                                      Converter={StaticResource ItemsConverter}}"
+                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
-                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <StackPanel Orientation="Horizontal" />
@@ -184,30 +211,31 @@
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="0"
+                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
-                        VerticalAlignment="Center"
-                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
-                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
-                        Command="{Binding $parent[Carousel].Previous}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        Theme="{DynamicResource CarouselButton}" />
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        Command="{Binding $parent[Carousel].Previous}" />
                     <Button
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="2"
+                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
-                        VerticalAlignment="Center"
-                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
-                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
-                        Command="{Binding $parent[Carousel].Next}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        RenderTransform="rotate(180deg)"
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
-                        Theme="{DynamicResource CarouselButton}" />
+                        Command="{Binding $parent[Carousel].Next}"
+                        RenderTransform="rotate(180deg)" />
                 </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+            <Setter Property="ItemsPanel">
+                <ItemsPanelTemplate>
+                    <UniformGrid Columns="{TemplateBinding ItemCount}" Rows="1" Width="240" />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
         <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -47,6 +47,7 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
@@ -217,6 +218,7 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
@@ -368,6 +370,7 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -76,23 +76,22 @@
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding SelectionBoxItem}"
-                            ContentTemplate="{TemplateBinding ItemTemplate}" />
+                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" />
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Margin="{DynamicResource ComboBoxClearButtonMargin}"
+                            Theme="{DynamicResource InnerIconButton}"
+                            Width="{DynamicResource ComboBoxIconWidth}"
                             Command="{Binding $parent[ComboBox].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
                             Focusable="False"
-                            IsVisible="False"
+                            IsVisible="False" />
-                            Theme="{DynamicResource InnerIconButton}" />
 
                         <PathIcon
                             Name="DropDownGlyph"
                             Grid.Column="1"
+                            Theme="{DynamicResource InnerPathIcon}"
                             Width="{DynamicResource ComboBoxIconWidth}"
-                            Height="{DynamicResource ComboBoxIconHeight}"
-                            Margin="{DynamicResource ComboBoxIconMargin}"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"
@@ -101,9 +100,7 @@
                         <Popup
                             Name="PART_Popup"
                             Grid.Column="0"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                             MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                            ClipToBounds="False"
                             InheritsTransform="True"
                             IsLightDismissEnabled="True"
                             IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
@@ -112,24 +109,22 @@
                             <Border
                                 Name="PopupBorder"
                                 HorizontalAlignment="Stretch"
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                 Margin="{DynamicResource ComboBoxPopupBorderMargin}"
+                                Padding="{DynamicResource ComboBoxPopupBorderPadding}"
                                 Background="{DynamicResource ComboBoxPopupBackground}"
                                 BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                 BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
-                                <Border
+                                <ScrollViewer
-                                    CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
+                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    ClipToBounds="True">
+                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
-                                    <ScrollViewer
+                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                    <ItemsPresenter
-                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                        Name="PART_ItemsPresenter"
-                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                        <ItemsPresenter
+                                </ScrollViewer>
-                                            Name="PART_ItemsPresenter"
-                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                    </ScrollViewer>
-                                </Border>
                             </Border>
                         </Popup>
                     </Grid>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -71,14 +71,12 @@
                                     Name="PART_FirstSpacer"
                                     Grid.Column="1"
                                     Width="1"
-                                    Margin="0,4"
                                     HorizontalAlignment="Center"
                                     Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                 <Rectangle
                                     Name="PART_SecondSpacer"
                                     Grid.Column="3"
                                     Width="1"
-                                    Margin="0,4"
                                     HorizontalAlignment="Center"
                                     Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             </Grid>
@@ -107,7 +105,6 @@
                                     Grid.Column="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
-                                    FontSize="16"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
                                         Width="12"
@@ -222,8 +219,7 @@
                                 <PathIcon
                                     Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="16"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="16"
                                     Margin="0,0,8,0"
                                     Data="{DynamicResource DatePickerIconGlyph}"
                                     Foreground="{DynamicResource DateTimePickerIconForeground}" />
@@ -242,11 +238,11 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Margin="0,0,8,0"
+                            Theme="{DynamicResource InnerIconButton}"
+                            Margin="0,0,9,0"
                             Command="{Binding $parent[DatePicker].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
-                            IsVisible="False"
+                            IsVisible="False" />
-                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -43,8 +43,7 @@
                         <PathIcon
                             Name="DropDownGlyph"
                             Grid.Column="1"
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"

src/Semi.Avalonia/Controls/Expander.axaml

@@ -50,9 +50,9 @@
                                 <PathIcon
                                     Name="PART_PathIcon"
                                     Grid.Column="1"
-                                    Width="{DynamicResource ExpanderIconSize}"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="{DynamicResource ExpanderIconSize}"
+                                    Margin="{DynamicResource ExpanderIconMargin}"
-                                    Data="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z">
+                                    Data="{DynamicResource ExpanderIcon}">
                                     <PathIcon.Transitions>
                                         <Transitions>
                                             <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />

src/Semi.Avalonia/Controls/HyperlinkButton.axaml

@@ -29,6 +29,7 @@
                 <DockPanel>
                     <PathIcon
                         Name="PART_LinkGlyph"
+                        Theme="{DynamicResource InnerPathIcon}"
                         Margin="{DynamicResource HyperlinkButtonLinkGlyphMargin}"
                         IsVisible="False"
                         Data="{DynamicResource HyperlinkButtonLinkGlyph}"
@@ -82,7 +83,7 @@
         </Style>
 
         <Style Selector="^.Underline">
-            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:pointerover">
                 <Setter Property="TextBlock.TextDecorations" Value="Underline" />
             </Style>
         </Style>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -572,6 +572,7 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
@@ -750,6 +751,7 @@
                                 UseLayoutRounding="False" />
                             <PathIcon
                                 Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -38,8 +38,7 @@
                                 <DataTemplate>
                                     <StackPanel Orientation="Horizontal" Spacing="4">
                                         <PathIcon
-                                            Width="16"
+                                            Theme="{DynamicResource InnerPathIcon}"
-                                            Height="16"
                                             Data="{Binding IconKey, Converter={StaticResource Icons}}"
                                             Foreground="{DynamicResource ManagedFileChooserIconForeground}" />
                                         <TextBlock Foreground="{DynamicResource ManagedFileChooserTextForeground}" Text="{Binding DisplayName}" />
@@ -58,8 +57,7 @@
                             DockPanel.Dock="Left"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Width="16"
+                                Theme="{DynamicResource InnerPathIcon}"
-                                Height="16"
                                 Data="{DynamicResource ManagedFileChooserUpButtonGlyph}"
                                 Foreground="{DynamicResource ManagedFileChooserIconForeground}" />
                         </Button>
@@ -159,8 +157,7 @@
                                                 <ColumnDefinition SharedSizeGroup="Size" />
                                             </Grid.ColumnDefinitions>
                                             <PathIcon
-                                                Width="16"
+                                                Theme="{DynamicResource InnerPathIcon}"
-                                                Height="16"
                                                 Data="{Binding IconKey, Converter={StaticResource Icons}}"
                                                 Foreground="{DynamicResource ManagedFileChooserIconForeground}" />
                                             <TextBlock

src/Semi.Avalonia/Controls/Menu.axaml

@@ -10,83 +10,77 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ScrollViewer">
-                <Border 
+                <DockPanel>
-                    ClipToBounds="True"
+                    <DockPanel.Styles>
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                        <Style Selector="RepeatButton:pressed">
-                    <DockPanel>
+                            <Setter Property="RenderTransform" Value="{x:Null}" />
-                        <DockPanel.Styles>
+                        </Style>
-                            <Style Selector="RepeatButton:pressed">
+                    </DockPanel.Styles>
-                                <Setter Property="RenderTransform" Value="{x:Null}" />
+                    <RepeatButton
-                            </Style>
+                        HorizontalAlignment="Stretch"
-                        </DockPanel.Styles>
+                        HorizontalContentAlignment="Center"
-                        <RepeatButton
+                        Background="Transparent"
-                            HorizontalAlignment="Stretch"
+                        BorderThickness="0"
-                            HorizontalContentAlignment="Center"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
-                            Background="Transparent"
+                        CornerRadius="0"
-                            BorderThickness="0"
+                        DockPanel.Dock="Top"
-                            Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
+                        RenderTransform="{x:Null}">
-                            CornerRadius="0"
+                        <RepeatButton.IsVisible>
-                            DockPanel.Dock="Top"
+                            <MultiBinding
-                            RenderTransform="{x:Null}">
+                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                            <RepeatButton.IsVisible>
+                                ConverterParameter="0">
-                                <MultiBinding
+                                <Binding Path="VerticalScrollBarVisibility"
-                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                         RelativeSource="{RelativeSource TemplatedParent}" />
-                                    ConverterParameter="0">
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="VerticalScrollBarVisibility"
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                             RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                            </MultiBinding>
-                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                        </RepeatButton.IsVisible>
-                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                        <PathIcon
-                                </MultiBinding>
+                            Theme="{DynamicResource InnerPathIcon}"
-                            </RepeatButton.IsVisible>
+                            Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
-                            <PathIcon
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                                Width="8"
+                    </RepeatButton>
-                                Height="8"
+                    <RepeatButton
-                                Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
+                        HorizontalAlignment="Stretch"
-                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                        HorizontalContentAlignment="Center"
-                        </RepeatButton>
+                        Background="Transparent"
-                        <RepeatButton
+                        BorderThickness="0"
-                            HorizontalAlignment="Stretch"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
-                            HorizontalContentAlignment="Center"
+                        CornerRadius="0"
-                            Background="Transparent"
+                        DockPanel.Dock="Bottom"
-                            BorderThickness="0"
+                        RenderTransform="{x:Null}">
-                            Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                        <RepeatButton.IsVisible>
-                            CornerRadius="0"
+                            <MultiBinding
-                            DockPanel.Dock="Bottom"
+                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                            RenderTransform="{x:Null}">
+                                ConverterParameter="100">
-                            <RepeatButton.IsVisible>
+                                <Binding Path="VerticalScrollBarVisibility"
-                                <MultiBinding
+                                         RelativeSource="{RelativeSource TemplatedParent}" />
-                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    ConverterParameter="100">
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="VerticalScrollBarVisibility"
+                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                             RelativeSource="{RelativeSource TemplatedParent}" />
+                            </MultiBinding>
-                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                        </RepeatButton.IsVisible>
-                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                        <PathIcon
-                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                            Theme="{DynamicResource InnerPathIcon}"
-                                </MultiBinding>
+                            Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
-                            </RepeatButton.IsVisible>
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                            <PathIcon
+                    </RepeatButton>
-                                Width="8"
+                    <ScrollContentPresenter
-                                Height="8"
+                        Name="PART_ContentPresenter"
-                                Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
+                        Margin="{TemplateBinding Padding}"
-                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        </RepeatButton>
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        <ScrollContentPresenter
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                            Name="PART_ContentPresenter"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                            Margin="{TemplateBinding Padding}"
+                        <ScrollContentPresenter.GestureRecognizers>
-                            HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                            <ScrollGestureRecognizer
-                            HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
-                            VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
-                            VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
-                            <ScrollContentPresenter.GestureRecognizers>
+                        </ScrollContentPresenter.GestureRecognizers>
-                                <ScrollGestureRecognizer
+                    </ScrollContentPresenter>
-                                    CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                </DockPanel>
-                                    CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
-                                    IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
-                            </ScrollContentPresenter.GestureRecognizers>
-                        </ScrollContentPresenter>
-                    </DockPanel>
-                </Border>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -115,7 +109,6 @@
     <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
         <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
         <Setter Property="Cursor" Value="Hand" />
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
         <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
@@ -184,8 +177,7 @@
                             <PathIcon
                                 Name="PART_ExpandIcon"
                                 Grid.Column="4"
-                                Width="8"
+                                Theme="{DynamicResource InnerPathIcon}"
-                                Height="8"
                                 Margin="{DynamicResource MenuItemExpandIconMargin}"
                                 VerticalAlignment="Center"
                                 Data="{DynamicResource MenuItemExpandIconGlyph}"
@@ -283,6 +275,7 @@
             <Setter Property="Content">
                 <Template>
                     <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
                         Foreground="{Binding $parent[MenuItem].Foreground}"
                         Data="{StaticResource MenuCheckGlyph}" />
                 </Template>

src/Semi.Avalonia/Controls/NotificationCard.axaml

@@ -43,6 +43,7 @@
                             <DockPanel MinWidth="{DynamicResource NotificationCardMinWidth}">
                                 <PathIcon
                                     Name="NotificationIcon"
+                                    Theme="{DynamicResource InnerPathIcon}"
                                     Width="{DynamicResource NotificationCardIconWidth}"
                                     Height="{DynamicResource NotificationCardIconHeight}"
                                     Margin="{DynamicResource NotificationCardIconMargin}"

src/Semi.Avalonia/Controls/PathIcon.axaml

@@ -20,7 +20,48 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^.Active /template/ Path#PART_Path">
-            <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"></Setter>
+            <Setter Property="Fill" Value="{TemplateBinding BorderBrush}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="InnerPathIcon" TargetType="PathIcon">
+        <Setter Property="Height" Value="16" />
+        <Setter Property="Width" Value="16" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="PathIcon">
+                <Border Background="{TemplateBinding Background}">
+                    <Viewbox
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}">
+                        <Path
+                            Name="PART_Path"
+                            Width="24"
+                            Height="24"
+                            Data="{TemplateBinding Data}"
+                            Fill="{TemplateBinding Foreground}" />
+                    </Viewbox>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^.Active /template/ Path#PART_Path">
+            <Setter Property="Fill" Value="{TemplateBinding BorderBrush}" />
+        </Style>
+        <Style Selector="^.ExtraSmall">
+            <Setter Property="Height" Value="8" />
+            <Setter Property="Width" Value="8" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="Height" Value="12" />
+            <Setter Property="Width" Value="12" />
+        </Style>
+        <Style Selector="^.Large">
+            <Setter Property="Height" Value="20" />
+            <Setter Property="Width" Value="20" />
+        </Style>
+        <Style Selector="^.ExtraLarge">
+            <Setter Property="Height" Value="24" />
+            <Setter Property="Width" Value="24" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -91,7 +91,7 @@
                             Width="{DynamicResource SplitButtonSeparatorWidth}"
                             VerticalAlignment="Stretch"
                             DockPanel.Dock="Left"
-                            Fill="{TemplateBinding BorderBrush}"
+                            Fill="Transparent"
                             StrokeThickness="0" />
                         <Button
                             Name="PART_SecondaryButton"
@@ -103,8 +103,7 @@
                             CornerRadius="0"
                             Theme="{DynamicResource SemiSplitButtonElement}">
                             <PathIcon
-                                Width="12"
+                                Theme="{DynamicResource InnerPathIcon}"
-                                Height="12"
                                 Data="{DynamicResource SplitButtonIconGlyph}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -510,22 +510,26 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
+        <Setter Property="Width" Value="16"/>
+        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
+        <!--  Background must be transparent or hit test will fail  -->
+        <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
-                <!--  Background must be transparent or hit test will fail  -->
+                <Panel
-                <Panel Background="Transparent">
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}">
                     <PathIcon
-                        Width="16"
+                        Theme="{DynamicResource InnerPathIcon}"
-                        Height="16"
                         Data="{DynamicResource PasswordBoxRevealButtonData}"
-                        IsVisible="{Binding $parent[ToggleButton].IsChecked, Converter={x:Static BoolConverters.Not}}" />
+                        IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}" />
                     <PathIcon
-                        Width="16"
+                        Theme="{DynamicResource InnerPathIcon}"
-                        Height="16"
                         Data="{DynamicResource PasswordBoxHideButtonData}"
-                        IsVisible="{Binding $parent[ToggleButton].IsChecked}" />
+                        IsVisible="{TemplateBinding IsChecked}" />
                 </Panel>
             </ControlTemplate>
         </Setter>

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -86,21 +86,18 @@
                                     Name="PART_FirstSpacer"
                                     Grid.Column="1"
                                     Width="1"
-                                    Margin="0,4"
                                     HorizontalAlignment="Center"
                                     Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                 <Rectangle
                                     Name="PART_SecondSpacer"
                                     Grid.Column="3"
                                     Width="1"
-                                    Margin="0,4"
                                     HorizontalAlignment="Center"
                                     Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                 <Rectangle
                                     Name="PART_ThirdSpacer"
                                     Grid.Column="5"
                                     Width="1"
-                                    Margin="0,4"
                                     HorizontalAlignment="Center"
                                     Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             </Grid>
@@ -280,8 +277,7 @@
                                 <PathIcon
                                     Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="16"
+                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Height="16"
                                     Margin="0,0,8,0"
                                     Data="{DynamicResource TimePickerIconGlyph}"
                                     Foreground="{DynamicResource DateTimePickerIconForeground}" />
@@ -303,11 +299,11 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Margin="0,0,8,0"
+                            Theme="{DynamicResource InnerIconButton}"
+                            Margin="0,0,9,0"
                             Command="{Binding $parent[TimePicker].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
-                            IsVisible="False"
+                            IsVisible="False" />
-                            Theme="{DynamicResource InnerIconButton}" />
                     </Grid>
                 </DataValidationErrors>
             </ControlTemplate>

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -3,22 +3,45 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <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>
     <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="FocusAdorner">
             <FocusAdornerTemplate>
                 <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"/>
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
             </FocusAdornerTemplate>
         </Setter>
         <Setter Property="KnobTransitions">
@@ -32,9 +55,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid
-                    Background="{TemplateBinding Background}"
+                    RowDefinitions="Auto, *"
-                    Cursor="Hand"
-                    RowDefinitions="Auto,*"
                     ColumnDefinitions="Auto, *">
                     <ContentPresenter
                         Name="PART_ContentPresenter"
@@ -53,9 +74,10 @@
                         TemplatedControl.IsTemplateFocusTarget="True"
                         Width="{DynamicResource ToggleSwitchDefaultWidth}"
                         Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                        BackgroundSizing="OuterBorderEdge"
                         BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                        BorderThickness="1"
+                        BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                        CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                         <Border.Transitions>
                             <Transitions>
                                 <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -66,7 +88,7 @@
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                 Name="PART_MovingKnobs"
                                 Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@@ -79,7 +101,7 @@
                                 <Arc
                                     Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                     StartAngle="0"
                                     SweepAngle="140"
                                     StrokeJoin="Round"
@@ -107,7 +129,7 @@
                                         </Style>
                                     </Arc.Styles>
                                 </Arc>
-                            </Grid>
+                            </Panel>
                         </Canvas>
                     </Border>
 
@@ -156,7 +178,6 @@
             <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
-                <Setter Property="BorderThickness" Value="1" />
             </Style>
         </Style>
 
@@ -200,15 +221,16 @@
             <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchSmallCornerRadius}" />
             </Style>
             <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
             </Style>
-            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}" />
             </Style>
             <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                 <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorSmallStrokeThickness}" />
@@ -218,15 +240,16 @@
             <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchLargeCornerRadius}" />
             </Style>
             <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
             </Style>
-            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                 <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
                 <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}" />
             </Style>
             <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                 <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorLargeStrokeThickness}" />
@@ -234,69 +257,25 @@
         </Style>
     </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
         x:Key="SimpleToggleSwitch"
         BasedOn="{StaticResource {x:Type ToggleSwitch}}"
         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">
                 <Border
                     Name="SwitchBackgroundBorder"
                     Background="{TemplateBinding Background}"
-                    Cursor="Hand"
                     Width="{DynamicResource ToggleSwitchDefaultWidth}"
                     Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    BackgroundSizing="OuterBorderEdge"
                     BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                    BorderThickness="1"
+                    BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
-                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                    CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                     <Border.Transitions>
                         <Transitions>
                             <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -311,7 +290,7 @@
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                 Name="PART_MovingKnobs"
                                 Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@@ -324,7 +303,7 @@
                                 <Arc
                                     Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                     StartAngle="0"
                                     SweepAngle="140"
                                     StrokeJoin="Round"
@@ -352,7 +331,7 @@
                                         </Style>
                                     </Arc.Styles>
                                 </Arc>
-                            </Grid>
+                            </Panel>
                         </Canvas>
                         <ContentPresenter
                             Name="PART_OnContentPresenter"
@@ -391,4 +370,105 @@
             </Style>
         </Style>
     </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>

src/Semi.Avalonia/Converters/ItemConverter.cs

@@ -0,0 +1,14 @@
+using System.Collections;
+using System.Linq;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.Converters;
+
+public static class ItemConverter
+{
+    public static readonly IValueConverter ItemVisibleConverter =
+        new FuncValueConverter<int?, bool>(count => count is > 1);
+
+    public static readonly IValueConverter ItemToObjectConverter =
+        new FuncValueConverter<int?, IEnumerable>(count => Enumerable.Repeat(new object(), count ?? 0));
+}

src/Semi.Avalonia/Converters/ItemToObjectConverter.cs

@@ -1,26 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Linq;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Data.Converters;
-
-namespace Semi.Avalonia.Converters;
-
-public class ItemToObjectConverter: IValueConverter
-{
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        if (value is int i)
-        {
-            return Enumerable.Repeat(new object(), i).ToList();
-        }
-        return new List<object>();
-    }
-
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        throw new NotImplementedException();
-    }
-}

src/Semi.Avalonia/Locale/uk-ua.axaml

@@ -1,5 +1,5 @@
 <ResourceDictionary
-    x:Class="Semi.Avalonia.Locale.uk_uk"
+    x:Class="Semi.Avalonia.Locale.uk_ua"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  DatePicker  -->

src/Semi.Avalonia/Locale/uk-ua.axaml.cs

@@ -2,7 +2,7 @@
 
 namespace Semi.Avalonia.Locale;
 
-public class uk_uk : ResourceDictionary
+public class uk_ua : ResourceDictionary
 {
     
 }

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia</Title>
-        <PackageReleaseNotes>Update to Avalonia 11.2.1</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia 11.2.1.1</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Semi.Avalonia/Themes/Dark/Carousel.axaml

@@ -1,9 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Carousel.axaml

@@ -1,9 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/SemiTheme.axaml.cs

@@ -20,7 +20,7 @@ public class SemiTheme : Styles
         { new CultureInfo("zh-cn"), new zh_cn() },
         { new CultureInfo("en-us"), new en_us() },
         { new CultureInfo("ja-jp"), new ja_jp() },
-        { new CultureInfo("uk-uk"), new uk_uk() },
+        { new CultureInfo("uk-ua"), new uk_ua() },
         { new CultureInfo("ru-ru"), new ru_ru() },
     };
 

src/Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Thickness x:Key="AutoCompleteBoxPopupBorderThickness">1</Thickness>
     <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
+    <Thickness x:Key="AutoCompleteBoxPopupPadding">0 4</Thickness>
     <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
     <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
     <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>

src/Semi.Avalonia/Themes/Shared/Carousel.axaml

@@ -1,15 +1,14 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StreamGeometry x:Key="CarouselButtonGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</StreamGeometry>
 
-    <x:Double x:Key="CarouselIndicatorWidth">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorDotWidth">8</x:Double>
-    <x:Double x:Key="CarouselIndicatorHeight">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorDotHeight">8</x:Double>
 
-    <x:Double x:Key="CarouselIndicatorLineWidth">78</x:Double>
     <x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double>
 
     <x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
 
-    <Thickness x:Key="CarouselButtonMargin">8</Thickness>
+    <Thickness x:Key="CarouselButtonMargin">20</Thickness>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/CheckBox.axaml

@@ -5,8 +5,8 @@
     <Thickness x:Key="CheckBoxBoxMargin">0 2 0 0</Thickness>
     <Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
 
-    <x:Double x:Key="CheckBoxBoxGlyphWidth">10</x:Double>
+    <x:Double x:Key="CheckBoxBoxGlyphWidth">16</x:Double>
-    <x:Double x:Key="CheckBoxBoxGlyphHeight">10</x:Double>
+    <x:Double x:Key="CheckBoxBoxGlyphHeight">16</x:Double>
 
     <CornerRadius x:Key="CheckBoxBoxCornerRadius">3</CornerRadius>
     <Thickness x:Key="CheckBoxBoxBorderThickness">1</Thickness>

src/Semi.Avalonia/Themes/Shared/ComboBox.axaml

@@ -3,20 +3,18 @@
     <Thickness x:Key="ComboBoxSelectorThickness">1</Thickness>
 
     <Thickness x:Key="ComboBoxItemDefaultPadding">12 8</Thickness>
-    <Thickness x:Key="ComboBoxSelectorDefaultPadding">8 0</Thickness>
+    <Thickness x:Key="ComboBoxSelectorDefaultPadding">12 0 0 0</Thickness>
 
     <x:Double x:Key="ComboBoxPopupMaxDropDownHeight">504</x:Double>
     <Thickness x:Key="ComboBoxPopupBorderThickness">1</Thickness>
     <CornerRadius x:Key="ComboBoxPopupBoxCornerRadius">6</CornerRadius>
 
-    <Thickness x:Key="ComboBoxClearButtonMargin">0 0 8 0</Thickness>
+    <x:Double x:Key="ComboBoxIconWidth">32</x:Double>
-    <Thickness x:Key="ComboBoxIconMargin">0 0 12 0</Thickness>
-    <x:Double x:Key="ComboBoxIconWidth">12</x:Double>
-    <x:Double x:Key="ComboBoxIconHeight">12</x:Double>
     <StreamGeometry x:Key="ComboBoxIcon">
         M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
     </StreamGeometry>
     <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
+    <Thickness x:Key="ComboBoxPopupBorderPadding">0 4</Thickness>
 
     <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
     <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>

src/Semi.Avalonia/Themes/Shared/Expander.axaml

@@ -1,6 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <FontWeight x:Key="ExpanderHeaderFontWeight">600</FontWeight>
     <x:Double x:Key="ExpanderIconSize">8</x:Double>
+    <Thickness x:Key="ExpanderIconMargin">8 0 0 0</Thickness>
+    <StreamGeometry x:Key="ExpanderIcon">
+        M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
+    </StreamGeometry>
 
     <Thickness x:Key="ExpanderHeaderMargin">8 4</Thickness>
     <Thickness x:Key="ExpanderHeaderPadding">8</Thickness>

src/Semi.Avalonia/Themes/Shared/HyperlinkButton.axaml

@@ -1,8 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <x:Double x:Key="HyperlinkButtonFontSize">14</x:Double>
     <FontWeight x:Key="HyperlinkButtonFontWeight">600</FontWeight>
-    <x:Double x:Key="HyperlinkButtonLinkGlyphWidth">14</x:Double>
+    <x:Double x:Key="HyperlinkButtonLinkGlyphWidth">16</x:Double>
-    <x:Double x:Key="HyperlinkButtonLinkGlyphHeight">14</x:Double>
+    <x:Double x:Key="HyperlinkButtonLinkGlyphHeight">16</x:Double>
     <Thickness x:Key="HyperlinkButtonLinkGlyphMargin">0 0 4 0</Thickness>
 
     <StreamGeometry x:Key="HyperlinkButtonLinkGlyph">M 12.9393 2.9393 C 15.182 0.69666 18.818 0.696668 21.0606 2.93931 C 23.3033 5.18195 23.3033 8.81799 21.0606 11.0606 L 18.3925 13.7288 C 18.4631 13.3298 18.5 12.9192 18.5 12.5 C 18.5 11.5751 18.3206 10.6921 17.9947 9.88386 L 18.9393 8.93931 C 20.0104 7.86824 20.0104 6.13169 18.9393 5.06063 C 17.8682 3.98956 16.1317 3.98956 15.0606 5.06062 L 11.0606 9.06063 C 9.98956 10.1317 9.98956 11.8682 11.0606 12.9393 C 11.3265 13.2052 11.6335 13.4051 11.961 13.539 L 9.75848 15.7415 C 9.47 15.5439 9.19556 15.3169 8.9393 15.0606 C 6.69666 12.818 6.69666 9.18195 8.9393 6.93931 L 12.9393 2.9393 Z M 2.9393 12.9393 L 5.60751 10.2711 C 5.53685 10.6701 5.49999 11.0808 5.49999 11.5001 C 5.49999 12.4249 5.67935 13.3079 6.00519 14.1161 L 5.06062 15.0607 C 3.98956 16.1317 3.98956 17.8683 5.06063 18.9393 C 6.13169 20.0104 7.86824 20.0104 8.9393 18.9393 L 12.9393 14.9393 C 14.0104 13.8683 14.0104 12.1317 12.9393 11.0607 C 12.7664 10.8878 12.5762 10.7428 12.3743 10.6258 L 14.5302 8.46985 C 14.7141 8.61357 14.8914 8.77007 15.0606 8.93934 C 17.3033 11.182 17.3033 14.818 15.0606 17.0607 L 11.0606 21.0607 C 8.81798 23.3033 5.18194 23.3033 2.9393 21.0607 C 0.696665 18.818 0.696663 15.182 2.9393 12.9393 Z</StreamGeometry>

src/Semi.Avalonia/Themes/Shared/ListBox.axaml

@@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- ListBox -->
     <Thickness x:Key="ListBoxItemDefaultPadding">12 8</Thickness>
-    <CornerRadius x:Key="ListBoxItemCornerRadius">3</CornerRadius>
+    <CornerRadius x:Key="ListBoxItemCornerRadius">0</CornerRadius>
 
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/Menu.axaml

@@ -6,7 +6,7 @@
 
     <!--  MenuFlyout  -->
     <Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
-    <Thickness x:Key="MenuFlyoutPadding">0</Thickness>
+    <Thickness x:Key="MenuFlyoutPadding">0 4</Thickness>
     <CornerRadius x:Key="MenuFlyoutCornerRadius">6</CornerRadius>
     <x:Double x:Key="MenuFlyoutMinHeight">16</x:Double>
     <x:Double x:Key="MenuFlyoutMinWidth">100</x:Double>

src/Semi.Avalonia/Themes/Shared/NotificationCard.axaml

@@ -5,8 +5,8 @@
     <Thickness x:Key="NotificationCardMargin">8</Thickness>
     <Thickness x:Key="NotificationCardPadding">20 16 12 16</Thickness>
 
-    <x:Double x:Key="NotificationCardIconWidth">18</x:Double>
+    <x:Double x:Key="NotificationCardIconWidth">20</x:Double>
-    <x:Double x:Key="NotificationCardIconHeight">18</x:Double>
+    <x:Double x:Key="NotificationCardIconHeight">20</x:Double>
     <Thickness x:Key="NotificationCardIconMargin">0 0 12 0</Thickness>
     <StreamGeometry x:Key="NotificationCardInformationIconPathData">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 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z</StreamGeometry>
     <StreamGeometry x:Key="NotificationCardSuccessIconPathData">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.8831 9.82235L11.6854 17.4112C11.4029 17.7806 10.965 17.9981 10.5 18C10.035 18.0019 9.59533 17.788 9.30982 17.421L5.81604 13.4209C5.30744 12.767 5.42524 11.8246 6.07916 11.316C6.73308 10.8074 7.67549 10.9252 8.1841 11.5791L10.4838 14.0439L15.5 8C16.0032 7.34193 16.9446 7.21641 17.6027 7.71964C18.2608 8.22287 18.3863 9.16428 17.8831 9.82235Z</StreamGeometry>

src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml

@@ -5,13 +5,18 @@
     <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
     <x:Double x:Key="ToggleSwitchSmallWidth">26</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>
     <x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
     <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</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="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>