feat: remove Calendar BorderThickness.

(cherry picked from commit a909b6da6e9889bd19843d5d404c484997d7128f)

.github/workflows/pack-tree.yml

@@ -0,0 +1,26 @@
+name: Pack TreeDataGrid Nuget
+
+on:
+  push:
+    branches: [ "action/pack-tree" ]
+  pull_request:
+    branches: [ "action/pack-tree" ]
+
+jobs:
+  nuget:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Nuget Semi.Avalonia.TreeDataGrid
+        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+
+      - name: Publish NuGet package
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v4.3.1
+        with:
+          name: nugets
+          path: ./nugets

.github/workflows/pack.yml

@@ -22,8 +22,8 @@ jobs:
       - name: Nuget Semi.Avalonia.DataGrid
         run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
 
-      - name: Nuget Semi.Avalonia.TreeDataGrid
+      - name: Publish NuGet package
-        run: dotnet pack ./src/Semi.Avalonia.TreeDataGrid  -o ./nugets
+        run: dotnet nuget push "./nugets/*.nupkg" --api-key ${{ secrets.NUGET_ORG_API_KEY }} --source https://api.nuget.org/v3/index.json --skip-duplicate
 
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4.3.1

Semi.Avalonia.sln

@@ -12,6 +12,14 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Files", "Solution
 		src\Package.props = src\Package.props
 	EndProjectSection
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "GitHub Action", "GitHub Action", "{318534A1-1CC3-40FB-B4AE-736F94465232}"
+	ProjectSection(SolutionItems) = preProject
+		.github\workflows\deploy.yml = .github\workflows\deploy.yml
+		.github\workflows\pack.yml = .github\workflows\pack.yml
+		.github\workflows\pack-tree.yml = .github\workflows\pack-tree.yml
+		.github\workflows\publish.yml = .github\workflows\publish.yml
+	EndProjectSection
+EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Demo", "Demo", "{43091528-9509-43CB-A003-9C5C11E96DD6}"
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Semi.Avalonia.Demo.Desktop", "demo\Semi.Avalonia.Demo.Desktop\Semi.Avalonia.Demo.Desktop.csproj", "{2ADCA724-2B6D-46EC-87F7-604D7918B89A}"

demo/Directory.Build.props

@@ -2,5 +2,6 @@
   <PropertyGroup>
     <Nullable>enable</Nullable>
     <AvaloniaVersion>11.1.3</AvaloniaVersion>
+    <CommunityToolkitVersion>8.3.2</CommunityToolkitVersion>
   </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Desktop/Program.cs

@@ -16,13 +16,13 @@ class Program
     public static void Main(string[] args) => BuildAvaloniaApp()
         .With(new FontManagerOptions
         {
-            FontFallbacks = new[]
+            FontFallbacks =
-            {
+            [
                 new FontFallback
                 {
                     FontFamily = new FontFamily("Microsoft YaHei")
                 }
-            }
+            ]
         })
         .StartWithClassicDesktopLifetime(args);
 

demo/Semi.Avalonia.Demo.Web/AvaloniaAppBuilderExtensions.cs

@@ -11,6 +11,6 @@ public static class AvaloniaAppBuilderExtensions
         builder.With(new FontManagerOptions
         {
             DefaultFamilyName = DefaultFontFamily,
-            FontFallbacks = new[] { new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) } }
+            FontFallbacks = [new FontFallback { FontFamily = new FontFamily(DefaultFontFamily) }]
         });
 }

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml

@@ -7,6 +7,7 @@
     x:DataType="viewModels:ColorItemViewModel">
     <StreamGeometry x:Key="CopyIcon">M5 7C3.89543 7 3 7.89543 3 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5Z,M7 4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H19V8C19 6 18 5 16 5H7V4Z</StreamGeometry>
     <ControlTheme x:Key="{x:Type controls:ColorDetailControl}" TargetType="controls:ColorDetailControl">
+        <!--  Add Resources Here  -->
         <Setter Property="controls:ColorDetailControl.Template">
             <ControlTemplate TargetType="controls:ColorDetailControl">
                 <StackPanel>

demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml

@@ -6,15 +6,15 @@
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
-        <Setter Property="controls:FunctionalColorGroupControl.Template">
+        <Setter Property="Template">
-            <ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
+            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
                 <Grid RowDefinitions="Auto, *">
-                    <TextBlock
+                    <SelectableTextBlock
                         Grid.Row="0"
                         Margin="0,16,0,0"
                         Classes="H3"
                         Text="{TemplateBinding Title}"
-                        Theme="{DynamicResource TitleTextBlock}" />
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
@@ -129,4 +129,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs

@@ -4,33 +4,38 @@ using Avalonia.Controls.Primitives;
 
 namespace Semi.Avalonia.Demo.Controls;
 
-public class FunctionalColorGroupControl: TemplatedControl
+public class FunctionalColorGroupControl : TemplatedControl
 {
-    public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
+    public static readonly StyledProperty<string?> TitleProperty =
-        nameof(Title));
+        AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(nameof(Title));
+
     public string? Title
     {
         get => GetValue(TitleProperty);
         set => SetValue(TitleProperty, value);
     }
-    
+
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty =
-        nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(LightColors),
+            o => o.LightColors, (o, v) => o.LightColors = v);
+
     private IEnumerable? _lightColors;
+
     public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
-    
+
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty =
-        nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
+        AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(nameof(DarkColors),
+            o => o.DarkColors, (o, v) => o.DarkColors = v);
+
     private IEnumerable? _darkColors;
+
     public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
     }
-    
-    
 }

demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.axaml

@@ -0,0 +1,88 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+    x:CompileBindings="True"
+    x:DataType="viewModels:ShadowGroupViewModel">
+    <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="controls:ShadowGroupControl">
+                <Grid RowDefinitions="Auto, *">
+                    <SelectableTextBlock
+                        Grid.Row="0"
+                        Margin="0,16,0,0"
+                        Classes="H3"
+                        Text="{TemplateBinding Title}"
+                        Theme="{DynamicResource TitleSelectableTextBlock}" />
+                    <TabControl Grid.Row="1">
+                        <TabItem Header="Light">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                        <TabItem Header="Dark">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
+                                <DataGrid.Columns>
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding ResourceKey}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ShadowItemViewModel"
+                                        Binding="{Binding ShadowDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
+                                        <DataGridTemplateColumn.CellTemplate>
+                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
+                                            </DataTemplate>
+                                        </DataGridTemplateColumn.CellTemplate>
+                                    </DataGridTemplateColumn>
+                                </DataGrid.Columns>
+                            </DataGrid>
+                        </TabItem>
+                    </TabControl>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

demo/Semi.Avalonia.Demo/Controls/ShadowGroupControl.cs

@@ -0,0 +1,41 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+
+namespace Semi.Avalonia.Demo.Controls;
+
+public class ShadowGroupControl : TemplatedControl
+{
+    public static readonly StyledProperty<string?> TitleProperty =
+        AvaloniaProperty.Register<ShadowGroupControl, string?>(nameof(Title));
+
+    public string? Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    private IEnumerable? _lightShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> LightShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(LightShadows),
+            o => o.LightShadows, (o, v) => o.LightShadows = v);
+
+    public IEnumerable? LightShadows
+    {
+        get => _lightShadows;
+        set => SetAndRaise(LightShadowsProperty, ref _lightShadows, value);
+    }
+
+    private IEnumerable? _darkShadows;
+
+    public static readonly DirectProperty<ShadowGroupControl, IEnumerable?> DarkShadowsProperty =
+        AvaloniaProperty.RegisterDirect<ShadowGroupControl, IEnumerable?>(nameof(DarkShadows),
+            o => o.DarkShadows, (o, v) => o.DarkShadows = v);
+
+    public IEnumerable? DarkShadows
+    {
+        get => _darkShadows;
+        set => SetAndRaise(DarkShadowsProperty, ref _darkShadows, value);
+    }
+}

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>
+</UserControl>

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

@@ -19,42 +19,74 @@
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
-                VerticalAlignment="Top"
-                Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    Theme="{StaticResource SimpleColorView}"
+                    HsvColor="hsv(120,11%,10%)"
                     IsAlphaVisible="True"
-                    HsvColor="hsv(120,11%,10%)" />
+                    Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
                     <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker ColorSpectrumShape="Ring">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
                         <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
 
-                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
+                <ColorPicker
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <ColorPicker
+                    Margin="8"
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
+                            CornerRadius="1" />
+                    </ColorPicker.Content>
+                    <ColorPicker.Styles>
+                        <Style Selector="DropDownButton">
+                            <Setter Property="Padding" Value="0"/>
+                            <Style Selector="^ /template/ PathIcon">
+                                <Setter Property="IsVisible" Value="False"/>
+                            </Style>
+                        </Style>
+                    </ColorPicker.Styles>
+                </ColorPicker>
+
+            </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
+                <ColorPicker
-                             HsvColor="hsv(120,11%,10%)" />
+                    Margin="8"
-                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
+                    HsvColor="hsv(120,11%,10%)"
-                             HsvColor="hsv(120,11%,10%)" />
+                    Theme="{StaticResource SimpleColorPicker}" />
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

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

@@ -101,7 +101,7 @@
                 </DataGrid.Columns>
             </DataGrid>
         </TabItem>
-        <TabItem x:Name="EditableTab" Header="Editable">
+        <TabItem Name="EditableTab" Header="Editable">
             <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
@@ -109,14 +109,14 @@
                     Spacing="4">
                     <TextBlock VerticalAlignment="Center" Text="FontSize:" />
                     <Slider
-                        x:Name="FontSizeSlider"
+                        Name="FontSizeSlider"
                         Width="100"
                         VerticalAlignment="Center"
                         Maximum="30"
                         Minimum="5"
                         Value="14" />
                     <CheckBox
-                        x:Name="IsThreeStateCheckBox"
+                        Name="IsThreeStateCheckBox"
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>

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/HeaderedContentControlDemo.axaml

@@ -2,7 +2,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
@@ -27,12 +27,18 @@
             </WrapPanel>
             <TextBlock>GroupBox Theme</TextBlock>
             <HeaderedContentControl
-                HorizontalAlignment="Left"
                 Theme="{DynamicResource GroupBox}"
-                Header="Semi Design"
+                HorizontalAlignment="Left"
-                Width="400"
+                MaxWidth="360">
-                Height="200">
+                <HeaderedContentControl.Header>
-                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+                <HeaderedContentControl.Content>
+                    <SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
+                </HeaderedContentControl.Content>
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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

@@ -8,36 +8,22 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <HyperlinkButton
+            NavigateUri="https://www.irihi.tech/"
+            Content="IRIHI Homepage" />
+        <HyperlinkButton
+            Classes="Underline"
+            IsEnabled="False"
+            NavigateUri="https://www.irihi.tech/"
+            Content="Not Enabled" />
+        <HyperlinkButton
+            Classes="WithIcon Underline"
+            Height="20"
+            NavigateUri="https://www.irihi.tech/"
+            Content="带下划线的网页链接" />
         <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
-                <TextBlock
+            <HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
-                    HorizontalAlignment="Center"
-                    Text="iRihi Homepage"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton Height="20" IsEnabled="False">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Not Enabled"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <HyperlinkButton
-                BorderThickness="1"
-                Classes="WithIcon"
-                Height="20"
-                NavigateUri="http://www.irihi.tech/">
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Text="Link with Icon"
-                    TextDecorations="Underline"
-                    VerticalAlignment="Center" />
-            </HyperlinkButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -4,7 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer>
@@ -13,15 +13,13 @@
                 <Style Selector="Label">
                     <Setter Property="Margin" Value="4" />
                 </Style>
+                <Style Selector="Grid > TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
             </StackPanel.Styles>
             <ScrollViewer HorizontalScrollBarVisibility="Auto">
                 <StackPanel Orientation="Horizontal">
-                    <StackPanel.Styles>
-                        <Style Selector="Label, TextBlock">
-                            <Setter Property="VerticalAlignment" Value="Center" />
-                            <Setter Property="Margin" Value="4" />
-                        </Style>
-                    </StackPanel.Styles>
                     <HeaderedContentControl
                         Width="400"
                         Height="400"
@@ -32,62 +30,62 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="0"  Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
-                            <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
+                            <TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
-                            <Label Grid.Row="2" Grid.Column="1">Text</Label>
+                            <Label Grid.Row="1" Grid.Column="1">Text</Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="Secondary">
                                 Secondary
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="Tertiary">
                                 Tertiary
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="Quaternary">
                                 Quaternary
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="Success">
                                 Success
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="Warning">
                                 Warning
                             </Label>
                             <Label
-                                Grid.Row="8"
+                                Grid.Row="7"
                                 Grid.Column="1"
                                 Classes="Danger">
                                 Danger
                             </Label>
                             <Label
-                                Grid.Row="9"
+                                Grid.Row="8"
                                 Grid.Column="1"
                                 Classes="Mark">
                                 Default Mark
                             </Label>
                             <Label
-                                Grid.Row="10"
+                                Grid.Row="9"
                                 Grid.Column="1"
                                 Classes="Code">
                                 Code
@@ -104,51 +102,51 @@
                         <Grid
                             VerticalAlignment="Top"
                             ColumnDefinitions="Auto, *"
-                            RowDefinitions="*,*,*,*,*,*,*,*">
+                            RowDefinitions="*,*,*,*,*,*,*">
-                            <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                            <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
-                            <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                            <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
-                            <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                            <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
-                            <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                            <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
-                            <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                            <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                            <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                             <Label
-                                Grid.Row="2"
+                                Grid.Row="1"
                                 Grid.Column="1"
                                 Classes="H1"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 1
                             </Label>
                             <Label
-                                Grid.Row="3"
+                                Grid.Row="2"
                                 Grid.Column="1"
                                 Classes="H2"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 2
                             </Label>
                             <Label
-                                Grid.Row="4"
+                                Grid.Row="3"
                                 Grid.Column="1"
                                 Classes="H3"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 3
                             </Label>
                             <Label
-                                Grid.Row="5"
+                                Grid.Row="4"
                                 Grid.Column="1"
                                 Classes="H4"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 4
                             </Label>
                             <Label
-                                Grid.Row="6"
+                                Grid.Row="5"
                                 Grid.Column="1"
                                 Classes="H5"
                                 Theme="{StaticResource TitleLabel}">
                                 Header 5
                             </Label>
                             <Label
-                                Grid.Row="7"
+                                Grid.Row="6"
                                 Grid.Column="1"
                                 Classes="H6"
                                 Theme="{StaticResource TitleLabel}">

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

@@ -17,10 +17,11 @@
     <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" />
+                <ResourceInclude Source="../Controls/ShadowGroupControl.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
@@ -33,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
@@ -115,7 +116,6 @@
                     <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <!--    -->
                                 <controls:FunctionalColorGroupControl
                                     Title="{Binding Title}"
                                     DarkColors="{Binding DarkColors}"
@@ -123,8 +123,20 @@
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
+
+                    <ItemsControl ItemsSource="{Binding Shadows}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <controls:ShadowGroupControl
+                                    Title="{Binding Title}"
+                                    DarkShadows="{Binding DarkShadows}"
+                                    LightShadows="{Binding LightShadows}" />
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+
                 </StackPanel>
             </ScrollViewer>
         </SplitView.Content>
     </SplitView>
-</UserControl>
+</UserControl>

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

@@ -13,17 +13,16 @@ public partial class PaletteDemo : UserControl
     public PaletteDemo()
     {
         InitializeComponent();
-        
+        this.DataContext = new PaletteDemoViewModel();
     }
 
     protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        PaletteDemoViewModel? vm = new PaletteDemoViewModel();
+        PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
         await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            vm.InitializeResources();
+            vm?.InitializeResources();
         });
-        DataContext = vm;
     }
 }

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>
+</UserControl>

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

@@ -4,13 +4,13 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="600"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="SelectableTextBlock">
+                <Style Selector="Grid > SelectableTextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,76 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <Grid.Styles>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
+                        <Style Selector="SelectableTextBlock">
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
+                            <Setter Property="VerticalAlignment" Value="Center" />
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
+                            <Setter Property="Margin" Value="4" />
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
+                        </Style>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
+                    </Grid.Styles>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">-</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">Secondary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">Tertiary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">Quaternary</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Mark</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="9" Grid.Column="0">Underline</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="10" Grid.Column="0">Delete</SelectableTextBlock>
 
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="1">Text</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -104,53 +110,52 @@
                 Theme="{DynamicResource GroupBox}">
                 <Grid
                     VerticalAlignment="Top"
-                    Background="{Binding}"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    RowDefinitions="*,*,*,*,*,*,*">
-                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="1" Grid.Column="0">H1</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="0">H2</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="3" Grid.Column="0">H3</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="4" Grid.Column="0">H4</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="5" Grid.Column="0">H5</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">H6</SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 1
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 2
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 3
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 4
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleSelectableTextBlock}">
                         Header 5
                     </SelectableTextBlock>
                     <SelectableTextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleSelectableTextBlock}">

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/TextBlockDemo.axaml

@@ -10,7 +10,7 @@
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <StackPanel Orientation="Horizontal">
             <StackPanel.Styles>
-                <Style Selector="TextBlock">
+                <Style Selector="Grid > TextBlock">
                     <Setter Property="VerticalAlignment" Value="Center" />
                     <Setter Property="Margin" Value="4" />
                 </Style>
@@ -25,70 +25,70 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
+                    RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
-                    <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
-                    <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
-                    <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
-                    <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
-                    <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
-                    <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
+                    <TextBlock Grid.Row="9" Grid.Column="0">Underline</TextBlock>
-                    <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
+                    <TextBlock Grid.Row="10" Grid.Column="0">Delete</TextBlock>
 
-                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="1">Text</TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="Secondary">
                         Secondary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="Tertiary">
                         Tertiary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="Quaternary">
                         Quaternary
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="Success">
                         Success
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="Warning">
                         Warning
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="8"
+                        Grid.Row="7"
                         Grid.Column="1"
                         Classes="Danger">
                         Danger
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="9"
+                        Grid.Row="8"
                         Grid.Column="1"
                         Classes="Mark">
                         Default Mark
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="10"
+                        Grid.Row="9"
                         Grid.Column="1"
                         Classes="Underline">
                         Underline
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="11"
+                        Grid.Row="10"
                         Grid.Column="1"
                         Classes="Delete">
                         Delete
@@ -105,58 +105,57 @@
                 <Grid
                     VerticalAlignment="Top"
                     ColumnDefinitions="Auto, *"
-                    RowDefinitions="*,*,*,*,*,*,*,*">
+                    RowDefinitions="*,*,*,*,*,*,*">
-                    <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
+                    <TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
-                    <TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
+                    <TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
-                    <TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
-                    <TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
+                    <TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
-                    <TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
+                    <TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
+                    <TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
                     <TextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         Classes="H1"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 1
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         Classes="H2"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 2
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         Classes="H3"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 3
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Classes="H4"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 4
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.Column="1"
                         Classes="H5"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 5
                     </TextBlock>
                     <TextBlock
-                        Grid.Row="7"
+                        Grid.Row="6"
                         Grid.Column="1"
                         Classes="H6"
                         Theme="{StaticResource TitleTextBlock}">
                         Header 6
                     </TextBlock>
                 </Grid>
-
             </HeaderedContentControl>
         </StackPanel>
     </ScrollViewer>

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/Semi.Avalonia.Demo.csproj

@@ -14,7 +14,7 @@
         <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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>
+</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,29 @@
+<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="OnContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
+        </Setter>
+        <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/ViewModels/PaletteDemoViewModel.cs

@@ -2,25 +2,25 @@ using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class PaletteDemoViewModel: ObservableObject
+public class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
-    {
+    [
         "Red", "Pink", "Purple", "Violet", "Indigo",
         "Blue", "LightBlue", "Cyan", "Teal", "Green",
         "LightGreen", "Lime", "Yellow", "Amber", "Orange",
         "Grey"
-    };
+    ];
+
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
-    
+
     private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
@@ -28,26 +28,30 @@ public class PaletteDemoViewModel: ObservableObject
         get => _selectedColor;
         set => SetProperty(ref _selectedColor, value);
     }
-    
+
-    
+
     private ObservableCollection<ColorListViewModel>? _lightLists;
+
     public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
+
     private ObservableCollection<ColorListViewModel>? _darkLists;
+
     public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
     }
 
-    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
+    public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
+    public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary  = new Light.Palette();
+        _lightResourceDictionary = new Light.Palette();
         _darkResourceDictionary = new Dark.Palette();
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
@@ -56,18 +60,20 @@ public class PaletteDemoViewModel: ObservableObject
     {
         InitializePalette();
         InitializeFunctionalColors();
+        InitializeShadows();
     }
 
     private void InitializePalette()
     {
-        LightLists = new ObservableCollection<ColorListViewModel>();
+        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
             s.Initialize(_lightResourceDictionary, color, true);
             LightLists.Add(s);
         }
-        DarkLists = new ObservableCollection<ColorListViewModel>();
+
+        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -92,13 +98,19 @@ public class PaletteDemoViewModel: ObservableObject
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
         FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
+
+    private void InitializeShadows()
+    {
+        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+    }
+
     private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
     {
         SelectedColor = item;
     }
 }
 
-public class ColorListViewModel: ObservableObject
+public class ColorListViewModel : ObservableObject
 {
     private ObservableCollection<ColorItemViewModel>? _colors;
 
@@ -115,17 +127,18 @@ public class ColorListViewModel: ObservableObject
         get => _seriesName;
         set => SetProperty(ref _seriesName, value);
     }
-    
+
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
         if (resourceDictionary is null)
         {
             return;
         }
+
         SeriesName = color;
-        Color = new ObservableCollection<ColorItemViewModel>();
+        Color = [];
-        
+
-        for (int i = 0; i < 10; i++)
+        for (var i = 0; i < 10; i++)
         {
             var key = "Semi" + color + i;
             if (resourceDictionary.TryGetValue(key, out var value))
@@ -136,7 +149,7 @@ public class ColorListViewModel: ObservableObject
                     var item = new ColorItemViewModel(name, brush, key, light, i);
                     item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
-                } 
+                }
             }
         }
     }
@@ -144,15 +157,16 @@ public class ColorListViewModel: ObservableObject
 
 public class ColorItemViewModel : ObservableObject
 {
-
     private IBrush _brush = null!;
+
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
-    
+
     private IBrush _textBrush = null!;
+
     public IBrush TextBrush
     {
         get => _textBrush;
@@ -160,6 +174,7 @@ public class ColorItemViewModel : ObservableObject
     }
 
     private string _colorDisplayName = null!;
+
     public string ColorDisplayName
     {
         get => _colorDisplayName;
@@ -189,8 +204,9 @@ public class ColorItemViewModel : ObservableObject
         get => _hex;
         set => SetProperty(ref _hex, value);
     }
-    
+
-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
+    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+        int index)
     {
         ColorDisplayName = colorDisplayName;
         Brush = brush;
@@ -210,22 +226,22 @@ public class ColorItemViewModel : ObservableObject
 public class FunctionalColorGroupViewModel : ObservableObject
 {
     private string _title = null!;
+
     public string Title
     {
         get => _title;
         set => SetProperty(ref _title, value);
     }
 
-    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
-    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
+    public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
-        foreach (var token in tokens)
+        foreach (var (key, name) in tokens)
         {
-            string key = token.Item1;
-            string name = token.Item2;
             if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
@@ -245,125 +261,203 @@ public class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
+public class ShadowItemViewModel : ObservableObject
+{
+    private string _shadowDisplayName = null!;
+
+    public string ShadowDisplayName
+    {
+        get => _shadowDisplayName;
+        set => SetProperty(ref _shadowDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _boxShadowValue = null!;
+
+    public string BoxShadowValue
+    {
+        get => _boxShadowValue;
+        set => SetProperty(ref _boxShadowValue, value);
+    }
+
+    public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
+    {
+        ShadowDisplayName = shadowDisplayName;
+        ResourceKey = resourceKey;
+        BoxShadowValue = boxShadows.ToString();
+    }
+}
+
+public class ShadowGroupViewModel : ObservableObject
+{
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
+    public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
+    public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
+
+
+    public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary,
+        IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    {
+        Title = title;
+        foreach (var (key, name) in tokens)
+        {
+            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
+            {
+                if (lightValue is BoxShadows lightShadow)
+                {
+                    LightShadows.Add(new ShadowItemViewModel(name, lightShadow, key));
+                }
+            }
+
+            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
+            {
+                if (darkValue is BoxShadows darkShadow)
+                {
+                    DarkShadows.Add(new ShadowItemViewModel(name, darkShadow, key));
+                }
+            }
+        }
+    }
+}
+
 public static class ColorTokens
 {
     public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorPrimary", "Primary"),
+        new("SemiColorPrimary", "Primary"),
-        new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new ("SemiColorPrimaryActive", "Primary Active"),
+        new("SemiColorPrimaryActive", "Primary Active"),
-        new ("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new ("SemiColorPrimaryLight", "Primary Light"),
+        new("SemiColorPrimaryLight", "Primary Light"),
-        new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new ("SemiColorPrimaryLightActive", "Primary Light Active"),
+        new("SemiColorPrimaryLightActive", "Primary Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSecondary", "Secondary"),
+        new("SemiColorSecondary", "Secondary"),
-        new ("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new ("SemiColorSecondaryActive", "Secondary Active"),
+        new("SemiColorSecondaryActive", "Secondary Active"),
-        new ("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new ("SemiColorSecondaryLight", "Secondary Light"),
+        new("SemiColorSecondaryLight", "Secondary Light"),
-        new ("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new ("SemiColorSecondaryLightActive", "Secondary Light Active"),
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorTertiary", "Tertiary"),
+        new("SemiColorTertiary", "Tertiary"),
-        new ("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new ("SemiColorTertiaryActive", "Tertiary Active"),
+        new("SemiColorTertiaryActive", "Tertiary Active"),
-        new ("SemiColorTertiaryLight", "Tertiary Light"),
+        new("SemiColorTertiaryLight", "Tertiary Light"),
-        new ("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new ("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorInformation", "Information"),
+        new("SemiColorInformation", "Information"),
-        new ("SemiColorInformationPointerover", "Information Pointerover"),
+        new("SemiColorInformationPointerover", "Information Pointerover"),
-        new ("SemiColorInformationActive", "Information Active"),
+        new("SemiColorInformationActive", "Information Active"),
-        new ("SemiColorInformationDisabled", "Information Disabled"),
+        new("SemiColorInformationDisabled", "Information Disabled"),
-        new ("SemiColorInformationLight", "Information Light"),
+        new("SemiColorInformationLight", "Information Light"),
-        new ("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new ("SemiColorInformationLightActive", "Information Light Active"),
+        new("SemiColorInformationLightActive", "Information Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorSuccess", "Success"),
+        new("SemiColorSuccess", "Success"),
-        new ("SemiColorSuccessPointerover", "Success Pointerover"),
+        new("SemiColorSuccessPointerover", "Success Pointerover"),
-        new ("SemiColorSuccessActive", "Success Active"),
+        new("SemiColorSuccessActive", "Success Active"),
-        new ("SemiColorSuccessDisabled", "Success Disabled"),
+        new("SemiColorSuccessDisabled", "Success Disabled"),
-        new ("SemiColorSuccessLight", "Success Light"),
+        new("SemiColorSuccessLight", "Success Light"),
-        new ("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new ("SemiColorSuccessLightActive", "Success Light Active"),
+        new("SemiColorSuccessLightActive", "Success Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorWarning", "Warning"),
+        new("SemiColorWarning", "Warning"),
-        new ("SemiColorWarningPointerover", "Warning Pointerover"),
+        new("SemiColorWarningPointerover", "Warning Pointerover"),
-        new ("SemiColorWarningActive", "Warning Active"),
+        new("SemiColorWarningActive", "Warning Active"),
-        new ("SemiColorWarningLight", "Warning Light"),
+        new("SemiColorWarningLight", "Warning Light"),
-        new ("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new ("SemiColorWarningLightActive", "Warning Light Active"),
+        new("SemiColorWarningLightActive", "Warning Light Active"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDanger", "Danger"),
+        new("SemiColorDanger", "Danger"),
-        new ("SemiColorDangerPointerover", "Danger Pointerover"),
+        new("SemiColorDangerPointerover", "Danger Pointerover"),
-        new ("SemiColorDangerActive", "Danger Active"),
+        new("SemiColorDangerActive", "Danger Active"),
-        new ("SemiColorDangerLight", "Danger Light"),
+        new("SemiColorDangerLight", "Danger Light"),
-        new ("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new ("SemiColorDangerLightActive", "Danger Light Active"),
+        new("SemiColorDangerLightActive", "Danger Light Active"),
     };
 
     public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorText0", "Text 0"),
+        new("SemiColorText0", "Text 0"),
-        new ("SemiColorText1", "Text 1"),
+        new("SemiColorText1", "Text 1"),
-        new ("SemiColorText2", "Text 2"),
+        new("SemiColorText2", "Text 2"),
-        new ("SemiColorText3", "Text 3"),
+        new("SemiColorText3", "Text 3"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorLink", "Link"),
+        new("SemiColorLink", "Link"),
-        new ("SemiColorLinkPointerover", "Link Pointerover"),
+        new("SemiColorLinkPointerover", "Link Pointerover"),
-        new ("SemiColorLinkActive", "Link Active"),
+        new("SemiColorLinkActive", "Link Active"),
-        new ("SemiColorLinkVisited", "Link Visited"),
+        new("SemiColorLinkVisited", "Link Visited"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBackground0", "Background 0"),
+        new("SemiColorBackground0", "Background 0"),
-        new ("SemiColorBackground1", "Background 1"),
+        new("SemiColorBackground1", "Background 1"),
-        new ("SemiColorBackground2", "Background 2"),
+        new("SemiColorBackground2", "Background 2"),
-        new ("SemiColorBackground3", "Background 3"),
+        new("SemiColorBackground3", "Background 3"),
-        new ("SemiColorBackground4", "Background 4"),
+        new("SemiColorBackground4", "Background 4"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorFill0", "Fill 0"),
+        new("SemiColorFill0", "Fill 0"),
-        new ("SemiColorFill1", "Fill 1"),
+        new("SemiColorFill1", "Fill 1"),
-        new ("SemiColorFill2", "Fill 2"),
+        new("SemiColorFill2", "Fill 2"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorBorder", "Border"),
+        new("SemiColorBorder", "Border"),
     };
-    
+
     public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
     {
-        new ("SemiColorDisabledText", "Disabled Text"),
+        new("SemiColorDisabledText", "Disabled Text"),
-        new ("SemiColorDisabledBorder", "Disabled Border"),
+        new("SemiColorDisabledBorder", "Disabled Border"),
-        new ("SemiColorDisabledBackground", "Disabled Background"),
+        new("SemiColorDisabledBackground", "Disabled Background"),
-        new ("SemiColorDisabledFill", "Disabled Fill"),
+        new("SemiColorDisabledFill", "Disabled Fill"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
     };
-    
 }

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 IsVisible="False">
+                        <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 />
@@ -209,4 +238,4 @@
         </TabControl>
     </Grid>
 
-</UserControl>
+</UserControl>

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,63 @@ public partial class MainView : UserControl
         InitializeComponent();
         this.DataContext = new MainViewModel();
     }
+}
 
-    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+public partial class MainViewModel : ObservableObject
+{
+    public string DocumentationUrl => "https://docs.irihi.tech/semi";
+    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
+    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
+
+    public MainViewModel()
+    {
+        MenuItems = [];
+    }
+
+    [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)
     {
         var app = Application.Current;
         if (app is not null)
         {
-            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = obj as ThemeVariant;
-            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
         }
     }
 
-    private async void OpenRepository(object sender, RoutedEventArgs e)
+    [RelayCommand]
+    private static async Task OpenUrl(string url)
     {
-        var top = TopLevel.GetTopLevel(this);
+        var launcher = ResolveDefaultTopLevel()?.Launcher;
-        if (top is null) return;
+        if (launcher is not null)
-        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; } = new()
-    {
-        new ThemeItem("Light", ThemeVariant.Light),
-        new ThemeItem("Dark", ThemeVariant.Dark),
-        new ThemeItem("Aquatic", SemiTheme.Aquatic),
-        new ThemeItem("Desert", SemiTheme.Desert),
-        new ThemeItem("Dust", SemiTheme.Dust),
-        new ThemeItem("NightSky", SemiTheme.NightSky),
-    };
-    
-    [ObservableProperty] private ThemeItem? _selectedTheme;
-    
-    partial void OnSelectedThemeChanged(ThemeItem? oldValue, ThemeItem? newValue)
-    {
-        if (newValue is null) return;
-        var app = Application.Current;
-        if (app is not null)
         {
-            app.RequestedThemeVariant = newValue.Theme;
+            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; }
 }

demo/Semi.Avalonia.TreeDataGrid.Demo/Program.cs

@@ -1,5 +1,6 @@
 using Avalonia;
 using System;
+using Avalonia.Media;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo;
 
@@ -10,12 +11,21 @@ class Program
     // yet and stuff might break.
     [STAThread]
     public static void Main(string[] args) => BuildAvaloniaApp()
+        .With(new FontManagerOptions
+        {
+            FontFallbacks =
+            [
+                new FontFallback
+                {
+                    FontFamily = new FontFamily("Microsoft YaHei")
+                }
+            ]
+        })
         .StartWithClassicDesktopLifetime(args);
 
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
         => AppBuilder.Configure<App>()
             .UsePlatformDetect()
-            .WithInterFont()
             .LogToTrace();
 }

demo/Semi.Avalonia.TreeDataGrid.Demo/Semi.Avalonia.TreeDataGrid.Demo.csproj

@@ -1,28 +1,29 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
         <OutputType>WinExe</OutputType>
-        <TargetFramework>net6.0</TargetFramework>
+        <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+        <LangVersion>latest</LangVersion>
         <ApplicationManifest>app.manifest</ApplicationManifest>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <!-- Uncomment below to enable Native AOT compilation-->
+        <!--<PublishAot>true</PublishAot>-->
+        <!--<IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>-->
     </PropertyGroup>
 
     <Import Project="../Directory.Build.props" />
-    
+
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Fonts.Inter" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="$(CommunityToolkitVersion)" />
     </ItemGroup>
 
-
     <ItemGroup>
-      <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia.TreeDataGrid\Semi.Avalonia.TreeDataGrid.csproj" />
-      <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj" />
     </ItemGroup>
 </Project>

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -5,6 +5,7 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
@@ -51,7 +52,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -81,7 +81,7 @@
                                 <!--  Backgrounds  -->
                                 <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                                 <Border
-                                    x:Name="ContentBackgroundBorder"
+                                    Name="ContentBackgroundBorder"
                                     Grid.Row="0"
                                     Grid.RowSpan="2"
                                     Height="{TemplateBinding Height}"
@@ -93,7 +93,7 @@
                                     CornerRadius="{TemplateBinding CornerRadius}" />
 
                                 <TabControl
-                                    x:Name="PART_TabControl"
+                                    Name="PART_TabControl"
                                     Grid.Row="0"
                                     Padding="0"
                                     VerticalAlignment="Stretch"
@@ -130,7 +130,7 @@
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumThirdComponentSlider"
+                                                Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
                                                 HorizontalAlignment="Center"
@@ -144,7 +144,7 @@
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <primitives:ColorSpectrum
-                                                x:Name="ColorSpectrum"
+                                                Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -158,7 +158,7 @@
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
                                             <primitives:ColorSlider
-                                                x:Name="ColorSpectrumAlphaSlider"
+                                                Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
                                                 HorizontalAlignment="Center"
@@ -282,7 +282,7 @@
                                                     CornerRadius="3">
                                                     <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
-                                                            x:Name="RgbRadioButton"
+                                                            Name="RgbRadioButton"
                                                             Grid.Column="0"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -294,7 +294,7 @@
                                                                                         Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
-                                                            x:Name="HsvRadioButton"
+                                                            Name="HsvRadioButton"
                                                             Grid.Column="1"
                                                             HorizontalContentAlignment="Center"
                                                             VerticalContentAlignment="Center"
@@ -308,7 +308,7 @@
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
-                                                    x:Name="PART_HexTextBox"
+                                                    Name="PART_HexTextBox"
                                                     Grid.Column="2"
                                                     Height="32"
                                                     HorizontalAlignment="Stretch"
@@ -320,7 +320,7 @@
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
                                             <NumericUpDown
-                                                x:Name="Component1NumericUpDown"
+                                                Name="Component1NumericUpDown"
                                                 Grid.Row="2"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -335,7 +335,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component1Slider"
+                                                Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -351,7 +351,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 2 RGB:Green HSV:Saturation  -->
                                             <NumericUpDown
-                                                x:Name="Component2NumericUpDown"
+                                                Name="Component2NumericUpDown"
                                                 Grid.Row="3"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -366,7 +366,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component2Slider"
+                                                Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -382,7 +382,7 @@
                                                 TickFrequency="1" />
                                             <!--  Component 3 RGB:Blue HSV:Value  -->
                                             <NumericUpDown
-                                                x:Name="Component3NumericUpDown"
+                                                Name="Component3NumericUpDown"
                                                 Grid.Row="4"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -397,7 +397,7 @@
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
                                             <primitives:ColorSlider
-                                                x:Name="Component3Slider"
+                                                Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -413,7 +413,7 @@
                                                 TickFrequency="1" />
                                             <!--  Alpha Component  -->
                                             <NumericUpDown
-                                                x:Name="AlphaComponentNumericUpDown"
+                                                Name="AlphaComponentNumericUpDown"
                                                 Grid.Row="5"
                                                 Grid.Column="0"
                                                 Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -435,7 +435,7 @@
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
                                             <primitives:ColorSlider
-                                                x:Name="AlphaComponentSlider"
+                                                Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
@@ -473,6 +473,10 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
+        
+        <Style Selector="^ /template/ DropDownButton">
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -523,7 +527,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -557,7 +560,7 @@
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
                                     <primitives:ColorSpectrum
-                                        x:Name="ColorSpectrum"
+                                        Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
@@ -571,7 +574,7 @@
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -583,7 +586,7 @@
                                     Orientation="Horizontal" />
 
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -610,32 +613,32 @@
                                         Height="20"
                                         CornerRadius="4" />
                                     <Panel
-                                        x:Name="PART_TextBoxPanel"
+                                        Name="PART_TextBoxPanel"
                                         Width="106"
                                         Margin="4 0 0 0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center">
                                         <TextBox
-                                            x:Name="PART_HexTextBox"
+                                            Name="PART_HexTextBox"
                                             Classes="Small"
                                             InnerLeftContent="#"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                             MaxLength="8" />
                                         <TextBox
-                                            x:Name="PART_RgbaTextBox"
+                                            Name="PART_RgbaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
-                                            x:Name="PART_HsvaTextBox"
+                                            Name="PART_HsvaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
                                             Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
-                                        x:Name="AlphaComponentNumericUpDown"
+                                        Name="AlphaComponentNumericUpDown"
                                         Width="70"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Center"
@@ -650,7 +653,7 @@
                                         IsVisible="{TemplateBinding IsAlphaVisible}"
                                         Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                                     <ComboBox
-                                        x:Name="ColorModelComboBox"
+                                        Name="ColorModelComboBox"
                                         Width="80"
                                         VerticalAlignment="Center"
                                         Classes="Small"

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -4,6 +4,7 @@
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <pc:AccentColorConverter x:Key="AccentColorConverter" />
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight" />
@@ -30,7 +31,7 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentDecrement2Border"
+                                Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -39,7 +40,7 @@
                                                                Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
-                                x:Name="PART_AccentDecrement1Border"
+                                Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
@@ -60,14 +61,14 @@
                                 VerticalAlignment="Stretch"
                                 Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" />
                             <Border
-                                x:Name="PART_AccentIncrement1Border"
+                                Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},
                                                              ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
-                                x:Name="PART_AccentIncrement2Border"
+                                Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
                                                              Converter={StaticResource AccentColorConverter},

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -3,6 +3,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -4,6 +4,7 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
@@ -15,16 +16,16 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        x:Name="PART_LayoutRoot"
+                        Name="PART_LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Panel
-                            x:Name="PART_SizingPanel"
+                            Name="PART_SizingPanel"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             ClipToBounds="True">
                             <Rectangle
-                                x:Name="PART_SpectrumRectangle"
+                                Name="PART_SpectrumRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -36,7 +37,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
-                                x:Name="PART_SpectrumOverlayRectangle"
+                                Name="PART_SpectrumOverlayRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -48,7 +49,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumEllipse"
+                                Name="PART_SpectrumEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -56,7 +57,7 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Ellipse
-                                x:Name="PART_SpectrumOverlayEllipse"
+                                Name="PART_SpectrumOverlayEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -64,24 +65,24 @@
                                                             Converter={StaticResource EnumToBoolConverter},
                                                             ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
                             <Canvas
-                                x:Name="PART_InputTarget"
+                                Name="PART_InputTarget"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Background="Transparent">
                                 <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
                                 <Panel
-                                    x:Name="PART_SelectionEllipsePanel"
+                                    Name="PART_SelectionEllipsePanel"
                                     ToolTip.Placement="Top"
                                     ToolTip.VerticalOffset="-10">
                                     <Ellipse
-                                        x:Name="FocusEllipse"
+                                        Name="FocusEllipse"
                                         Margin="-2"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
                                         StrokeThickness="2" />
                                     <Ellipse
-                                        x:Name="SelectionEllipse"
+                                        Name="SelectionEllipse"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         IsHitTestVisible="False"
@@ -92,7 +93,7 @@
                                 </Panel>
                             </Canvas>
                             <Rectangle
-                                x:Name="BorderRectangle"
+                                Name="BorderRectangle"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"
@@ -104,7 +105,7 @@
                                 RadiusY="{TemplateBinding CornerRadius,
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Ellipse
-                                x:Name="BorderEllipse"
+                                Name="BorderEllipse"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsHitTestVisible="False"

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -90,7 +90,7 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <Rectangle
-                        x:Name="BorderRectangle"
+                        Name="BorderRectangle"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
@@ -124,7 +124,7 @@
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -174,7 +174,7 @@
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
                     <Border
-                        x:Name="ContentBackgroundBorder"
+                        Name="ContentBackgroundBorder"
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Height="{TemplateBinding Height}"
@@ -186,7 +186,7 @@
                         CornerRadius="{TemplateBinding CornerRadius}" />
 
                     <TabControl
-                        x:Name="PART_TabControl"
+                        Name="PART_TabControl"
                         Grid.Row="0"
                         Padding="0"
                         VerticalAlignment="Stretch"
@@ -223,7 +223,7 @@
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
                                     HorizontalAlignment="Center"
@@ -237,7 +237,7 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <primitives:ColorSpectrum
-                                    x:Name="ColorSpectrum"
+                                    Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -251,7 +251,7 @@
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
                                 <primitives:ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -347,7 +347,7 @@
                                         CornerRadius="3">
                                         <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                x:Name="RgbRadioButton"
+                                                Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -359,7 +359,7 @@
                                                                             Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                x:Name="HsvRadioButton"
+                                                Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
@@ -373,7 +373,7 @@
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        x:Name="PART_HexTextBox"
+                                        Name="PART_HexTextBox"
                                         Grid.Column="2"
                                         Height="32"
                                         HorizontalAlignment="Stretch"
@@ -385,7 +385,7 @@
                                 <!--  Color component editing controls  -->
                                 <!--  Component 1 RGB:Red HSV:Hue  -->
                                 <NumericUpDown
-                                    x:Name="Component1NumericUpDown"
+                                    Name="Component1NumericUpDown"
                                     Grid.Row="2"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -400,7 +400,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component1Slider"
+                                    Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -416,7 +416,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 2 RGB:Green HSV:Saturation  -->
                                 <NumericUpDown
-                                    x:Name="Component2NumericUpDown"
+                                    Name="Component2NumericUpDown"
                                     Grid.Row="3"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -431,7 +431,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component2Slider"
+                                    Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -447,7 +447,7 @@
                                     TickFrequency="1" />
                                 <!--  Component 3 RGB:Blue HSV:Value  -->
                                 <NumericUpDown
-                                    x:Name="Component3NumericUpDown"
+                                    Name="Component3NumericUpDown"
                                     Grid.Row="4"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -462,7 +462,7 @@
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
                                 <primitives:ColorSlider
-                                    x:Name="Component3Slider"
+                                    Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -478,7 +478,7 @@
                                     TickFrequency="1" />
                                 <!--  Alpha Component  -->
                                 <NumericUpDown
-                                    x:Name="AlphaComponentNumericUpDown"
+                                    Name="AlphaComponentNumericUpDown"
                                     Grid.Row="5"
                                     Grid.Column="0"
                                     Width="{DynamicResource ColorViewNumericUpDownWidth}"
@@ -500,7 +500,7 @@
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
                                 <primitives:ColorSlider
-                                    x:Name="AlphaComponentSlider"
+                                    Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
@@ -584,7 +584,7 @@
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
                         <primitives:ColorSpectrum
-                            x:Name="ColorSpectrum"
+                            Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
@@ -598,7 +598,7 @@
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
                     <primitives:ColorSlider
-                        x:Name="ColorSpectrumThirdComponentSlider"
+                        Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -610,7 +610,7 @@
                         Orientation="Horizontal" />
 
                     <primitives:ColorSlider
-                        x:Name="ColorSpectrumAlphaSlider"
+                        Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -637,32 +637,32 @@
                             Height="20"
                             CornerRadius="4" />
                         <Panel
-                            x:Name="PART_TextBoxPanel"
+                            Name="PART_TextBoxPanel"
                             Width="106"
                             Margin="4 0 0 0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center">
                             <TextBox
-                                x:Name="PART_HexTextBox"
+                                Name="PART_HexTextBox"
                                 Classes="Small"
                                 InnerLeftContent="#"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
                             <TextBox
-                                x:Name="PART_RgbaTextBox"
+                                Name="PART_RgbaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
-                                x:Name="PART_HsvaTextBox"
+                                Name="PART_HsvaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
                                 Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
-                            x:Name="AlphaComponentNumericUpDown"
+                            Name="AlphaComponentNumericUpDown"
                             Width="70"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
@@ -677,7 +677,7 @@
                             IsVisible="{TemplateBinding IsAlphaVisible}"
                             Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                         <ComboBox
-                            x:Name="ColorModelComboBox"
+                            Name="ColorModelComboBox"
                             Width="80"
                             VerticalAlignment="Center"
                             Classes="Small"

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -17,5 +17,5 @@
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -3,6 +3,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="using:Avalonia.Collections"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -34,14 +35,14 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
+                    <Grid Name="PART_CellRoot" ColumnDefinitions="*,Auto">
                         <Rectangle
-                            x:Name="CurrencyVisual"
+                            Name="CurrencyVisual"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Fill="Transparent"
@@ -50,7 +51,7 @@
                             Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
                             StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -74,7 +75,7 @@
                             Foreground="{TemplateBinding Foreground}" />
 
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.Column="0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -116,7 +117,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridColumnHeader">
                 <Border
-                    x:Name="HeaderBorder"
+                    Name="HeaderBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -152,7 +153,7 @@
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
                         <Panel
-                            x:Name="FocusVisual"
+                            Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
@@ -203,7 +204,7 @@
         TargetType="DataGridColumnHeader">
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
+                <Grid Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
                     <Border
                         Grid.RowSpan="2"
                         BorderBrush="{DynamicResource DataGridLineBrush}"
@@ -227,7 +228,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid
-                    x:Name="PART_Root"
+                    Name="PART_Root"
                     ColumnDefinitions="Auto,*"
                     RowDefinitions="*,*,Auto">
                     <Border
@@ -237,18 +238,18 @@
                         BorderThickness="0,0,1,0">
                         <Grid Background="{TemplateBinding Background}">
                             <Rectangle
-                                x:Name="RowInvalidVisualElement"
+                                Name="RowInvalidVisualElement"
                                 Fill="{DynamicResource DataGridCellErrorBrush}"
                                 Opacity="0"
                                 Stretch="Fill" />
                             <Rectangle
-                                x:Name="BackgroundRectangle"
+                                Name="BackgroundRectangle"
                                 Fill="{DynamicResource DataGridRowBackground}"
                                 Stretch="Fill" />
                         </Grid>
                     </Border>
                     <Rectangle
-                        x:Name="HorizontalSeparator"
+                        Name="HorizontalSeparator"
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
@@ -277,7 +278,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGridRow">
                 <Border
-                    x:Name="RowBorder"
+                    Name="RowBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -295,7 +296,7 @@
                             Background="{DynamicResource DataGridRowBackground}"
                             CornerRadius="3" />
                         <Rectangle
-                            x:Name="InvalidVisualElement"
+                            Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
                             Fill="{DynamicResource DataGridRowErrorBackground}"
                             Opacity="0" />
@@ -406,10 +407,11 @@
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
-                        <TextBlock
+                        <ContentControl
+                            Name="PART_GroupKeyContentControl"
                             Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
-                            Text="{Binding Key}" />
+                            Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
                             Margin="4,0,0,0"
@@ -418,7 +420,7 @@
                     </StackPanel>
 
                     <Rectangle
-                        x:Name="CurrencyVisual"
+                        Name="CurrencyVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         HorizontalAlignment="Stretch"
@@ -429,7 +431,7 @@
                         Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
                         StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
                     <Panel
-                        x:Name="FocusVisual"
+                        Name="FocusVisual"
                         Grid.Row="0"
                         Grid.Column="0"
                         IsHitTestVisible="False"
@@ -452,7 +454,7 @@
                         DataGridFrozenGrid.IsFrozen="True" />
 
                     <Rectangle
-                        x:Name="PART_BottomGridLine"
+                        Name="PART_BottomGridLine"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="5"
@@ -481,7 +483,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DataGrid">
                 <Border
-                    x:Name="DataGridBorder"
+                    Name="DataGridBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -543,7 +545,7 @@
                                 Orientation="Horizontal" />
                         </Grid>
                         <Border
-                            x:Name="PART_DisabledVisualElement"
+                            Name="PART_DisabledVisualElement"
                             Grid.Row="0"
                             Grid.RowSpan="4"
                             Grid.Column="0"

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />

src/Semi.Avalonia.TreeDataGrid/Index.axaml

@@ -1,9 +1,10 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.TreeDataGrid/Light.axaml" />
-                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.TreeDataGrid/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml" />

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />

src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,14 +4,14 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <PackageReleaseNotes>Update to Avalonia 11.1-rc1</PackageReleaseNotes>
+        <Version>11.0.10.1</Version>
+        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
         <PackageIcon>irihi.png</PackageIcon>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.0.0</AvaloniaVersion>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -19,7 +19,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.TreeDataGrid" Version="11.0.10"/>
         <None Include="irihi.png" Pack="true" PackagePath=""/>
     </ItemGroup>
 

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
     <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">
         M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z
     </StreamGeometry>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
+    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />
@@ -11,7 +12,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="TreeDataGrid">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -23,7 +24,7 @@
                             HorizontalScrollBarVisibility="Hidden"
                             IsVisible="{TemplateBinding ShowColumnHeaders}"
                             VerticalScrollBarVisibility="Disabled">
-                            <Border x:Name="ColumnHeadersPresenterBorder">
+                            <Border Name="ColumnHeadersPresenterBorder">
                                 <TreeDataGridColumnHeadersPresenter
                                     Name="PART_ColumnHeadersPresenter"
                                     ElementFactory="{TemplateBinding ElementFactory}"
@@ -173,7 +174,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -205,7 +206,7 @@
                     VerticalAlignment="Center"
                     Background="Transparent">
                     <PathIcon
-                        x:Name="ChevronPath"
+                        Name="ChevronPath"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
@@ -222,7 +223,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Indent,
                                               Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
@@ -253,7 +254,7 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    x:Name="CellBorder"
+                    Name="CellBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -275,7 +276,7 @@
             <Setter Property="Template">
                 <ControlTemplate>
                     <Border
-                        x:Name="CellBorder"
+                        Name="CellBorder"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -5,9 +5,17 @@
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>
-                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                <Border Theme="{DynamicResource AdornerLayerBorder}" />
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
             </FocusAdornerTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="AdornerLayerBorder" TargetType="Border">
+        <Setter Property="BorderThickness" Value="{DynamicResource AdornerLayerBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource AdornerLayerCornerRadius}" />
+        <Style Selector="^.Solid">
+            <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerSolidBorderBrush}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -9,9 +9,9 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="AutoCompleteBox.VerticalAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
+        <Setter Property="AutoCompleteBox.MinHeight" Value="{DynamicResource AutoCompleteBoxDefaultHeight}" />
-        <Setter Property="MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
+        <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
                 <DataValidationErrors>
@@ -27,12 +27,13 @@
                             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}"
@@ -65,24 +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}">
-                                <ListBox
+                                    <ListBox
-                                    Name="PART_SelectingItemsControl"
+                                        Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
+                                        Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
                             </Border>
                         </Popup>
                     </Panel>

src/Semi.Avalonia/Controls/Border.axaml

@@ -17,12 +17,12 @@
     </Design.PreviewWith>
 
     <ControlTheme x:Key="CardBorder" TargetType="Border">
-        <Setter Property="Border.Padding" Value="{DynamicResource ThicknessCardPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource ThicknessCardPadding}" />
-        <Setter Property="Border.BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
-        <Setter Property="Border.CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
-        <Setter Property="Border.Background" Value="{DynamicResource BorderCardBackground}" />
+        <Setter Property="Background" Value="{DynamicResource BorderCardBackground}" />
-        <Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
-        <Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
+        <Setter Property="Margin" Value="{DynamicResource ThicknessCardMargin}" />
         <Style Selector="^.Shadow">
             <Setter Property="BoxShadow" Value="{DynamicResource BorderCardBoxShadow}" />
         </Style>

src/Semi.Avalonia/Controls/Button.axaml

@@ -27,7 +27,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
@@ -102,6 +102,12 @@
         x:Key="SolidButton"
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -113,7 +119,6 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
@@ -129,7 +134,6 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
@@ -211,9 +215,9 @@
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -254,30 +258,32 @@
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="Background" Value="Transparent" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 
     </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

@@ -8,12 +8,12 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
-        <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
+        <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
-        <Setter Property="Template">
+        <Setter Property="RepeatButton.Template">
             <ControlTemplate>
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -38,10 +38,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
-        <Setter Property="MinWidth" Value="300" />
+        <Setter Property="ButtonSpinner.MinWidth" Value="300" />
-        <Setter Property="Template">
+        <Setter Property="ButtonSpinner.Template">
             <ControlTemplate TargetType="ButtonSpinner">
                 <Grid ColumnDefinitions="Auto, *, Auto">
                     <Border
@@ -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>
@@ -97,8 +97,5 @@
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
-        <Style Selector="^:pointerover /template/ Border#ButtonGroup">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}"/>
-        </Style>
     </ControlTheme>
 </ResourceDictionary>

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}" />
@@ -20,11 +25,11 @@
             <ControlTemplate TargetType="CalendarDatePicker">
                 <DataValidationErrors>
                     <Panel
-                        x:Name="LayoutRoot"
+                        Name="LayoutRoot"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch">
                         <Border
-                            x:Name="Background"
+                            Name="Background"
                             BackgroundSizing="{TemplateBinding BackgroundSizing}"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -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>
@@ -139,7 +141,6 @@
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#Background">
                 <Setter Property="Background" Value="{DynamicResource CalendarDatePickerPointeroverBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerPointeroverBorderBrush}" />
             </Style>
         </Style>
 

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}" />
@@ -43,31 +46,28 @@
                     Orientation="Horizontal"
                     Spacing="2"
                     TextElement.FontSize="10">
-                    <Button x:Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
+                    <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 x:Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
+                    <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 x:Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
+                    <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>
                     <Button
-                        x:Name="PART_CloseButton"
+                        Name="PART_CloseButton"
                         Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
                         BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
                         Theme="{StaticResource CaptionButton}">
@@ -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>
@@ -12,6 +69,7 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BringIntoViewOnFocusChange="True"
                     HorizontalScrollBarVisibility="Hidden"
                     VerticalScrollBarVisibility="Hidden">
                     <ItemsPresenter
@@ -24,125 +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="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="Margin" Value="4 0"/>
-        <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="ListBoxItem.Template">
+        <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="ListBoxItem.Cursor" Value="Hand" />
+                  TargetType="ListBoxItem">
-        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Margin" Value="2 0"/>
-        <Setter Property="ListBoxItem.Template">
+        <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>
-                    </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="ListBoxItem.Cursor" Value="Hand" />
+                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
-        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+                  TargetType="ListBoxItem">
-        <Setter Property="ListBoxItem.Template">
+        <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}"
+                    Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                                Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
+                    Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                            <Rectangle
+                    VerticalAlignment="Bottom"
-                                Name="Container"
+                    Fill="{TemplateBinding Foreground}">
-                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                    <Rectangle.Transitions>
-                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                        <Transitions>
-                                VerticalAlignment="Bottom"
+                            <DoubleTransition Property="Height" Duration="0:0:0.2" />
-                                Fill="{TemplateBinding Background}">
+                        </Transitions>
-                                <Rectangle.Transitions>
+                    </Rectangle.Transitions>
-                                    <Transitions>
+                </Rectangle>
-                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
-                                    </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="Button.Cursor" Value="Hand" />
+        <Setter Property="Width" Value="32" />
-        <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Height" Value="32" />
-        <Setter Property="Button.Template">
+        <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">
@@ -165,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" />
@@ -185,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

@@ -26,7 +26,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -37,7 +37,7 @@
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -46,13 +46,14 @@
                                 CornerRadius="{TemplateBinding CornerRadius}"
                                 UseLayoutRounding="False" />
                             <PathIcon
-                                x:Name="CheckGlyph"
+                                Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
                         </Panel>
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
                             Margin="{DynamicResource CheckBoxContentMargin}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -196,7 +197,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -207,7 +208,7 @@
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -216,7 +217,8 @@
                                 CornerRadius="{TemplateBinding CornerRadius}"
                                 UseLayoutRounding="False" />
                             <PathIcon
-                                x:Name="CheckGlyph"
+                                Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
@@ -343,7 +345,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -358,7 +360,7 @@
                             VerticalAlignment="Top"
                             Margin="{DynamicResource CheckBoxBoxMargin}">
                             <Border
-                                x:Name="NormalRectangle"
+                                Name="NormalRectangle"
                                 Width="{DynamicResource CheckBoxBoxWidth}"
                                 Height="{DynamicResource CheckBoxBoxHeight}"
                                 Background="{DynamicResource CheckBoxDefaultBackground}"
@@ -367,14 +369,15 @@
                                 CornerRadius="{DynamicResource CheckBoxBoxCornerRadius}"
                                 UseLayoutRounding="False" />
                             <PathIcon
-                                x:Name="CheckGlyph"
+                                Name="CheckGlyph"
+                                Theme="{DynamicResource InnerPathIcon}"
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
                         </Panel>
 
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
                             Margin="{DynamicResource CheckBoxContentMargin}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -546,7 +549,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -30,11 +30,10 @@
     <ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
         <Setter Property="Padding" Value="{DynamicResource ComboBoxSelectorDefaultPadding}" />
         <Setter Property="FocusAdorner" Value="{x:Null}" />
-        <Setter Property="MaxDropDownHeight" Value="504" />
+        <Setter Property="MaxDropDownHeight" Value="{DynamicResource ComboBoxPopupMaxDropDownHeight}" />
         <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorBorderBrush}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxSelectorThickness}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
@@ -49,7 +48,7 @@
                 <DataValidationErrors>
                     <Grid ColumnDefinitions="*, Auto">
                         <Border
-                            x:Name="Background"
+                            Name="Background"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Background="{TemplateBinding Background}"
@@ -59,19 +58,18 @@
                             CornerRadius="{TemplateBinding CornerRadius}"
                             MinHeight="{TemplateBinding MinHeight}" />
                         <TextBlock
-                            x:Name="PlaceholderTextBlock"
+                            Name="PlaceholderTextBlock"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             TextTrimming="CharacterEllipsis"
                             Foreground="{TemplateBinding Foreground}"
-                            IsVisible="{TemplateBinding SelectionBoxItem,
+                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
-                                                        Converter={x:Static ObjectConverters.IsNull}}"
                             Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
-                            x:Name="ContentPresenter"
+                            Name="ContentPresenter"
                             Grid.Column="0"
                             Margin="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -81,27 +79,18 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
-                            Margin="0,0,8,0"
+                            Theme="{DynamicResource InnerIconButton}"
+                            Width="{DynamicResource ComboBoxIconWidth}"
                             Command="{Binding $parent[ComboBox].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
                             Focusable="False"
-                            IsVisible="False"
-                            Theme="{DynamicResource InnerIconButton}" />
-                        <Border
-                            x:Name="DropDownOverlay"
-                            Grid.Column="1"
-                            Width="30"
-                            Margin="0,1,1,1"
-                            HorizontalAlignment="Right"
-                            Background="Transparent"
                             IsVisible="False" />
 
                         <PathIcon
-                            x:Name="DropDownGlyph"
+                            Name="DropDownGlyph"
                             Grid.Column="1"
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
+                            Width="{DynamicResource ComboBoxIconWidth}"
-                            Margin="0,0,12,0"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"
@@ -110,31 +99,30 @@
                         <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}"
+                            IsOpen="{TemplateBinding IsDropDownOpen,
+                                                     Mode=TwoWay}"
                             PlacementTarget="Background"
                             WindowManagerAddShadowHint="False">
                             <Border
-                                x:Name="PopupBorder"
+                                Name="PopupBorder"
-                                Margin="0,4"
                                 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}"
-                                ClipToBounds="True"
+                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
-                                CornerRadius="6">
                                 <ScrollViewer
                                     HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
+                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                     VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
-                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                         ItemsPanel="{TemplateBinding ItemsPanel}" />
                                 </ScrollViewer>
                             </Border>
@@ -194,7 +182,6 @@
         <!--  Disabled State  -->
         <Style Selector="^:disabled">
             <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorDisabledBorderBrush}" />
             <Style Selector="^ /template/ ContentControl#ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForeground}" />
             </Style>
@@ -300,12 +287,10 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPointeroverForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemFocusForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemFocusBackground}" />
         </Style>
 
@@ -314,12 +299,10 @@
         </Style>
 
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ComboBoxItemPressedBackground}" />
         </Style>
 
         <Style Selector="^:selected">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxItemSelectedForeground}" />
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedBackground}" />
             </Style>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -3,17 +3,17 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
-        <Setter Property="ContextMenu.Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutBackground}" />
-        <Setter Property="ContextMenu.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
-        <Setter Property="ContextMenu.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
-        <Setter Property="ContextMenu.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
-        <Setter Property="ContextMenu.MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
-        <Setter Property="ContextMenu.MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
+        <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
-        <Setter Property="ContextMenu.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="ContextMenu.HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="TextBlock.FontWeight" Value="Normal" />
+        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="ContextMenu.WindowManagerAddShadowHint" Value="False" />
+        <Setter Property="WindowManagerAddShadowHint" Value="False" />
-        <Setter Property="ContextMenu.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="ContextMenu">
                 <Border
                     MinHeight="{TemplateBinding MinHeight}"

src/Semi.Avalonia/Controls/DataValidationErrors.axaml

@@ -2,12 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:collections="clr-namespace:System.Collections;assembly=netstandard">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
         <Setter Property="Template">
             <ControlTemplate TargetType="DataValidationErrors">
                 <DockPanel LastChildFill="True">
                     <ContentControl
-                        x:Name="InlineDataValidationContentControl"
+                        Name="InlineDataValidationContentControl"
                         Margin="0,4,0,0"
                         Content="{Binding (DataValidationErrors.Errors)}"
                         ContentTemplate="{TemplateBinding ErrorTemplate}"

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,14 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
         <Setter Property="MinWidth" Value="296" />
         <Setter Property="MaxHeight" Value="300" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
-        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePickerPresenter">
@@ -23,97 +22,103 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                    <Border
-                        <Grid Name="PART_PickerContainer">
+                        CornerRadius="{TemplateBinding CornerRadius}"
-                            <Grid.Styles>
+                        ClipToBounds="True">
-                                <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
+                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                            <Grid Name="PART_PickerContainer">
-                                </Style>
+                                <Grid.Styles>
-                            </Grid.Styles>
+                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
-                            <!--  Column Definitions set in code, ignore here  -->
+                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                            <Panel Name="PART_MonthHost">
+                                    </Style>
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                </Grid.Styles>
-                                    <DateTimePickerPanel
+                                <!--  Column Definitions set in code, ignore here  -->
-                                        Name="PART_MonthSelector"
+                                <Panel Name="PART_MonthHost">
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                        PanelType="Month"
+                                        <DateTimePickerPanel
-                                        ShouldLoop="True" />
+                                            Name="PART_MonthSelector"
-                                </ScrollViewer>
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                            PanelType="Month"
-                                <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                            ShouldLoop="True" />
-                            </Panel>
+                                    </ScrollViewer>
-                            <Panel Name="PART_DayHost">
+                                    <RepeatButton Name="PART_MonthUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <RepeatButton Name="PART_MonthDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                    <DateTimePickerPanel
+                                </Panel>
-                                        Name="PART_DaySelector"
+                                <Panel Name="PART_DayHost">
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                        PanelType="Day"
+                                        <DateTimePickerPanel
-                                        ShouldLoop="True" />
+                                            Name="PART_DaySelector"
-                                </ScrollViewer>
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                            PanelType="Day"
-                                <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                            ShouldLoop="True" />
-                            </Panel>
+                                    </ScrollViewer>
-                            <Panel Name="PART_YearHost">
+                                    <RepeatButton Name="PART_DayUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                    <RepeatButton Name="PART_DayDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                    <DateTimePickerPanel
+                                </Panel>
-                                        Name="PART_YearSelector"
+                                <Panel Name="PART_YearHost">
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                        PanelType="Year"
+                                        <DateTimePickerPanel
-                                        ShouldLoop="False" />
+                                            Name="PART_YearSelector"
-                                </ScrollViewer>
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                            PanelType="Year"
-                                <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                            ShouldLoop="False" />
-                            </Panel>
+                                    </ScrollViewer>
-                            <Rectangle
+                                    <RepeatButton Name="PART_YearUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
-                                Name="PART_FirstSpacer"
+                                    <RepeatButton Name="PART_YearDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
-                                Grid.Column="1"
+                                </Panel>
-                                Width="1"
+                                <Rectangle
-                                Margin="0,4"
+                                    Name="PART_FirstSpacer"
-                                HorizontalAlignment="Center"
+                                    Grid.Column="1"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Width="1"
-                            <Rectangle
+                                    HorizontalAlignment="Center"
-                                Name="PART_SecondSpacer"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                Grid.Column="3"
+                                <Rectangle
-                                Width="1"
+                                    Name="PART_SecondSpacer"
-                                Margin="0,4"
+                                    Grid.Column="3"
-                                HorizontalAlignment="Center"
+                                    Width="1"
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    HorizontalAlignment="Center"
-                        </Grid>
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
 
-                        <Grid
+                            <Grid
-                            Name="AcceptDismissGrid"
+                                Name="AcceptDismissGrid"
-                            Grid.Row="1"
+                                Grid.Row="1"
-                            ColumnDefinitions="*,*">
+                                ColumnDefinitions="*,Auto,*">
-                            <Button
+                                <Button
-                                Name="PART_AcceptButton"
+                                    Name="PART_AcceptButton"
-                                Grid.Column="0"
+                                    Grid.Column="0"
-                                HorizontalAlignment="Stretch"
+                                    HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
-                                Theme="{StaticResource DateTimePickerButton}">
+                                    Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
+                                    <PathIcon
-                                    Width="12"
+                                        Width="12"
-                                    Height="12"
+                                        Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                            </Button>
+                                </Button>
-                            <Button
+                                <Rectangle
-                                Name="PART_DismissButton"
+                                    Grid.Column="1"
-                                Grid.Column="1"
+                                    Width="1"
-                                HorizontalAlignment="Stretch"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                VerticalAlignment="Stretch"
+                                <Button
-                                FontSize="16"
+                                    Name="PART_DismissButton"
-                                Theme="{StaticResource DateTimePickerButton}">
+                                    Grid.Column="2"
-                                <PathIcon
+                                    HorizontalAlignment="Stretch"
-                                    Width="12"
+                                    VerticalAlignment="Stretch"
-                                    Height="12"
+                                    Theme="{StaticResource DateTimePickerButton}">
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                                    <PathIcon
-                            </Button>
+                                        Width="12"
-                            <Rectangle
+                                        Height="12"
-                                Grid.ColumnSpan="2"
+                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                                Height="1"
+                                </Button>
-                                VerticalAlignment="Top"
+                                <Rectangle
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Height="1"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -177,6 +182,7 @@
                                     <TextBlock
                                         Name="PART_MonthTextBlock"
                                         Padding="12,0"
+                                        HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
@@ -193,7 +199,7 @@
                                         FontWeight="{TemplateBinding FontWeight}"
                                         Text="{DynamicResource STRING_DATEPICKER_YEAR_TEXT}" />
                                     <Rectangle
-                                        x:Name="PART_FirstSpacer"
+                                        Name="PART_FirstSpacer"
                                         Grid.Column="1"
                                         Width="1"
                                         Height="{TemplateBinding Height}"
@@ -201,7 +207,7 @@
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                     <Rectangle
-                                        x:Name="PART_SecondSpacer"
+                                        Name="PART_SecondSpacer"
                                         Grid.Column="3"
                                         Width="1"
                                         Height="{TemplateBinding Height}"
@@ -212,8 +218,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}" />
@@ -232,11 +237,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/DateTimePickerShared.axaml

@@ -2,6 +2,8 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
+
     <ControlTheme x:Key="DateTimePickerFlyoutButton" TargetType="Button">
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
@@ -24,7 +26,6 @@
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonPointeroverBorderBrush}" />
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
@@ -57,7 +58,7 @@
         x:Key="DateTimePickerItem"
         BasedOn="{StaticResource {x:Type ListBoxItem}}"
         TargetType="ListBoxItem">
-        <Setter Property="ListBoxItem.CornerRadius" Value="0" />
+        <Setter Property="CornerRadius" Value="0" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerListItemBackground}" />
@@ -65,10 +66,6 @@
         <Style Selector="^:selected">
             <Setter Property="IsHitTestVisible" Value="False" />
         </Style>
-        <Style Selector="^.MonthItem">
-            <Setter Property="Padding" Value="{DynamicResource DatePickerFlyoutPresenterMonthPadding}" />
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-        </Style>
     </ControlTheme>
 
     <!--  This is used for both the accept/dismiss & buttons in the presenter  -->
@@ -83,7 +80,7 @@
             <ControlTemplate TargetType="Button">
                 <Border Background="{TemplateBinding Background}">
                     <ContentPresenter
-                        x:Name="ContentPresenter"
+                        Name="ContentPresenter"
                         Padding="{TemplateBinding Padding}"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type DropDownButton}" TargetType="DropDownButton">
         <Setter Property="Background" Value="{DynamicResource ButtonDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
@@ -22,16 +23,16 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     BackgroundSizing="{TemplateBinding BackgroundSizing}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="InnerGrid" ColumnDefinitions="*,Auto">
+                    <Grid Name="InnerGrid" ColumnDefinitions="*,Auto">
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="0"
                             Padding="{TemplateBinding Padding}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -41,10 +42,9 @@
                             Foreground="{TemplateBinding Foreground}"
                             RecognizesAccessKey="True" />
                         <PathIcon
-                            x:Name="DropDownGlyph"
+                            Name="DropDownGlyph"
                             Grid.Column="1"
-                            Width="12"
+                            Theme="{DynamicResource InnerPathIcon}"
-                            Height="12"
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
@@ -125,6 +125,12 @@
         x:Key="SolidDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
         <Style Selector="^ /template/ Border#RootBorder">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -229,11 +235,11 @@
             </Style>
         </Style>
         <Style Selector="^:disabled /template/ Border#RootBorder">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
         </Style>
         <Style Selector="^:disabled">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -1,4 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
     <ControlTheme x:Key="{x:Type EmbeddableControlRoot}" TargetType="EmbeddableControlRoot">
         <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />

src/Semi.Avalonia/Controls/Expander.axaml

@@ -9,7 +9,7 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ExpanderHeaderToggleButtonTheme" TargetType="ToggleButton">
-        <Setter Property="Template">
+        <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">
                 <ContentPresenter
                     Padding="{TemplateBinding Padding}"
@@ -19,25 +19,26 @@
         </Setter>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="Expander.BorderThickness" Value="1" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ExpanderSeparatorBorderBrush}" />
+        <Setter Property="Expander.BorderBrush" Value="{DynamicResource ExpanderSeparatorBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Expander.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Expander.HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="Expander.HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Expander.VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="Template">
+        <Setter Property="Expander.Template">
             <ControlTemplate TargetType="Expander">
                 <DockPanel>
-                    <LayoutTransformControl x:Name="ExpanderHeaderLayoutContainer" Margin="{DynamicResource ExpanderHeaderMargin}">
+                    <LayoutTransformControl Name="ExpanderHeaderLayoutContainer" Margin="{DynamicResource ExpanderHeaderMargin}">
                         <ToggleButton
-                            x:Name="ExpanderHeader"
+                            Name="ExpanderHeader"
                             Padding="{DynamicResource ExpanderHeaderPadding}"
                             HorizontalAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
                             Background="{DynamicResource ExpanderHeaderDefaultBackground}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                            IsChecked="{TemplateBinding IsExpanded,
+                                                        Mode=TwoWay}"
                             IsEnabled="{TemplateBinding IsEnabled}"
                             TextElement.FontWeight="{DynamicResource ExpanderHeaderFontWeight}"
                             TextElement.Foreground="{DynamicResource ExpanderHeaderForeground}"
@@ -50,9 +51,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" />
@@ -64,19 +65,20 @@
                     </LayoutTransformControl>
                     <LayoutTransformControl Name="ExpanderContentLayoutContainer" MinHeight="1">
                         <Border
-                            x:Name="ExpanderContent"
+                            Name="ExpanderContent"
                             MinHeight="2"
                             BorderBrush="{DynamicResource ExpanderSeparatorBorderBrush}"
                             BorderThickness="0,0,0,1">
                             <ContentPresenter
-                                x:Name="PART_ContentPresenter"
+                                Name="PART_ContentPresenter"
                                 Margin="{DynamicResource ExpanderContentMargin}"
                                 HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                 Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}"
                                 Foreground="{DynamicResource ExpanderContentForeground}"
-                                IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+                                IsVisible="{TemplateBinding IsExpanded,
+                                                            Mode=TwoWay}" />
                         </Border>
                     </LayoutTransformControl>
                 </DockPanel>

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -3,24 +3,24 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type FlyoutPresenter}" TargetType="FlyoutPresenter">
-        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
+        <Setter Property="UseLayoutRounding" Value="False" />
-        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
-        <Setter Property="FlyoutPresenter.Background" Value="{DynamicResource FlyoutBackground}" />
+        <Setter Property="Background" Value="{DynamicResource FlyoutBackground}" />
-        <Setter Property="FlyoutPresenter.BorderBrush" Value="{DynamicResource FlyoutBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource FlyoutBorderBrush}" />
-        <Setter Property="FlyoutPresenter.BorderThickness" Value="{DynamicResource FlyoutBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource FlyoutBorderThickness}" />
-        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource FlyoutPadding}" />
-        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
-        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
-        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
-        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
-        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource FlyoutForeground}" />
-        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
@@ -48,25 +48,25 @@
     </ControlTheme>
 
     <ControlTheme x:Key="LightFlyout" TargetType="FlyoutPresenter">
-        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
+        <Setter Property="UseLayoutRounding" Value="False" />
-        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
-        <Setter Property="FlyoutPresenter.Background" Value="Transparent" />
+        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="FlyoutPresenter.BorderBrush" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="FlyoutPresenter.BorderThickness" Value="0" />
+        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource FlyoutPadding}" />
-        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
-        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
-        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
-        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
-        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource FlyoutForeground}" />
-        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Margin" Value="4" />
+        <Setter Property="Margin" Value="4" />
-        <Setter Property="FlyoutPresenter.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"

src/Semi.Avalonia/Controls/GridSplitter.axaml

@@ -6,8 +6,8 @@
         <Setter Property="Focusable" Value="True" />
         <Setter Property="MinWidth" Value="6" />
         <Setter Property="MinHeight" Value="6" />
-        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="GridSplitter.ClipToBounds" Value="False" />
-        <Setter Property="Padding" Value="2" />
+        <Setter Property="GridSplitter.Padding" Value="2" />
         <Setter Property="Background" Value="{DynamicResource GridSplitterBackground}" />
         <Setter Property="PreviewContent">
             <Template>

src/Semi.Avalonia/Controls/HeaderedContentControl.axaml

@@ -1,7 +1,31 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Spacing="20">
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Header="Header" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Content="Content" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                MaxWidth="360"
+                Content="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+            </HeaderedContentControl>
+        </StackPanel>
+    </Design.PreviewWith>
+    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Indent="1" />
+
     <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
         <Setter Property="Padding" Value="3" />
         <Setter Property="Template">
@@ -12,31 +36,31 @@
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
-                    <Grid RowDefinitions="auto *">
+                    <Grid RowDefinitions="Auto,*">
                         <ContentPresenter
                             Name="PART_HeaderPresenter"
+                            Grid.Row="0"
                             Content="{TemplateBinding Header}"
-                            RecognizesAccessKey="True"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            RecognizesAccessKey="True"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
+                            FontStyle="{TemplateBinding FontStyle}" />
-                            Grid.Row="0" />
                         <ContentPresenter
                             Name="PART_ContentPresenter"
+                            Grid.Row="1"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             Content="{TemplateBinding Content}"
                             RecognizesAccessKey="True"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
+                            FontStyle="{TemplateBinding FontStyle}" />
-                            Grid.Row="1" />
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -44,42 +68,46 @@
     </ControlTheme>
 
     <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
-        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlBackground}" />
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlBorderBrush}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource HeaderedContentControlBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="HeaderedContentControl">
                 <Border
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
-                    BorderThickness="{TemplateBinding BorderThickness}">
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid RowDefinitions="Auto,Auto,Auto">
                         <ContentPresenter
+                            Name="PART_HeaderPresenter"
                             Grid.Row="0"
-                            FontWeight="Bold"
+                            Padding="{DynamicResource HeaderedContentControlHeaderPadding}"
-                            HorizontalAlignment="Left"
+                            FontWeight="{DynamicResource HeaderedContentControlHeaderFontWeight}"
-                            VerticalAlignment="Stretch"
+                            IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"
                             Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
-                            Margin="16" />
+                        <Border
-                        <Rectangle
+                            Name="SeparatorBorder"
                             Grid.Row="1"
-                            Fill="{TemplateBinding BorderBrush}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                            Height="1" />
+                            BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}">
+                            <Border.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <TemplateBinding Property="Header" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                    <TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                </MultiBinding>
+                            </Border.IsVisible>
+                        </Border>
                         <ContentPresenter
+                            Name="PART_ContentPresenter"
                             Grid.Row="2"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Padding="{DynamicResource HeaderedContentControlContentPadding}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Margin="16" />
+                            TextWrapping="Wrap" />
                     </Grid>
                 </Border>
             </ControlTemplate>

src/Semi.Avalonia/Controls/HyperlinkButton.axaml

@@ -1,118 +1,101 @@
 <ResourceDictionary
-    x:CompileBindings="True"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/">
+                链接文本
+            </HyperlinkButton>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="WithIcon Underline">
+                网页链接
+            </HyperlinkButton>
+            <HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="OnlyIcon">
+                OnlyIcon
+            </HyperlinkButton>
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme TargetType="HyperlinkButton" x:Key="{x:Type HyperlinkButton}">
-        <Setter Property="Padding" Value="0,0,0,0" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource HyperlinkButtonFontSize}" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="FontWeight" Value="{DynamicResource HyperlinkButtonFontWeight}" />
         <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonForeground}" />
-        <Setter Property="Background" Value="{DynamicResource HyperlinkButtonDefaultBackground}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="HyperlinkButton">
-                <Grid ColumnDefinitions="Auto,*" x:Name="RootGrid">
+                <DockPanel>
-                    <Grid
+                    <PathIcon
-                        Grid.Column="0"
+                        Name="PART_LinkGlyph"
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Margin="{DynamicResource HyperlinkButtonLinkGlyphMargin}"
                         IsVisible="False"
-                        Margin="0,0,8,0"
+                        Data="{DynamicResource HyperlinkButtonLinkGlyph}"
-                        VerticalAlignment="Center"
+                        Foreground="{TemplateBinding Foreground}"
-                        x:Name="IconGrid">
+                        Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}"
-                        <Border
+                        Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}" />
-                            Background="{DynamicResource HyperlinkButtonDefaultBackground}"
-                            Height="{DynamicResource HyperlinkButtonIconHeight}"
-                            Opacity="0"
-                            UseLayoutRounding="False"
-                            Width="{DynamicResource HyperlinkButtonIconWidth}"
-                            x:Name="BackgroundRectangle" />
-                        <PathIcon
-                            Data="{DynamicResource HyperlinkButtonLinkGlyph}"
-                            Foreground="{DynamicResource HyperlinkButtonForeground}"
-                            Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}"
-                            Name="LinkGlyph"
-                            VerticalAlignment="Center"
-                            Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}" />
-                    </Grid>
                     <ContentPresenter
+                        Name="PART_ContentPresenter"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
-                        Cursor="{TemplateBinding Cursor}"
-                        Grid.Column="1"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        Padding="0,0,0,0"
+                        RecognizesAccessKey="True" />
-                        RecognizesAccessKey="True"
+                </DockPanel>
-                        VerticalAlignment="Center"
-                        x:Name="ContentPresenter" />
-                </Grid>
             </ControlTemplate>
         </Setter>
 
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-            </Style>
         </Style>
 
-        <!--  Unvisited Pressed State  -->
         <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
             <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
 
-        <!--  Unvisited Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-            </Style>
         </Style>
 
         <Style Selector="^:visited">
-            <Style Selector="^ /template/ PathIcon#LinkGlyph">
+            <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
-            </Style>
 
-            <!--  Visited Pointerover State  -->
             <Style Selector="^:pointerover">
-                <Style Selector="^ /template/ PathIcon#LinkGlyph">
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
-                </Style>
             </Style>
 
-            <!--  Visited Pressed State  -->
             <Style Selector="^:pressed">
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
                 <Setter Property="RenderTransform" Value="scale(0.98)" />
             </Style>
 
-            <!--  Visited Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ PathIcon#LinkGlyph">
+                <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
-                    <Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
-                </Style>
             </Style>
         </Style>
 
         <Style Selector="^.WithIcon">
-            <Style Selector="^ /template/ Grid#IconGrid">
+            <Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
         </Style>
+
+        <Style Selector="^.Underline">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:pointerover">
+                <Setter Property="TextBlock.TextDecorations" Value="Underline" />
+            </Style>
+        </Style>
+
+        <Style Selector="^.OnlyIcon">
+            <Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

@@ -80,8 +80,8 @@
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Label}" TargetType="Label">
-        <Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
-        <Setter Property="Label.FontSize" Value="{DynamicResource TextBlockFontSize}" />
+        <Setter Property="FontSize" Value="{DynamicResource TextBlockFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter
@@ -138,7 +138,7 @@
         x:Key="TitleLabel"
         BasedOn="{StaticResource {x:Type Label}}"
         TargetType="Label">
-        <Setter Property="Label.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
         <Style Selector="^.H1">
             <Setter Property="FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
         </Style>
@@ -164,14 +164,14 @@
     <!--  Size: Small, Large. Default is Small  -->
     <!--  Color: Red, Pink, Purple, Violet, Indigo, Blue, LightBlue, Cyan, Teal, Green, LightGreen, Lime, Yellow, Amber, Orange, Grey, White. Default is Grey  -->
     <ControlTheme x:Key="TagLabel" TargetType="Label">
-        <Setter Property="Label.BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource LabelTagBorderThickness}" />
-        <Setter Property="Label.MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
+        <Setter Property="MinHeight" Value="{DynamicResource LabelTagSmallHeight}" />
-        <Setter Property="Label.CornerRadius" Value="{DynamicResource LabelTagSquareCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource LabelTagSquareCornerRadius}" />
-        <Setter Property="Label.HorizontalAlignment" Value="Left" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="Label.UseLayoutRounding" Value="False" />
+        <Setter Property="UseLayoutRounding" Value="False" />
-        <Setter Property="Label.VerticalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="Label.Padding" Value="{DynamicResource LabelTagSmallPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource LabelTagSmallPadding}" />
-        <Setter Property="Label.FontSize" Value="{DynamicResource LabelTagFontSize}" />
+        <Setter Property="FontSize" Value="{DynamicResource LabelTagFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -6,6 +6,7 @@
     xmlns:internal="clr-namespace:Avalonia.Dialogs.Internal;assembly=Avalonia.Dialogs"
     xmlns:cvt="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <Design.PreviewWith>
         <Border
             Width="800"
@@ -21,7 +22,7 @@
         <StreamGeometry x:Key="Icon_Volume">M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12,4A6,6 0 0,0 6,10C6,13.31 8.69,16 12.1,16L11.22,13.77C10.95,13.29 11.11,12.68 11.59,12.4L12.45,11.9C12.93,11.63 13.54,11.79 13.82,12.27L15.74,14.69C17.12,13.59 18,11.9 18,10A6,6 0 0,0 12,4M12,9A1,1 0 0,1 13,10A1,1 0 0,1 12,11A1,1 0 0,1 11,10A1,1 0 0,1 12,9M7,18A1,1 0 0,0 6,19A1,1 0 0,0 7,20A1,1 0 0,0 8,19A1,1 0 0,0 7,18M12.09,13.27L14.58,19.58L17.17,18.08L12.95,12.77L12.09,13.27Z</StreamGeometry>
     </converters:KeyToPathConverter>
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
-        <Setter Property="dialogs:ManagedFileChooser.Template">
+        <Setter Property="Template">
             <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel" TargetType="dialogs:ManagedFileChooser">
                 <DockPanel>
                     <Border
@@ -30,7 +31,7 @@
                         DockPanel.Dock="Left"
                         Theme="{DynamicResource CardBorder}">
                         <ListBox
-                            x:Name="PART_QuickLinks"
+                            Name="PART_QuickLinks"
                             Focusable="False"
                             ItemsSource="{Binding QuickLinks}"
                             SelectedIndex="{Binding QuickLinksSelectedIndex}">
@@ -38,8 +39,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}" />
@@ -49,7 +49,7 @@
                         </ListBox>
                     </Border>
                     <DockPanel
-                        x:Name="NavBar"
+                        Name="NavBar"
                         Margin="8,8,8,0"
                         VerticalAlignment="Center"
                         DockPanel.Dock="Top">
@@ -58,12 +58,11 @@
                             DockPanel.Dock="Left"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
-                                Width="16"
+                                Theme="{DynamicResource InnerPathIcon}"
-                                Height="16"
                                 Data="{DynamicResource ManagedFileChooserUpButtonGlyph}"
                                 Foreground="{DynamicResource ManagedFileChooserIconForeground}" />
                         </Button>
-                        <TextBox x:Name="Location" Text="{Binding Location}">
+                        <TextBox Name="Location" Text="{Binding Location}">
                             <TextBox.KeyBindings>
                                 <KeyBinding Command="{Binding EnterPressed}" Gesture="Enter" />
                             </TextBox.KeyBindings>
@@ -88,7 +87,7 @@
                             DockPanel.Dock="Left"
                             IsChecked="{Binding ShowHiddenFiles}" />
                         <UniformGrid
-                            x:Name="Finalize"
+                            Name="Finalize"
                             HorizontalAlignment="Right"
                             Rows="1">
                             <Button
@@ -159,8 +158,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}" />
@@ -173,7 +166,7 @@
                                 ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 RecognizesAccessKey="True" />
                             <TextBlock
-                                x:Name="PART_InputGestureText"
+                                Name="PART_InputGestureText"
                                 Grid.Column="3"
                                 Margin="{DynamicResource MenuItemInputGestureTextMargin}"
                                 HorizontalAlignment="Right"
@@ -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}"
@@ -234,15 +226,6 @@
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
                 <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
-                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
-            </Style>
-            <Style Selector="^ /template/ PathIcon#PART_ExpandIcon">
-                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
-            </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
@@ -283,6 +266,7 @@
             <Setter Property="Content">
                 <Template>
                     <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
                         Foreground="{Binding $parent[MenuItem].Foreground}"
                         Data="{StaticResource MenuCheckGlyph}" />
                 </Template>
@@ -365,9 +349,6 @@
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
                 <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuItemPointeroverForeground}" />
-            </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->

src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml

@@ -18,17 +18,17 @@
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
-        <Setter Property="MenuFlyoutPresenter.Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutBackground}" />
-        <Setter Property="MenuFlyoutPresenter.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
-        <Setter Property="MenuFlyoutPresenter.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
-        <Setter Property="MenuFlyoutPresenter.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="MenuFlyoutPresenter.FontSize" Value="{DynamicResource TextBlockFontSize}" />
+        <Setter Property="FontSize" Value="{DynamicResource TextBlockFontSize}" />
-        <Setter Property="MenuFlyoutPresenter.FontWeight" Value="{DynamicResource TextBlockFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource TextBlockFontWeight}" />
-        <Setter Property="MenuFlyoutPresenter.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
-        <Setter Property="MenuFlyoutPresenter.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
@@ -37,7 +37,6 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     UseLayoutRounding="False">
                     <ScrollViewer

src/Semi.Avalonia/Controls/NotificationCard.axaml

@@ -34,7 +34,7 @@
                         Background="{TemplateBinding Background}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Border
-                            x:Name="PART_RootBorder"
+                            Name="PART_RootBorder"
                             Padding="{DynamicResource NotificationCardPadding}"
                             BoxShadow="{DynamicResource NotificationCardBoxShadows}"
                             BorderBrush="{TemplateBinding BorderBrush}"
@@ -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/NumericUpDown.axaml

@@ -2,12 +2,13 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
-        <Setter Property="NumericUpDown.VerticalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
-        <Setter Property="NumericUpDown.MinHeight" Value="{DynamicResource NumericUpDownDefaultHeight}" />
+        <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownDefaultHeight}" />
-        <Setter Property="NumericUpDown.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="NumericUpDown">
                 <DataValidationErrors>
                     <ButtonSpinner

src/Semi.Avalonia/Controls/PathIcon.axaml

@@ -3,9 +3,9 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type PathIcon}" TargetType="PathIcon">
-        <Setter Property="PathIcon.Background" Value="Transparent" />
+        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="PathIcon.Height" Value="{DynamicResource IconElementThemeHeight}" />
+        <Setter Property="Height" Value="{DynamicResource IconElementThemeHeight}" />
-        <Setter Property="PathIcon.Width" Value="{DynamicResource IconElementThemeWidth}" />
+        <Setter Property="Width" Value="{DynamicResource IconElementThemeWidth}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="PathIcon">
                 <Border Background="{TemplateBinding Background}">
@@ -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="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+
+    <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="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" />
+        </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/ProgressBar.axaml

@@ -104,7 +104,7 @@
             <ControlTemplate TargetType="ProgressBar">
                 <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="Auto, *, Auto">
                     <Border
-                        x:Name="ProgressBarRoot"
+                        Name="ProgressBarRoot"
                         Grid.Row="1"
                         Grid.Column="1"
                         Background="{TemplateBinding Background}"
@@ -113,31 +113,31 @@
                         ClipToBounds="True"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Panel>
-                            <Panel x:Name="DeterminateRoot" Opacity="1">
+                            <Panel Name="DeterminateRoot" Opacity="1">
                                 <Panel.Transitions>
                                     <Transitions>
                                         <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
-                                    x:Name="PART_Indicator"
+                                    Name="PART_Indicator"
                                     Margin="{TemplateBinding Padding}"
                                     Background="{TemplateBinding Foreground}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                             </Panel>
-                            <Panel x:Name="IndeterminateRoot" Opacity="0">
+                            <Panel Name="IndeterminateRoot" Opacity="0">
                                 <Panel.Transitions>
                                     <Transitions>
                                         <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
                                     </Transitions>
                                 </Panel.Transitions>
                                 <Border
-                                    x:Name="IndeterminateProgressBarIndicator"
+                                    Name="IndeterminateProgressBarIndicator"
                                     Margin="{TemplateBinding Padding}"
                                     Background="{TemplateBinding Foreground}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                                 <Border
-                                    x:Name="IndeterminateProgressBarIndicator2"
+                                    Name="IndeterminateProgressBarIndicator2"
                                     Margin="{TemplateBinding Padding}"
                                     Background="{TemplateBinding Foreground}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
@@ -145,7 +145,7 @@
                         </Panel>
                     </Border>
                     <LayoutTransformControl
-                        x:Name="PART_LayoutTransformControl"
+                        Name="PART_LayoutTransformControl"
                         Grid.Row="1"
                         Grid.Column="1"
                         Margin="0"

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -27,7 +27,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -38,7 +38,7 @@
                             TemplatedControl.IsTemplateFocusTarget="True"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Ellipse
-                                x:Name="OuterEllipse"
+                                Name="OuterEllipse"
                                 Width="{DynamicResource RadioButtonIconRadius}"
                                 Height="{DynamicResource RadioButtonIconRadius}"
                                 Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
@@ -47,7 +47,7 @@
                                 UseLayoutRounding="False" />
 
                             <Ellipse
-                                x:Name="CheckGlyph"
+                                Name="CheckGlyph"
                                 Width="{DynamicResource RadioButtonGlyphRadius}"
                                 Height="{DynamicResource RadioButtonGlyphRadius}"
                                 Fill="{DynamicResource RadioButtonCheckGlyphFill}"
@@ -55,7 +55,7 @@
                                 UseLayoutRounding="False" />
                         </Panel>
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
                             Margin="{DynamicResource RadioButtonContentMargin}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -166,7 +166,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -221,7 +221,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <Border
-                    x:Name="RootBorder"
+                    Name="RootBorder"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
@@ -236,7 +236,7 @@
                             VerticalAlignment="Top"
                             Margin="{DynamicResource RadioButtonIconMargin}">
                             <Ellipse
-                                x:Name="OuterEllipse"
+                                Name="OuterEllipse"
                                 Width="{DynamicResource RadioButtonIconRadius}"
                                 Height="{DynamicResource RadioButtonIconRadius}"
                                 Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
@@ -245,7 +245,7 @@
                                 UseLayoutRounding="False" />
 
                             <Ellipse
-                                x:Name="CheckGlyph"
+                                Name="CheckGlyph"
                                 Width="{DynamicResource RadioButtonGlyphRadius}"
                                 Height="{DynamicResource RadioButtonGlyphRadius}"
                                 Fill="{DynamicResource RadioButtonCheckGlyphFill}"
@@ -254,7 +254,7 @@
                         </Panel>
 
                         <ContentPresenter
-                            x:Name="PART_ContentPresenter"
+                            Name="PART_ContentPresenter"
                             Grid.Column="1"
                             Margin="{DynamicResource RadioButtonContentMargin}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -372,7 +372,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

src/Semi.Avalonia/Controls/RefreshContainer.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type RefreshContainer}" TargetType="RefreshContainer">
         <Setter Property="Template">
             <ControlTemplate>

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -22,7 +22,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="RepeatButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
@@ -97,6 +97,12 @@
         x:Key="SolidRepeatButton"
         BasedOn="{StaticResource {x:Type RepeatButton}}"
         TargetType="RepeatButton">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
@@ -108,7 +114,6 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
         </Style>
@@ -124,7 +129,6 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidPrimaryPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
                 <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryPressedBorderBrush}" />
             </Style>
@@ -206,9 +210,9 @@
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidDisabledBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -249,12 +253,12 @@
         BasedOn="{StaticResource {x:Type RepeatButton}}"
         TargetType="RepeatButton">
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
         </Style>
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="BorderBrush" Value="Transparent" />
-            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <Setter Property="Background" Value="Transparent" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
 

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -205,13 +205,13 @@
             <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton > PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton:pointerover > PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
+        <Style Selector="^ /template/ RepeatButton:pressed > PathIcon">
             <Setter Property="RenderTransform" Value="scale(0.92)" />
         </Style>
 
@@ -346,11 +346,11 @@
                 </DockPanel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
+        <Style Selector="^ /template/ RepeatButton > Path">
             <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonDefaultForeground}" />
         </Style>
 
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
+        <Style Selector="^ /template/ RepeatButton:pointerover > Path">
             <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/SelectableTextBlock.axaml

@@ -13,11 +13,11 @@
     </MenuFlyout>
 
     <ControlTheme x:Key="{x:Type SelectableTextBlock}" TargetType="SelectableTextBlock">
-        <Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
-        <Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
+        <Setter Property="FontSize" Value="{DynamicResource TextBlockFontSize}" />
-        <Setter Property="SelectableTextBlock.Cursor" Value="Ibeam" />
+        <Setter Property="Cursor" Value="Ibeam" />
-        <Setter Property="SelectableTextBlock.SelectionBrush" Value="{DynamicResource TextBlockSelectionBackground}" />
+        <Setter Property="SelectionBrush" Value="{DynamicResource TextBlockSelectionBackground}" />
-        <Setter Property="SelectableTextBlock.SelectionForegroundBrush" Value="{DynamicResource TextBlockSelectionForeground}" />
+        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBlockSelectionForeground}" />
         <Style Selector="^.Secondary">
             <Setter Property="Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
         </Style>

src/Semi.Avalonia/Controls/Slider.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="SliderHorizontalRepeatButton" TargetType="RepeatButton">
         <Setter Property="Template">
             <ControlTemplate TargetType="RepeatButton">
@@ -43,11 +44,11 @@
     </ControlTheme>
 
     <ControlTheme x:Key="SliderThumbTheme" TargetType="Thumb">
-        <Setter Property="Thumb.CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" />
-        <Setter Property="Thumb.Cursor" Value="Hand" />
+        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Thumb.Background" Value="{DynamicResource SliderThumbBackground}" />
+        <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
-        <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
-        <Setter Property="Thumb.BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Thumb">
                 <Border
@@ -76,7 +77,7 @@
                 <ControlTemplate TargetType="Slider">
                     <DataValidationErrors>
                         <Grid
-                            x:Name="SliderContainer"
+                            Name="SliderContainer"
                             Margin="{TemplateBinding Padding}"
                             Background="Transparent"
                             RowDefinitions="Auto,Auto,Auto">
@@ -153,7 +154,7 @@
                 <ControlTemplate>
                     <DataValidationErrors>
                         <Grid
-                            x:Name="SliderContainer"
+                            Name="SliderContainer"
                             Margin="{TemplateBinding Padding}"
                             Background="{DynamicResource SliderContainerBackground}"
                             ColumnDefinitions="Auto,Auto,Auto">

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -25,7 +25,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
@@ -69,32 +69,7 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Button
-                            x:Name="PART_SecondaryButton"
+                            Name="PART_PrimaryButton"
-                            Padding="4,0"
-                            VerticalAlignment="Stretch"
-                            HorizontalContentAlignment="Center"
-                            VerticalContentAlignment="Center"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="0"
-                            DockPanel.Dock="Right"
-                            Focusable="False"
-                            KeyboardNavigation.IsTabStop="False"
-                            Theme="{DynamicResource SemiSplitButtonElement}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{DynamicResource SplitButtonIconGlyph}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
-                        <Rectangle
-                            x:Name="SeparatorBorder"
-                            Width="{DynamicResource SplitButtonSeparatorWidth}"
-                            VerticalAlignment="Stretch"
-                            DockPanel.Dock="Right"
-                            Fill="{TemplateBinding BorderBrush}"
-                            StrokeThickness="0" />
-                        <Button
-                            x:Name="PART_PrimaryButton"
                             Padding="{TemplateBinding Padding}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -106,12 +81,32 @@
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             CornerRadius="0"
-                            Focusable="False"
                             FontFamily="{TemplateBinding FontFamily}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
-                            KeyboardNavigation.IsTabStop="False"
+                            DockPanel.Dock="Left"
                             Theme="{DynamicResource SemiSplitButtonElement}" />
+                        <Rectangle
+                            Name="SeparatorBorder"
+                            Width="{DynamicResource SplitButtonSeparatorWidth}"
+                            VerticalAlignment="Stretch"
+                            DockPanel.Dock="Left"
+                            Fill="Transparent"
+                            StrokeThickness="0" />
+                        <Button
+                            Name="PART_SecondaryButton"
+                            Padding="4,0"
+                            VerticalAlignment="Stretch"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="0"
+                            Theme="{DynamicResource SemiSplitButtonElement}">
+                            <PathIcon
+                                Theme="{DynamicResource InnerPathIcon}"
+                                Data="{DynamicResource SplitButtonIconGlyph}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -149,6 +144,12 @@
         </Style>
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Button">
+                <Setter Property="FocusAdorner">
+                    <FocusAdornerTemplate>
+                        <Border Theme="{DynamicResource AdornerLayerBorder}"
+                                Classes="Solid" />
+                    </FocusAdornerTemplate>
+                </Setter>
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
                 <Style Selector="^:pointerover">
@@ -224,7 +225,6 @@
         <!-- only for ToggleSplitButton -->
         <Style Selector="^:checked:disabled /template/ Button">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
         </Style>
     </ControlTheme>
 
@@ -233,6 +233,12 @@
         BasedOn="{StaticResource {x:Type SplitButton}}"
         TargetType="SplitButton">
         <Style Selector="^ /template/ Button">
+            <Setter Property="FocusAdorner">
+                <FocusAdornerTemplate>
+                    <Border Theme="{DynamicResource AdornerLayerBorder}"
+                            Classes="Solid" />
+                </FocusAdornerTemplate>
+            </Setter>
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
 
@@ -307,7 +313,7 @@
 
         <Style Selector="^:disabled /template/ Button">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidDisabledBackground}" />
-            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidDisabledForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
 

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -1,4 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
@@ -21,7 +23,7 @@
                             ClipToBounds="True"
                             ZIndex="100">
                             <ContentPresenter
-                                x:Name="PART_PanePresenter"
+                                Name="PART_PanePresenter"
                                 Content="{TemplateBinding Pane}"
                                 ContentTemplate="{TemplateBinding PaneTemplate}" />
                             <Rectangle
@@ -33,7 +35,7 @@
 
                         <Panel Name="ContentRoot">
                             <ContentPresenter
-                                x:Name="PART_ContentPresenter"
+                                Name="PART_ContentPresenter"
                                 Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}" />
                             <Rectangle
@@ -112,7 +114,7 @@
                             ClipToBounds="True"
                             ZIndex="100">
                             <ContentPresenter
-                                x:Name="PART_PanePresenter"
+                                Name="PART_PanePresenter"
                                 Content="{TemplateBinding Pane}"
                                 ContentTemplate="{TemplateBinding PaneTemplate}" />
                             <Rectangle
@@ -124,7 +126,7 @@
 
                         <Panel Name="ContentRoot">
                             <ContentPresenter
-                                x:Name="PART_ContentPresenter"
+                                Name="PART_ContentPresenter"
                                 Content="{TemplateBinding Content}"
                                 ContentTemplate="{TemplateBinding ContentTemplate}" />
                             <Rectangle Name="LightDismissLayer" IsVisible="False" />

src/Semi.Avalonia/Controls/TabControl.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
         <Setter Property="Margin" Value="0" />
         <Setter Property="Padding" Value="0" />
@@ -32,10 +33,10 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter &gt; WrapPanel">
+        <Style Selector="^[TabStripPlacement=Left] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
             <Setter Property="Orientation" Value="Vertical" />
         </Style>
-        <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter &gt; WrapPanel">
+        <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
             <Setter Property="Orientation" Value="Vertical" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -12,13 +12,13 @@
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
-        <Setter Property="TabItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
-        <Setter Property="TabItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="TabItem.Margin" Value="0" />
+        <Setter Property="Margin" Value="0" />
-        <Setter Property="TabItem.Padding" Value="8 4" />
+        <Setter Property="Padding" Value="8 4" />
-        <Setter Property="TabItem.MinHeight" Value="5" />
+        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="TabItem.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
                 <Border
                     Name="PART_LayoutRoot"

src/Semi.Avalonia/Controls/TabStrip.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
         <Setter Property="Template">
             <ControlTemplate>
@@ -31,13 +32,13 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
-        <Setter Property="TabStripItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
-        <Setter Property="TabStripItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
+        <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="TabStripItem.Margin" Value="0" />
+        <Setter Property="Margin" Value="0" />
-        <Setter Property="TabStripItem.Padding" Value="8 4" />
+        <Setter Property="Padding" Value="8 4" />
-        <Setter Property="TabStripItem.MinHeight" Value="5" />
+        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="TabStripItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="TabStripItem.Template">
+        <Setter Property="Template">
             <ControlTemplate TargetType="TabStripItem">
                 <Border
                     Name="PART_LayoutRoot"

src/Semi.Avalonia/Controls/TextBlock.axaml

@@ -52,7 +52,7 @@
         x:Key="TitleTextBlock"
         BasedOn="{StaticResource {x:Type TextBlock}}"
         TargetType="TextBlock">
-        <Setter Property="TextBlock.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
+        <Setter Property="FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
         <Style Selector="^.H1">
             <Setter Property="FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
         </Style>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -24,25 +24,25 @@
     </MenuFlyout>
 
     <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
-        <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
+        <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
+        <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
-        <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
-        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
+        <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="TextBox.BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
-        <Setter Property="FontSize" Value="14" />
+        <Setter Property="TextBox.FontSize" Value="14" />
-        <Setter Property="Cursor" Value="Ibeam" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
-        <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
-        <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
-        <Setter Property="FocusAdorner" Value="{x:Null}" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
         <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
-        <Setter Property="ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
+        <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
-        <Setter Property="Template">
+        <Setter Property="TextBox.Template">
             <ControlTemplate TargetType="TextBox">
                 <DataValidationErrors>
                     <Border
@@ -131,7 +131,6 @@
 
         <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPressedBackground}" />
@@ -198,8 +197,8 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderedPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:disabled /template/ Border#PART_ContentPresenterBorder">
-                <Setter Property="Background" Value="{DynamicResource TextBoxDisabledBackground}" />
+                <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
+                <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
             </Style>
 
             <Style Selector="^:error">
@@ -231,25 +230,25 @@
     </ControlTheme>
 
     <ControlTheme x:Key="NonErrorTextBox" TargetType="TextBox">
-        <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="Background" Value="{DynamicResource TextBoxDefaultBackground}" />
+        <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
+        <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
-        <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
-        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
+        <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="TextBox.BackgroundSizing" Value="OuterBorderEdge" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
-        <Setter Property="FontSize" Value="14" />
+        <Setter Property="TextBox.FontSize" Value="14" />
-        <Setter Property="Cursor" Value="Ibeam" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
-        <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
-        <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
-        <Setter Property="FocusAdorner" Value="{x:Null}" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
         <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
-        <Setter Property="ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
+        <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
-        <Setter Property="Template">
+        <Setter Property="TextBox.Template">
             <ControlTemplate TargetType="TextBox">
                 <DataValidationErrors Theme="{DynamicResource SilentDataValidationErrors}">
                     <Border
@@ -338,7 +337,6 @@
 
         <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
             <Setter Property="Background" Value="{DynamicResource TextBoxPressedBackground}" />
@@ -405,8 +403,8 @@
                 <Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderedPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^:disabled /template/ Border#PART_ContentPresenterBorder">
-                <Setter Property="Background" Value="{DynamicResource TextBoxDisabledBackground}" />
+                <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
+                <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
             </Style>
 
             <Style Selector="^:error">
@@ -438,19 +436,19 @@
     </ControlTheme>
 
     <ControlTheme x:Key="LooklessTextBox" TargetType="TextBox">
-        <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
-        <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
-        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
-        <Setter Property="FontSize" Value="14" />
+        <Setter Property="TextBox.FontSize" Value="14" />
-        <Setter Property="Cursor" Value="Ibeam" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
-        <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
-        <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
-        <Setter Property="FocusAdorner" Value="{x:Null}" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
         <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
-        <Setter Property="Template">
+        <Setter Property="TextBox.Template">
             <ControlTemplate TargetType="TextBox">
                 <Border Name="PART_ContentPresenterBorder" MinHeight="{TemplateBinding MinHeight}">
                     <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto, *, Auto">
@@ -513,22 +511,26 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
-        <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
+        <Setter Property="Width" Value="16"/>
-        <Setter Property="ToggleButton.Cursor" Value="Hand" />
+        <Setter Property="Height" Value="16"/>
-        <Setter Property="ToggleButton.Template">
+        <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/ThemeVariantScope.axaml

@@ -2,7 +2,9 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type ThemeVariantScope}" TargetType="ThemeVariantScope">
+        <!--  Add Resources Here  -->
         <Setter Property="TextElement.Foreground" Value="{DynamicResource DefaultForeground}" />
         <Setter Property="TextElement.FontSize" Value="{DynamicResource DefaultFontSize}" />
         <Setter Property="TextElement.FontFamily" Value="{DynamicResource DefaultFontFamily}" />

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -23,25 +23,28 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource DateTimePickerFlyoutBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Name="ContentPanel" RowDefinitions="*,Auto">
+                    <Border
-                        <Grid Name="PART_PickerContainer">
+                        CornerRadius="{TemplateBinding CornerRadius}"
-                            <Grid.Styles>
+                        ClipToBounds="True">
-                                <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
+                        <Grid Name="ContentPanel" RowDefinitions="*,Auto">
-                                    <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
+                            <Grid Name="PART_PickerContainer">
-                                </Style>
+                                <Grid.Styles>
-                            </Grid.Styles>
+                                    <Style Selector="DateTimePickerPanel > ListBoxItem">
-                            <!--  Ignore col defs here, set in code  -->
+                                        <Setter Property="Theme" Value="{StaticResource DateTimePickerItem}" />
-                            <Panel Name="PART_HourHost" Grid.Column="0">
+                                    </Style>
-                                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
+                                </Grid.Styles>
-                                    <DateTimePickerPanel
+                                <!--  Ignore col defs here, set in code  -->
-                                        Name="PART_HourSelector"
+                                <Panel Name="PART_HourHost" Grid.Column="0">
-                                        ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
+                                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
-                                        PanelType="Hour"
+                                        <DateTimePickerPanel
-                                        ShouldLoop="True" />
+                                            Name="PART_HourSelector"
-                                </ScrollViewer>
+                                            ItemHeight="{DynamicResource DateTimePickerListBoxItemHeight}"
-                                <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                            PanelType="Hour"
-                                <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                            ShouldLoop="True" />
-                            </Panel>
+                                    </ScrollViewer>
+                                    <RepeatButton Name="PART_HourUpButton" Theme="{StaticResource DateTimePickerUpButton}" />
+                                    <RepeatButton Name="PART_HourDownButton" Theme="{StaticResource DateTimePickerDownButton}" />
+                                </Panel>
 
                             <Panel Name="PART_MinuteHost" Grid.Column="2">
                                 <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">
@@ -71,52 +74,56 @@
                                 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>
 
-                        <Grid
+                            <Grid
-                            Name="AcceptDismissGrid"
+                                Name="AcceptDismissGrid"
-                            Grid.Row="1"
+                                Grid.Row="1"
-                            ColumnDefinitions="*,*">
+                                ColumnDefinitions="*,Auto,*">
-                            <Button
+                                <Button
-                                Name="PART_AcceptButton"
+                                    Name="PART_AcceptButton"
-                                Grid.Column="0"
+                                    Grid.Column="0"
-                                HorizontalAlignment="Stretch"
+                                    HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
-                                Theme="{StaticResource DateTimePickerButton}">
+                                    Theme="{StaticResource DateTimePickerButton}">
-                                <PathIcon
+                                    <PathIcon
-                                    Width="12"
+                                        Width="12"
-                                    Height="12"
+                                        Height="12"
-                                    Data="{DynamicResource DateTimePickerAcceptGlyph}" />
+                                        Data="{DynamicResource DateTimePickerAcceptGlyph}" />
-                            </Button>
+                                </Button>
-                            <Button
+                                <Rectangle
-                                Name="PART_DismissButton"
+                                    Grid.Column="1"
-                                Grid.Column="1"
+                                    Width="1"
-                                HorizontalAlignment="Stretch"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                VerticalAlignment="Stretch"
+                                <Button
-                                FontSize="16"
+                                    Name="PART_DismissButton"
-                                Theme="{StaticResource DateTimePickerButton}">
+                                    Grid.Column="2"
-                                <PathIcon
+                                    HorizontalAlignment="Stretch"
-                                    Width="12"
+                                    VerticalAlignment="Stretch"
-                                    Height="12"
+                                    FontSize="16"
-                                    Data="{DynamicResource DateTimePickerDismissGlyph}" />
+                                    Theme="{StaticResource DateTimePickerButton}">
-                            </Button>
+                                    <PathIcon
-                            <Rectangle
+                                        Width="12"
-                                Grid.ColumnSpan="2"
+                                        Height="12"
-                                Height="1"
+                                        Data="{DynamicResource DateTimePickerDismissGlyph}" />
-                                VerticalAlignment="Top"
+                                </Button>
-                                Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                <Rectangle
+                                    Grid.Column="0"
+                                    Grid.ColumnSpan="3"
+                                    Height="1"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                            </Grid>
                         </Grid>
-                    </Grid>
+                    </Border>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -145,7 +152,7 @@
                         Margin="{TemplateBinding Padding}"
                         ColumnDefinitions="*, Auto">
                         <Button
-                            x:Name="PART_FlyoutButton"
+                            Name="PART_FlyoutButton"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Width="242"
@@ -166,12 +173,12 @@
                                 <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
                                     <!--  Ignore col defs here, set in code  -->
                                     <Border
-                                        x:Name="PART_FirstPickerHost"
+                                        Name="PART_FirstPickerHost"
                                         Grid.Column="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch">
                                         <TextBlock
-                                            x:Name="PART_HourTextBlock"
+                                            Name="PART_HourTextBlock"
                                             Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
@@ -189,12 +196,12 @@
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                     <Border
-                                        x:Name="PART_SecondPickerHost"
+                                        Name="PART_SecondPickerHost"
                                         Grid.Column="2"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch">
                                         <TextBlock
-                                            x:Name="PART_MinuteTextBlock"
+                                            Name="PART_MinuteTextBlock"
                                             Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
@@ -212,12 +219,12 @@
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
 
                                     <Border
-                                        x:Name="PART_ThirdPickerHost"
+                                        Name="PART_ThirdPickerHost"
                                         Grid.Column="4"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch">
                                         <TextBlock
-                                            x:Name="PART_PeriodTextBlock"
+                                            Name="PART_PeriodTextBlock"
                                             Padding="12,0"
                                             HorizontalAlignment="Center"
                                             VerticalAlignment="Center"
@@ -229,8 +236,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}" />
@@ -252,11 +258,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/TitleBar.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
+    <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type TitleBar}" TargetType="TitleBar">
         <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
@@ -10,16 +11,16 @@
             <ControlTemplate>
                 <Panel HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="Stretch">
                     <Panel
-                        x:Name="PART_MouseTracker"
+                        Name="PART_MouseTracker"
                         Height="1"
                         VerticalAlignment="Top" />
-                    <Panel x:Name="PART_Container">
+                    <Panel Name="PART_Container">
                         <Border
-                            x:Name="PART_Background"
+                            Name="PART_Background"
                             Background="{TemplateBinding Background}"
                             IsHitTestVisible="False" />
                         <CaptionButtons
-                            x:Name="PART_CaptionButtons"
+                            Name="PART_CaptionButtons"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Top"
                             Foreground="{TemplateBinding Foreground}" />

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -39,7 +39,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
                 <ContentPresenter
-                    x:Name="PART_ContentPresenter"
+                    Name="PART_ContentPresenter"
                     BackgroundSizing="{TemplateBinding BackgroundSizing}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="Stretch"
@@ -96,9 +96,14 @@
         </Style>
 
         <Style Selector="^:checked">
+            <Setter Property="FocusAdorner">
+                <FocusAdornerTemplate>
+                    <Border Theme="{DynamicResource AdornerLayerBorder}"
+                            Classes="Solid" />
+                </FocusAdornerTemplate>
+            </Setter>
             <Setter Property="Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedBorderBrush}" />
             <Style Selector="^.Primary">
                 <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
             </Style>
@@ -139,12 +144,9 @@
                 </Style>
             </Style>
             <Style Selector="^:pressed">
-                <Setter Property="Foreground" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedForeground}" />
                 <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBorderBrush}" />
                 <Style Selector="^.Primary">
                     <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
-                    <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBorderBrush}" />
                 </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="Background" Value="{DynamicResource ToggleButtonSecondaryCheckedPressedBackground}" />
@@ -260,9 +262,6 @@
 
         <Style Selector="^:disabled">
             <Setter Property="Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
-            <Style Selector="^:checked">
-                <Setter Property="Foreground" Value="{DynamicResource ToggleButtonCheckedDisabledForeground}" />
-            </Style>
         </Style>
 
         <Style Selector="^.Large">

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -3,23 +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 BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" 
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
-                        CornerRadius="100"/>
             </FocusAdornerTemplate>
         </Setter>
         <Setter Property="KnobTransitions">
@@ -33,12 +55,10 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid
-                    Background="{TemplateBinding Background}"
+                    RowDefinitions="Auto, *"
-                    Cursor="Hand"
-                    RowDefinitions="Auto,*"
                     ColumnDefinitions="Auto, *">
                     <ContentPresenter
-                        x:Name="PART_ContentPresenter"
+                        Name="PART_ContentPresenter"
                         Grid.Row="0" Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Margin="{DynamicResource ToggleSwitchHeaderMargin}"
@@ -49,38 +69,39 @@
                         RecognizesAccessKey="True" />
 
                     <Border
-                        x:Name="SwitchBackgroundBorder"
+                        Name="SwitchBackgroundBorder"
                         Grid.Row="1" Grid.Column="0"
                         TemplatedControl.IsTemplateFocusTarget="True"
                         Width="{DynamicResource ToggleSwitchDefaultWidth}"
                         Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                        BackgroundSizing="OuterBorderEdge"
                         BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                        BorderThickness="1"
+                        BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
-                        CornerRadius="100">
+                        CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                         <Border.Transitions>
                             <Transitions>
                                 <BrushTransition Property="Background" Duration="0:0:0.2" />
                             </Transitions>
                         </Border.Transitions>
                         <Canvas
-                            x:Name="PART_SwitchKnob"
+                            Name="PART_SwitchKnob"
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
-                                x:Name="PART_MovingKnobs"
+                                Name="PART_MovingKnobs"
                                 Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
                                 <Border
-                                    x:Name="SwitchKnobIndicator"
+                                    Name="SwitchKnobIndicator"
                                     Background="White"
-                                    BoxShadow="0 0 1 1 #222E3238"
+                                    BoxShadow="{DynamicResource ToggleSwitchIndicatorBoxShadow}"
-                                    CornerRadius="100" />
+                                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
                                 <Arc
-                                    x:Name="SwitchKnobLoadingIndicator"
+                                    Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                     StartAngle="0"
                                     SweepAngle="140"
                                     StrokeJoin="Round"
@@ -108,12 +129,12 @@
                                         </Style>
                                     </Arc.Styles>
                                 </Arc>
-                            </Grid>
+                            </Panel>
                         </Canvas>
                     </Border>
 
                     <ContentPresenter
-                        x:Name="PART_OnContentPresenter"
+                        Name="PART_OnContentPresenter"
                         Grid.Row="1" Grid.Column="1"
                         Margin="{DynamicResource ToggleSwitchOnContentMargin}"
                         HorizontalAlignment="Left"
@@ -122,7 +143,7 @@
                         Content="{TemplateBinding OnContent}"
                         ContentTemplate="{TemplateBinding OnContentTemplate}" />
                     <ContentPresenter
-                        x:Name="PART_OffContentPresenter"
+                        Name="PART_OffContentPresenter"
                         Grid.Row="1" Grid.Column="1"
                         Margin="{DynamicResource ToggleSwitchOnContentMargin}"
                         HorizontalAlignment="Left"
@@ -157,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>
 
@@ -201,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}" />
@@ -219,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}" />
@@ -235,70 +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 BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
-            </FocusAdornerTemplate>
-        </Setter>
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ToggleSwitch">
-                <Border
-                    Name="Background"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Cursor="Hand">
-                    <Panel>
-                        <Panel x:Name="PART_SwitchKnob" />
-                        <Panel x:Name="PART_MovingKnobs" />
-                        <ContentPresenter
-                            x:Name="PART_OnContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                        <ContentPresenter
-                            x: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
-                    x:Name="SwitchBackgroundBorder"
+                    Name="SwitchBackgroundBorder"
                     Background="{TemplateBinding Background}"
-                    Cursor="Hand"
                     Width="{DynamicResource ToggleSwitchDefaultWidth}"
                     Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    BackgroundSizing="OuterBorderEdge"
                     BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                    BorderThickness="1"
+                    BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
-                    CornerRadius="100">
+                    CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                     <Border.Transitions>
                         <Transitions>
                             <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -307,26 +284,26 @@
                     <Grid
                         ColumnDefinitions="*,*">
                         <Canvas
-                            x:Name="PART_SwitchKnob"
+                            Name="PART_SwitchKnob"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
-                                x:Name="PART_MovingKnobs"
+                                Name="PART_MovingKnobs"
                                 Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                 Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
                                 <Border
-                                    x:Name="SwitchKnobIndicator"
+                                    Name="SwitchKnobIndicator"
                                     Background="White"
-                                    BoxShadow="0 0 1 1 #222E3238"
+                                    BoxShadow="{DynamicResource ToggleSwitchIndicatorBoxShadow}"
-                                    CornerRadius="100" />
+                                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
                                 <Arc
-                                    x:Name="SwitchKnobLoadingIndicator"
+                                    Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                     StartAngle="0"
                                     SweepAngle="140"
                                     StrokeJoin="Round"
@@ -354,10 +331,10 @@
                                         </Style>
                                     </Arc.Styles>
                                 </Arc>
-                            </Grid>
+                            </Panel>
                         </Canvas>
                         <ContentPresenter
-                            x:Name="PART_OnContentPresenter"
+                            Name="PART_OnContentPresenter"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Center"
@@ -366,7 +343,7 @@
                             Content="{TemplateBinding OnContent}"
                             ContentTemplate="{TemplateBinding OnContentTemplate}" />
                         <ContentPresenter
-                            x:Name="PART_OffContentPresenter"
+                            Name="PART_OffContentPresenter"
                             Grid.Column="1"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Center"
@@ -393,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>