From e37f97042e18232877d1a8e62f8b046ac86acc12 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:21:36 +0800
Subject: [PATCH 01/15] feat: use vertical navigation tab control.

---
 .../Pages/AutoCompleteBoxDemo.axaml           |  5 +-
 .../Semi.Avalonia.Demo/Pages/BorderDemo.axaml | 14 +++--
 .../Semi.Avalonia.Demo/Pages/ButtonDemo.axaml |  5 +-
 .../Pages/ButtonSpinnerDemo.axaml             |  5 +-
 .../Pages/CalendarDatePickerDemo.axaml        |  2 +-
 .../Pages/CalendarDatePickerDemo.axaml.cs     |  5 --
 .../Pages/CalendarDemo.axaml                  |  2 +-
 .../Pages/CheckBoxDemo.axaml                  |  2 +-
 .../Pages/ColorPickerDemo.axaml               |  2 +-
 .../Pages/ComboBoxDemo.axaml                  |  2 +-
 .../Pages/ComboBoxDemo.axaml.cs               |  5 --
 .../Pages/DataGridDemo.axaml                  |  2 +-
 .../Pages/DatePickerDemo.axaml                |  2 +-
 .../Pages/ExpanderDemo.axaml                  | 23 +++++---
 demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml | 17 +++---
 .../Pages/ListBoxDemo.axaml                   |  2 +-
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml  |  6 +--
 .../Pages/NotificationDemo.axaml              |  5 +-
 .../Pages/NumericUpDownDemo.axaml             |  5 +-
 demo/Semi.Avalonia.Demo/Pages/Overview.axaml  |  2 +-
 .../Pages/ProgressBarDemo.axaml               |  5 +-
 .../Pages/RadioButtonDemo.axaml               | 13 ++---
 .../Pages/RefreshContainerDemo.axaml          |  5 +-
 .../Pages/RepeatButtonDemo.axaml              | 32 +++++++----
 .../Semi.Avalonia.Demo/Pages/SliderDemo.axaml |  5 +-
 .../Pages/SplitViewDemo.axaml                 |  1 -
 .../Pages/TabControlDemo.axaml                |  2 +-
 .../Pages/TimePickerDemo.axaml                |  2 +-
 .../Pages/ToggleButtonDemo.axaml              |  2 +-
 .../Pages/ToggleSwitchDemo.axaml              |  2 +-
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  | 13 ++++-
 demo/Semi.Avalonia.Demo/Views/TabMenu.axaml   | 53 +++++++++++++++++++
 32 files changed, 152 insertions(+), 96 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Views/TabMenu.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
index 8b249b9..65e30b9 100644
--- a/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
@@ -11,10 +11,7 @@
     <Design.DataContext>
         <local:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <StackPanel.Styles>
             <Style Selector="AutoCompleteBox">
                 <Setter Property="Width" Value="300" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/BorderDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/BorderDemo.axaml
index 04442d8..560a9e7 100644
--- a/demo/Semi.Avalonia.Demo/Pages/BorderDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/BorderDemo.axaml
@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Spacing="20">
         <Border Theme="{StaticResource CardBorder}">
             <TextBlock>Card</TextBlock>
         </Border>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
index 066f2b7..fdd9d20 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock>Light (Default)</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <Button Classes="Primary">Primary</Button>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
index a7c375f..44d5cc6 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
index d9c97c1..033d65e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
         <CalendarDatePicker
             Name="DatePicker2"
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs
index 08e4a31..405ba9b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDatePickerDemo.axaml.cs
@@ -10,9 +10,4 @@ public partial class CalendarDatePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml
index c942a4f..3a28d0b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CalendarDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Calendar />
         <Calendar SelectionMode="SingleRange" />
     </StackPanel>
diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 8a5350a..3ae1044 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="48" HorizontalAlignment="Left">
+    <StackPanel Spacing="20">
         <CheckBox>Unchecked</CheckBox>
         <CheckBox IsEnabled="False">Unchecked</CheckBox>
         <CheckBox IsChecked="True">Checked</CheckBox>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 5435065..fd16eff 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -8,7 +8,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
+    <StackPanel Spacing="20">
         <StackPanel
             VerticalAlignment="Top"
             Orientation="Horizontal"
diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
index bc2a376..eca2b5e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <ComboBox Width="150">
             <TextBlock>AAA</TextBlock>
             <TextBlock>BBB</TextBlock>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
index 180a1ab..80b05bc 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml.cs
@@ -10,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
index cd5c9e8..ca3b82b 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
@@ -8,7 +8,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <TabControl Grid.Row="2">
+    <TabControl>
         <TabItem Header="DataGrid">
             <DockPanel>
                 <CheckBox
diff --git a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
index 968daa2..90e3b0f 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DatePickerDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <DatePicker />
         <DatePicker DayFormat="d (ddd)" YearVisible="False" />
         <DatePicker IsEnabled="False" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
index 3b4a8b0..4b6f0d0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Spacing="20">
         <StackPanel>
             <Expander Header="Expander 1">
                 <TextBlock Text="Hello Avalonia!" />
@@ -17,13 +21,16 @@
         </StackPanel>
         <Grid ColumnDefinitions="* *">
             <Expander
-                Height="200" ExpandDirection="Right"
+                Height="200"
+                ExpandDirection="Right"
                 Header="Right">
                 <TextBlock>Right Content</TextBlock>
             </Expander>
             <Expander
-                Grid.Column="1" Height="200"
-                HorizontalAlignment="Right" ExpandDirection="Left"
+                Grid.Column="1"
+                Height="200"
+                HorizontalAlignment="Right"
+                ExpandDirection="Left"
                 Header="Left">
                 <TextBlock>Left Content</TextBlock>
             </Expander>
diff --git a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
index d55be47..d5adc3d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
@@ -1,11 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
+    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
     <StackPanel
-        Width="500" Margin="20"
-        HorizontalAlignment="Left" Spacing="20">
+        Width="500"
+        HorizontalAlignment="Left"
+        Spacing="20">
         <StackPanel.Styles>
             <Style Selector="Label">
                 <Setter Property="Margin" Value="4" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml
index c3099de..ef2e0da 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ListBox Margin="20">
+    <ListBox>
         <ListBoxItem>Item 1</ListBoxItem>
         <ListBoxItem>Item 2</ListBoxItem>
         <ListBoxItem IsEnabled="False">Item 3</ListBoxItem>
diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index ab044b7..fb31939 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <Menu>
             <MenuItem Header="_First">
                 <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
@@ -97,7 +97,7 @@
                     <MenuItem Header="Menu Item that won't close on click" StaysOpenOnClick="True" />
                 </ContextMenu>
             </Border.ContextMenu>
-            <TextBlock Text="Context Menu" />
+            <TextBlock Text="Right Click to show Context Menu" />
         </Border>
         <Border>
             <Border.ContextFlyout>
@@ -122,7 +122,7 @@
                     </MenuItem>
                 </MenuFlyout>
             </Border.ContextFlyout>
-            <TextBlock Text="Context Flyout" />
+            <TextBlock Text="Right Click to show Context Flyout" />
         </Border>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml
index 4b0d6bf..8a8d3d0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NotificationDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="300,20,20,20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Button Click="InfoButton_OnClick" Content="Information" />
         <Button Click="InfoButton_OnClick" Content="Success" />
         <Button Click="InfoButton_OnClick" Content="Warning" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
index 2cbb6e0..4057140 100644
--- a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <NumericUpDown
             Width="200"
             Maximum="100"
diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
index 5c909af..2e100a2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -8,7 +8,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel Margin="10" Spacing="5">
+        <StackPanel Spacing="5">
             <TextBlock
                 HorizontalAlignment="Center"
                 Classes="H4"
diff --git a/demo/Semi.Avalonia.Demo/Pages/ProgressBarDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ProgressBarDemo.axaml
index 19f39c0..8148e2e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ProgressBarDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ProgressBarDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <ProgressBar
             Width="200"
             Maximum="100"
diff --git a/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
index bb655cd..e93efa0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -1,10 +1,11 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
-    <StackPanel
-        Margin="20" HorizontalAlignment="Left"
-        Spacing="20">
+    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock Text="Radio Buttons" />
         <StackPanel>
             <RadioButton>111</RadioButton>
diff --git a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
index 0f49d4d..de3762c 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RefreshContainerDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <RefreshContainer Name="container">
             <TextBlock Text="Content" />
         </RefreshContainer>
diff --git a/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
index 9e4de28..8064cfc 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RepeatButtonDemo.axaml
@@ -1,11 +1,13 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800"
-             d:DesignHeight="450"
-             x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo">
-    <StackPanel Margin="20" HorizontalAlignment="Left" Spacing="20">
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock>Light (Default)</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <RepeatButton Classes="Primary">Primary</RepeatButton>
@@ -22,7 +24,12 @@
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
-            <RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Primary"
+                IsEnabled="False"
+                Theme="{DynamicResource SolidRepeatButton}">
+                Danger
+            </RepeatButton>
         </StackPanel>
         <TextBlock>Borderless</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
@@ -31,7 +38,12 @@
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
-            <RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
+            <RepeatButton
+                Classes="Primary"
+                IsEnabled="False"
+                Theme="{DynamicResource BorderlessRepeatButton}">
+                Danger
+            </RepeatButton>
         </StackPanel>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
index 9236e51..c526b1e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <Slider
             Width="300"
             Maximum="100"
diff --git a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
index 5d15f93..c8f65e3 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
@@ -11,7 +11,6 @@
         <Grid ColumnDefinitions="*,400">
             <StackPanel
                 Grid.Column="1"
-                Margin="5"
                 Orientation="Vertical"
                 Spacing="4">
                 <ToggleButton
diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index 7b2fde7..94ba2ca 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
+    <StackPanel Spacing="20">
         <Border Theme="{StaticResource CardBorder}">
             <TabControl TabStripPlacement="Top">
                 <TabItem Content="Hello 1" Header="Tab 1" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
index b97b5b5..42baa9a 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TimePickerDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <TimePicker />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
index f56bcbd..47ea6cf 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleButtonDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20">
+    <StackPanel>
         <TextBlock Text="Toggle Button" />
         <StackPanel Orientation="Horizontal" Spacing="20">
             <ToggleButton>Primary</ToggleButton>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index e46c580..086858a 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Margin="20" Spacing="20">
+    <StackPanel Spacing="20">
         <ToggleSwitch
             Content="Content"
             OffContent="OffContent"
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index c74524b..608e5e0 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -8,10 +8,19 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="TabMenu.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <TabControl
-        Margin="8"
+        Margin="8,20,0,20"
+        Padding="20,0,0,0"
         HorizontalAlignment="Stretch"
-        TabStripPlacement="Left">
+        TabStripPlacement="Left"
+        Theme="{DynamicResource NavigationTab}">
         <TabItem Header="Overview">
             <pages:Overview />
         </TabItem>
diff --git a/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml b/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
new file mode 100644
index 0000000..5c7a38f
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
@@ -0,0 +1,53 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="NavigationTab" TargetType="TabControl">
+        <Setter Property="TabControl.Template">
+            <!--    -->
+            <ControlTemplate TargetType="TabControl">
+                <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel>
+                        <Grid DockPanel.Dock="Left" RowDefinitions="Auto, *">
+                            <TextBlock
+                                Grid.Row="0"
+                                Margin="8,0,8,8"
+                                HorizontalAlignment="Center"
+                                Classes="H5"
+                                Text="Semi Avalonia Demo"
+                                Theme="{DynamicResource TitleTextBlock}" />
+                            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+                                <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                                    <ItemsPresenter Name="PART_ItemsPresenter">
+                                        <ItemsPresenter.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <StackPanel />
+                                            </ItemsPanelTemplate>
+                                        </ItemsPresenter.ItemsPanel>
+                                    </ItemsPresenter>
+                                    <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                                </Panel>
+                            </ScrollViewer>
+                        </Grid>
+                        <ContentPresenter
+                            Name="PART_SelectedContentHost"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                    </DockPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Width" Value="1" />
+            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
+            <Setter Property="Border.HorizontalAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

From c9cc49a67cc6a69acd55cbbc5db2c47956d8cf14 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:26:12 +0800
Subject: [PATCH 02/15] fix: fix checkbox vertical alignment.

---
 src/Semi.Avalonia/Controls/CheckBox.axaml | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index e1d9e21..8386807 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -15,15 +15,18 @@
             <ControlTemplate TargetType="CheckBox">
                 <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
                     <Border
-                        x:Name="PART_Border" Grid.ColumnSpan="2"
+                        x:Name="PART_Border"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="2"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
 
                     <Grid
-                        Grid.Column="0" Margin="0,2,0,0"
-                        VerticalAlignment="Top">
+                        Grid.Column="0"
+                        Margin="0,2,0,0"
+                        VerticalAlignment="Center">
                         <Border
                             x:Name="NormalRectangle"
                             Width="{DynamicResource CheckboxBoxWidth}"
@@ -38,20 +41,24 @@
                             <Panel>
                                 <Panel Width="{DynamicResource CheckboxBoxWidth}" Height="{DynamicResource CheckboxBoxWidth}" />
                                 <Path
-                                    x:Name="CheckGlyph" VerticalAlignment="Center"
+                                    x:Name="CheckGlyph"
+                                    VerticalAlignment="Center"
                                     Fill="{DynamicResource CheckboxGlyphFill}"
-                                    Opacity="0" Stretch="Uniform" />
+                                    Opacity="0"
+                                    Stretch="Uniform" />
                             </Panel>
                         </Viewbox>
                     </Grid>
                     <ContentPresenter
-                        x:Name="ContentPresenter" Grid.Column="1"
+                        x:Name="ContentPresenter"
+                        Grid.Column="1"
                         Margin="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="Top"
+                        VerticalAlignment="Center"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
-                        RecognizesAccessKey="True" TextWrapping="Wrap" />
+                        RecognizesAccessKey="True"
+                        TextWrapping="Wrap" />
                 </Grid>
             </ControlTemplate>
         </Setter>

From b591c96968acca22fea3ec3f20bf494f47127f99 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:28:58 +0800
Subject: [PATCH 03/15] Fix AutoCompleteBox default Border. Fix TextBox
 ClearButton layout.

---
 src/Semi.Avalonia/Controls/AutoCompleteBox.axaml |  1 +
 src/Semi.Avalonia/Controls/TextBox.axaml         | 16 +++++++---------
 .../Themes/Dark/AutoCompleteBox.axaml            |  1 +
 .../Themes/Light/AutoCompleteBox.axaml           |  1 +
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml b/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
index 19dc917..64a6416 100644
--- a/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
@@ -8,6 +8,7 @@
     <ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
         <Setter Property="Background" Value="{DynamicResource AutoCompleteBoxDefaultBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource AutoCompleteBoxDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource AutoCompleteBoxCornerRadius}" />
         <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="600" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Template">
diff --git a/src/Semi.Avalonia/Controls/TextBox.axaml b/src/Semi.Avalonia/Controls/TextBox.axaml
index 3d67fd1..c8afe84 100644
--- a/src/Semi.Avalonia/Controls/TextBox.axaml
+++ b/src/Semi.Avalonia/Controls/TextBox.axaml
@@ -48,15 +48,13 @@
                 <Setter Property="Button.Template">
                     <ControlTemplate TargetType="Button">
                         <!--  Background must be transparent or hit test will fail  -->
-                        <Label Background="Transparent">
-                            <Label.Content>
-                                <PathIcon
-                                    Width="16"
-                                    Height="16"
-                                    Data="{DynamicResource TextBoxClearButtonData}"
-                                    Foreground="{TemplateBinding Foreground}" />
-                            </Label.Content>
-                        </Label>
+                        <ContentControl Background="Transparent">
+                            <PathIcon
+                                Width="16"
+                                Height="16"
+                                Data="{DynamicResource TextBoxClearButtonData}"
+                                Foreground="{TemplateBinding Foreground}" />
+                        </ContentControl>
                     </ControlTemplate>
                 </Setter>
                 <Style Selector="^:pointerover">
diff --git a/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml b/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
index b969a17..81ae115 100644
--- a/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/AutoCompleteBox.axaml
@@ -9,4 +9,5 @@
     <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
     <SolidColorBrush x:Key="AutoCompleteBoxBorderlessBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="AutoCompleteBoxBorderlessBackground" Opacity="0.05" Color="#E6E8EA" />
+    <CornerRadius x:Key="AutoCompleteBoxCornerRadius">3</CornerRadius>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml b/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
index 2a44670..46dc2f1 100644
--- a/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
@@ -9,4 +9,5 @@
     <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
     <SolidColorBrush x:Key="AutoCompleteBoxBorderlessBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="AutoCompleteBoxBorderlessBackground" Opacity="0.05" Color="#2E3238" />
+    <CornerRadius x:Key="AutoCompleteBoxCornerRadius">3</CornerRadius>
 </ResourceDictionary>

From 069804690427731325679c2510b57e141b4c77f7 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:37:22 +0800
Subject: [PATCH 04/15] fix: fix file chooser layout alignment.

---
 .../Controls/ManagedFileChooser.axaml             | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
index 2f03eac..6671456 100644
--- a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
+++ b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
@@ -23,6 +23,7 @@
             <ControlTemplate TargetType="dialogs:ManagedFileChooser">
                 <DockPanel>
                     <Border
+                        Margin="8"
                         Padding="4"
                         DockPanel.Dock="Left"
                         Theme="{DynamicResource CardBorder}">
@@ -47,7 +48,7 @@
                     </Border>
                     <DockPanel
                         x:Name="NavBar"
-                        Margin="8,5,8,0"
+                        Margin="8,8,8,0"
                         VerticalAlignment="Center"
                         DockPanel.Dock="Top">
                         <Button
@@ -89,28 +90,32 @@
                             HorizontalAlignment="Right"
                             Rows="1">
                             <Button
-                                Margin="8,0"
+                                Margin="8,0,0,0"
                                 Classes="Primary"
                                 Command="{Binding Ok}">
                                 OK
                             </Button>
                             <Button
-                                Margin="8,0"
+                                Margin="8,0,0,0"
                                 Classes="Danger"
                                 Command="{Binding Cancel}">
                                 Cancel
                             </Button>
                         </UniformGrid>
                     </DockPanel>
-                    <Border Padding="8" Theme="{DynamicResource CardBorder}">
+                    <Border
+                        Margin="8"
+                        Padding="8"
+                        Theme="{DynamicResource CardBorder}">
                         <DockPanel Grid.IsSharedSizeScope="True">
                             <Grid
-                                Margin="0,0,0,8"
                                 HorizontalAlignment="Stretch"
                                 ClipToBounds="True"
                                 DockPanel.Dock="Top">
                                 <Grid.Styles>
                                     <Style Selector="TextBlock">
+                                        <Setter Property="Height" Value="24" />
+                                        <Setter Property="VerticalAlignment" Value="Center" />
                                         <Setter Property="Margin" Value="8 0 0 0 " />
                                     </Style>
                                 </Grid.Styles>

From bef55df65b02077c3437708095b0f8705f64bb50 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:43:55 +0800
Subject: [PATCH 05/15] fix: simplify checkbox layout.

---
 src/Semi.Avalonia/Controls/CheckBox.axaml     | 26 +++++++------------
 src/Semi.Avalonia/Themes/Dark/CheckBox.axaml  |  5 ++++
 src/Semi.Avalonia/Themes/Light/CheckBox.axaml |  8 +++++-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index 8386807..9bab81d 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -36,18 +36,12 @@
                             BorderThickness="{DynamicResource CheckboxBoxBorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}"
                             UseLayoutRounding="False" />
+                        <PathIcon
+                            Name="CheckGlyph"
+                            Width="{DynamicResource CheckboxBoxGlyphWidth}"
+                            Height="{DynamicResource CheckboxBoxGlyphHeight}"
+                            Foreground="{DynamicResource CheckboxGlyphFill}" />
 
-                        <Viewbox Height="{DynamicResource CheckboxBoxWidth}" UseLayoutRounding="False">
-                            <Panel>
-                                <Panel Width="{DynamicResource CheckboxBoxWidth}" Height="{DynamicResource CheckboxBoxWidth}" />
-                                <Path
-                                    x:Name="CheckGlyph"
-                                    VerticalAlignment="Center"
-                                    Fill="{DynamicResource CheckboxGlyphFill}"
-                                    Opacity="0"
-                                    Stretch="Uniform" />
-                            </Panel>
-                        </Viewbox>
                     </Grid>
                     <ContentPresenter
                         x:Name="ContentPresenter"
@@ -96,9 +90,8 @@
                 <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
             </Style>
 
-            <Style Selector="^ /template/ Path#CheckGlyph">
-                <Setter Property="Data" Value="M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z" />
-                <Setter Property="Width" Value="9" />
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
@@ -140,9 +133,8 @@
                 <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
             </Style>
 
-            <Style Selector="^ /template/ Path#CheckGlyph">
-                <Setter Property="Data" Value="M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z" />
-                <Setter Property="Width" Value="9" />
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
diff --git a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
index e483028..1b0f815 100644
--- a/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CheckBox.axaml
@@ -30,9 +30,14 @@
     <sys:Double x:Key="CheckboxFontSize">14</sys:Double>
     <sys:Double x:Key="CheckboxBoxWidth">16</sys:Double>
     <sys:Double x:Key="CheckboxBoxHeight">16</sys:Double>
+    <sys:Double x:Key="CheckboxBoxGlyphWidth">12</sys:Double>
+    <sys:Double x:Key="CheckboxBoxGlyphHeight">12</sys:Double>
     <FontWeight x:Key="CheckboxFontWeight">400</FontWeight>
 
     <CornerRadius x:Key="CheckboxBoxCornerRadius">3</CornerRadius>
     <Thickness x:Key="CheckboxContentMargin">8 0 0 0</Thickness>
     <Thickness x:Key="CheckboxBoxBorderThickness">1</Thickness>
+
+    <PathGeometry x:Key="CheckBoxCheckGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
+    <PathGeometry x:Key="CheckBoxIndeterminateGlyph">M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z</PathGeometry>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
index b0ceafe..b87b68c 100644
--- a/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CheckBox.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <SolidColorBrush x:Key="CheckboxForeground" Color="#1C1F23" />
     <SolidColorBrush x:Key="CheckboxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
@@ -29,9 +30,14 @@
     <sys:Double x:Key="CheckboxFontSize">14</sys:Double>
     <sys:Double x:Key="CheckboxBoxWidth">16</sys:Double>
     <sys:Double x:Key="CheckboxBoxHeight">16</sys:Double>
+    <sys:Double x:Key="CheckboxBoxGlyphWidth">12</sys:Double>
+    <sys:Double x:Key="CheckboxBoxGlyphHeight">12</sys:Double>
     <FontWeight x:Key="CheckboxFontWeight">400</FontWeight>
 
     <CornerRadius x:Key="CheckboxBoxCornerRadius">3</CornerRadius>
     <Thickness x:Key="CheckboxContentMargin">8 0 0 0</Thickness>
     <Thickness x:Key="CheckboxBoxBorderThickness">1</Thickness>
+
+    <PathGeometry x:Key="CheckBoxCheckGlyph">M17.4111 7.30848C18.0692 7.81171 18.1947 8.75312 17.6915 9.41119L11.1915 17.9112C10.909 18.2806 10.4711 18.4981 10.0061 18.5C9.54105 18.5019 9.10143 18.288 8.81592 17.9209L5.31592 13.4209C4.80731 12.767 4.92512 11.8246 5.57904 11.316C6.23296 10.8074 7.17537 10.9252 7.68398 11.5791L9.98988 14.5438L15.3084 7.58884C15.8116 6.93077 16.7531 6.80525 17.4111 7.30848Z</PathGeometry>
+    <PathGeometry x:Key="CheckBoxIndeterminateGlyph">M5 12.5C5 11.6716 5.67157 11 6.5 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H6.5C5.67157 14 5 13.3284 5 12.5Z</PathGeometry>
 </ResourceDictionary>

From 7fb3460e02e06706564eb46c79fcc83447fada61 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 22:55:33 +0800
Subject: [PATCH 06/15] fix: more fix on file chooser.

---
 src/Semi.Avalonia/Controls/ManagedFileChooser.axaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
index 6671456..6be3470 100644
--- a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
+++ b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
@@ -70,12 +70,12 @@
                     <DockPanel Margin="8,0,8,8" DockPanel.Dock="Bottom">
                         <DockPanel Margin="0,0,0,8" DockPanel.Dock="Top">
                             <ComboBox
+                                Margin="8,0,0,0"
                                 DockPanel.Dock="Right"
                                 IsVisible="{Binding ShowFilters}"
                                 Items="{Binding Filters}"
                                 SelectedItem="{Binding SelectedFilter}" />
                             <TextBox
-                                Margin="0,0,8,0"
                                 IsVisible="{Binding !SelectingFolder}"
                                 Text="{Binding FileName}"
                                 Watermark="File name" />

From ee4a9c0e9a01ddba01881dc90e2f0f43ca072ad6 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 9 Feb 2023 23:19:12 +0800
Subject: [PATCH 07/15] fix: add default theme textelement handling.

---
 src/Semi.Avalonia/Controls/ThemeVariantScope.axaml |  3 +++
 src/Semi.Avalonia/Themes/Base.axaml                | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Semi.Avalonia/Controls/ThemeVariantScope.axaml b/src/Semi.Avalonia/Controls/ThemeVariantScope.axaml
index 8540fc0..c7df298 100644
--- a/src/Semi.Avalonia/Controls/ThemeVariantScope.axaml
+++ b/src/Semi.Avalonia/Controls/ThemeVariantScope.axaml
@@ -2,5 +2,8 @@
     <!--  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}" />
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Base.axaml b/src/Semi.Avalonia/Themes/Base.axaml
index e3c2410..c195896 100644
--- a/src/Semi.Avalonia/Themes/Base.axaml
+++ b/src/Semi.Avalonia/Themes/Base.axaml
@@ -1,7 +1,16 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <!--  Add Resources Here  -->
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <SolidColorBrush x:Key="DefaultForeground" Color="#1C1F23" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <SolidColorBrush x:Key="DefaultForeground" Color="#F9F9F9" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
     <sys:Double x:Key="DefaultFontSize">14</sys:Double>
     <FontFamily x:Key="DefaultFontFamily">Inter, -apple-system,BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
     <FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>

From 43db0c0293acf2c1849a725c9868881197db7e1d Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 00:34:48 +0800
Subject: [PATCH 08/15] feat: add header for demo.

---
 demo/Semi.Avalonia.Demo/Pages/Overview.axaml  |  12 -
 .../{Views => Themes}/TabMenu.axaml           |  33 +--
 .../Themes/ToggleButton.axaml                 |  33 +++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  | 272 ++++++++++--------
 .../Views/MainView.axaml.cs                   |  13 +
 5 files changed, 211 insertions(+), 152 deletions(-)
 rename demo/Semi.Avalonia.Demo/{Views => Themes}/TabMenu.axaml (57%)
 create mode 100644 demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
index 2e100a2..a2a8569 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -9,18 +9,6 @@
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
         <StackPanel Spacing="5">
-            <TextBlock
-                HorizontalAlignment="Center"
-                Classes="H4"
-                Text="Welcome to Semi Avalonia"
-                Theme="{StaticResource TitleTextBlock}" />
-
-            <ToggleSwitch
-                Content="Switch Theme"
-                IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
-                OffContent="Dark"
-                OnContent="Default" />
-
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
diff --git a/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml b/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
similarity index 57%
rename from demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
rename to demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
index 5c7a38f..0c9ec39 100644
--- a/demo/Semi.Avalonia.Demo/Views/TabMenu.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
@@ -12,27 +12,18 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <Grid DockPanel.Dock="Left" RowDefinitions="Auto, *">
-                            <TextBlock
-                                Grid.Row="0"
-                                Margin="8,0,8,8"
-                                HorizontalAlignment="Center"
-                                Classes="H5"
-                                Text="Semi Avalonia Demo"
-                                Theme="{DynamicResource TitleTextBlock}" />
-                            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
-                                <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
-                                    <ItemsPresenter Name="PART_ItemsPresenter">
-                                        <ItemsPresenter.ItemsPanel>
-                                            <ItemsPanelTemplate>
-                                                <StackPanel />
-                                            </ItemsPanelTemplate>
-                                        </ItemsPresenter.ItemsPanel>
-                                    </ItemsPresenter>
-                                    <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
-                                </Panel>
-                            </ScrollViewer>
-                        </Grid>
+                        <ScrollViewer DockPanel.Dock="Left" VerticalScrollBarVisibility="Auto">
+                            <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                                <ItemsPresenter Name="PART_ItemsPresenter">
+                                    <ItemsPresenter.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <StackPanel />
+                                        </ItemsPanelTemplate>
+                                    </ItemsPresenter.ItemsPanel>
+                                </ItemsPresenter>
+                                <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                            </Panel>
+                        </ScrollViewer>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
                             Margin="{TemplateBinding Padding}"
diff --git a/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
new file mode 100644
index 0000000..6a113d4
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml
@@ -0,0 +1,33 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="ThemeToggleButton" 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="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}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+        </Style>
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ PathIcon">
+                <Setter Property="PathIcon.Data" Value="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" />
+            </Style>
+
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 608e5e0..0074644 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -11,126 +11,160 @@
     <UserControl.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="TabMenu.axaml" />
+                <ResourceInclude Source="../Themes/TabMenu.axaml" />
+                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
-    <TabControl
-        Margin="8,20,0,20"
-        Padding="20,0,0,0"
-        HorizontalAlignment="Stretch"
-        TabStripPlacement="Left"
-        Theme="{DynamicResource NavigationTab}">
-        <TabItem Header="Overview">
-            <pages:Overview />
-        </TabItem>
-        <TabItem Header="AutoCompleteBox">
-            <pages:AutoCompleteBoxDemo />
-        </TabItem>
-        <TabItem Header="Border">
-            <pages:BorderDemo />
-        </TabItem>
-        <TabItem Header="Button">
-            <pages:ButtonDemo />
-        </TabItem>
-        <TabItem Header="ButtonSpinner">
-            <pages:ButtonSpinnerDemo />
-        </TabItem>
-        <TabItem Header="Calendar">
-            <pages:CalendarDemo />
-        </TabItem>
-        <TabItem Header="CalendarDatePicker">
-            <pages:CalendarDatePickerDemo />
-        </TabItem>
-        <TabItem Header="Carousel">
-            <pages:CarouselDemo />
-        </TabItem>
-        <TabItem Header="CheckBox">
-            <pages:CheckBoxDemo />
-        </TabItem>
-        <TabItem Header="ColorPicker">
-            <pages:ColorPickerDemo />
-        </TabItem>
-        <TabItem Header="ComboBox">
-            <pages:ComboBoxDemo />
-        </TabItem>
-        <TabItem Header="DataGrid">
-            <pages:DataGridDemo />
-        </TabItem>
-        <TabItem Header="DatePicker">
-            <pages:DatePickerDemo />
-        </TabItem>
-        <TabItem Header="Expander">
-            <pages:ExpanderDemo />
-        </TabItem>
-        <TabItem Header="Flyout">
-            <pages:FlyoutDemo />
-        </TabItem>
-        <TabItem Header="GridSplitter">
-            <pages:GridSplitter />
-        </TabItem>
-        <TabItem Header="Label">
-            <pages:LabelDemo />
-        </TabItem>
-        <TabItem Header="ListBox">
-            <pages:ListBoxDemo />
-        </TabItem>
-        <TabItem Header="ManagedFileChooser">
-            <pages:ManagedFileChooserDemo />
-        </TabItem>
-        <TabItem Header="Menu">
-            <pages:MenuDemo />
-        </TabItem>
-        <TabItem Header="Notification">
-            <pages:NotificationDemo />
-        </TabItem>
-        <TabItem Header="NumericUpDown">
-            <pages:NumericUpDownDemo />
-        </TabItem>
-        <TabItem Header="ProgressBar">
-            <pages:ProgressBarDemo />
-        </TabItem>
-        <TabItem Header="RadioButton">
-            <pages:RadioButtonDemo />
-        </TabItem>
-        <TabItem Header="RefreshContainer">
-            <pages:RefreshContainerDemo />
-        </TabItem>
-        <TabItem Header="RepeatButton">
-            <pages:RepeatButtonDemo />
-        </TabItem>
-        <TabItem Header="Slider">
-            <pages:SliderDemo />
-        </TabItem>
-        <TabItem Header="SplitView">
-            <pages:SplitViewDemo />
-        </TabItem>
-        <TabItem Header="TabControl">
-            <pages:TabControlDemo />
-        </TabItem>
-        <TabItem Header="TextBlock">
-            <pages:TextBlockDemo />
-        </TabItem>
-        <TabItem Header="TextBox">
-            <pages:TextBoxDemo />
-        </TabItem>
-        <TabItem Header="ThemeVariantScope">
-            <pages:ThemeVariantDemo />
-        </TabItem>
-        <TabItem Header="TimePicker">
-            <pages:TimePickerDemo />
-        </TabItem>
-        <TabItem Header="ToggleButton">
-            <pages:ToggleButtonDemo />
-        </TabItem>
-        <TabItem Header="ToggleSwitch">
-            <pages:ToggleSwitchDemo />
-        </TabItem>
-        <TabItem Header="ToolTip">
-            <pages:ToolTipDemo />
-        </TabItem>
-        <TabItem Header="TreeView">
-            <pages:TreeViewDemo />
-        </TabItem>
-    </TabControl>
+    <Grid RowDefinitions="Auto, *">
+        <Border
+            Margin="8"
+            Padding="12,4"
+            Theme="{DynamicResource CardBorder}">
+            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                    <TextBlock
+                        VerticalAlignment="Center"
+                        Classes="H6"
+                        Text="Semi Avalonia"
+                        Theme="{DynamicResource TitleTextBlock}" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Text="/" />
+                    <TextBlock
+                        Margin="8,0"
+                        VerticalAlignment="Center"
+                        Classes="Secondary"
+                        Text="{Binding #tab.SelectedItem.Header}" />
+                </StackPanel>
+                <ToggleButton
+                    Grid.Column="1"
+                    IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
+                    Theme="{DynamicResource ThemeToggleButton}" />
+            </Grid>
+
+        </Border>
+        <TabControl
+            Name="tab"
+            Grid.Row="1"
+            Margin="8"
+            Padding="20,0,0,0"
+            HorizontalAlignment="Stretch"
+            TabStripPlacement="Left"
+            Theme="{DynamicResource NavigationTab}">
+            <TabItem Header="Overview">
+                <pages:Overview />
+            </TabItem>
+            <TabItem Header="AutoCompleteBox">
+                <pages:AutoCompleteBoxDemo />
+            </TabItem>
+            <TabItem Header="Border">
+                <pages:BorderDemo />
+            </TabItem>
+            <TabItem Header="Button">
+                <pages:ButtonDemo />
+            </TabItem>
+            <TabItem Header="ButtonSpinner">
+                <pages:ButtonSpinnerDemo />
+            </TabItem>
+            <TabItem Header="Calendar">
+                <pages:CalendarDemo />
+            </TabItem>
+            <TabItem Header="CalendarDatePicker">
+                <pages:CalendarDatePickerDemo />
+            </TabItem>
+            <TabItem Header="Carousel">
+                <pages:CarouselDemo />
+            </TabItem>
+            <TabItem Header="CheckBox">
+                <pages:CheckBoxDemo />
+            </TabItem>
+            <TabItem Header="ColorPicker">
+                <pages:ColorPickerDemo />
+            </TabItem>
+            <TabItem Header="ComboBox">
+                <pages:ComboBoxDemo />
+            </TabItem>
+            <TabItem Header="DataGrid">
+                <pages:DataGridDemo />
+            </TabItem>
+            <TabItem Header="DatePicker">
+                <pages:DatePickerDemo />
+            </TabItem>
+            <TabItem Header="Expander">
+                <pages:ExpanderDemo />
+            </TabItem>
+            <TabItem Header="Flyout">
+                <pages:FlyoutDemo />
+            </TabItem>
+            <TabItem Header="GridSplitter">
+                <pages:GridSplitter />
+            </TabItem>
+            <TabItem Header="Label">
+                <pages:LabelDemo />
+            </TabItem>
+            <TabItem Header="ListBox">
+                <pages:ListBoxDemo />
+            </TabItem>
+            <TabItem Header="ManagedFileChooser">
+                <pages:ManagedFileChooserDemo />
+            </TabItem>
+            <TabItem Header="Menu">
+                <pages:MenuDemo />
+            </TabItem>
+            <TabItem Header="Notification">
+                <pages:NotificationDemo />
+            </TabItem>
+            <TabItem Header="NumericUpDown">
+                <pages:NumericUpDownDemo />
+            </TabItem>
+            <TabItem Header="ProgressBar">
+                <pages:ProgressBarDemo />
+            </TabItem>
+            <TabItem Header="RadioButton">
+                <pages:RadioButtonDemo />
+            </TabItem>
+            <TabItem Header="RefreshContainer">
+                <pages:RefreshContainerDemo />
+            </TabItem>
+            <TabItem Header="RepeatButton">
+                <pages:RepeatButtonDemo />
+            </TabItem>
+            <TabItem Header="Slider">
+                <pages:SliderDemo />
+            </TabItem>
+            <TabItem Header="SplitView">
+                <pages:SplitViewDemo />
+            </TabItem>
+            <TabItem Header="TabControl">
+                <pages:TabControlDemo />
+            </TabItem>
+            <TabItem Header="TextBlock">
+                <pages:TextBlockDemo />
+            </TabItem>
+            <TabItem Header="TextBox">
+                <pages:TextBoxDemo />
+            </TabItem>
+            <TabItem Header="ThemeVariantScope">
+                <pages:ThemeVariantDemo />
+            </TabItem>
+            <TabItem Header="TimePicker">
+                <pages:TimePickerDemo />
+            </TabItem>
+            <TabItem Header="ToggleButton">
+                <pages:ToggleButtonDemo />
+            </TabItem>
+            <TabItem Header="ToggleSwitch">
+                <pages:ToggleSwitchDemo />
+            </TabItem>
+            <TabItem Header="ToolTip">
+                <pages:ToolTipDemo />
+            </TabItem>
+            <TabItem Header="TreeView">
+                <pages:TreeViewDemo />
+            </TabItem>
+        </TabControl>
+    </Grid>
+
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
index 5464c27..b48ee71 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
@@ -1,4 +1,7 @@
+using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Views;
 
@@ -8,4 +11,14 @@ public partial class MainView : UserControl
     {
         InitializeComponent();
     }
+
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+        if (app is not null)
+        {
+            var theme = app.ActualThemeVariant;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Default : ThemeVariant.Dark;
+        }
+    }
 }
\ No newline at end of file

From 0d306bdf518c04cdf96e95810ab38cabccf666fc Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 00:49:07 +0800
Subject: [PATCH 09/15] fix: fix theme toggle.

---
 demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
index b48ee71..3a69c9c 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
@@ -18,7 +18,7 @@ public partial class MainView : UserControl
         if (app is not null)
         {
             var theme = app.ActualThemeVariant;
-            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Default : ThemeVariant.Dark;
+            app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
         }
     }
 }
\ No newline at end of file

From f8188a43bcb340183fef619679fbb84c62dd3b40 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 01:17:30 +0800
Subject: [PATCH 10/15] fix: fix split button separator.

---
 demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml | 6 +++---
 src/Semi.Avalonia/Controls/SplitButton.axaml   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
index fdd9d20..bbd60b0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
@@ -46,7 +46,7 @@
             </Button>
         </StackPanel>
         <TextBlock>DropdownButton</TextBlock>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -72,7 +72,7 @@
                 </DropDownButton.Flyout>
             </DropDownButton>
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <SplitButton Content="Submit">
                 <SplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
@@ -90,7 +90,7 @@
                 Content="Submit"
                 IsEnabled="False" />
         </StackPanel>
-        <StackPanel Orientation="Horizontal">
+        <StackPanel Orientation="Horizontal" Spacing="8">
             <ToggleSplitButton Content="Submit">
                 <ToggleSplitButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
diff --git a/src/Semi.Avalonia/Controls/SplitButton.axaml b/src/Semi.Avalonia/Controls/SplitButton.axaml
index f4cf5ae..906a5eb 100644
--- a/src/Semi.Avalonia/Controls/SplitButton.axaml
+++ b/src/Semi.Avalonia/Controls/SplitButton.axaml
@@ -46,7 +46,7 @@
                         x:Name="SeparatorBorder"
                         Grid.Column="1"
                         Width="{DynamicResource SplitButtonSeparatorWidth}"
-                        Background="White"
+                        Background="Transparent"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="0.5" />
 

From 42c526f9278cac562162479c6fb65c7bfe0e7746 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 11:02:40 +0800
Subject: [PATCH 11/15] fix: temporarily fix combobox demo display issue.

---
 .../Pages/ComboBoxDemo.axaml                   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
index eca2b5e..df5a595 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -9,19 +9,19 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <ComboBox Width="150">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" PlaceholderText="Please Select">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" IsEnabled="False">
-            <TextBlock>AAA</TextBlock>
-            <TextBlock>BBB</TextBlock>
-            <TextBlock>CCC</TextBlock>
+            <ComboBoxItem>AAA</ComboBoxItem>
+            <ComboBoxItem>BBB</ComboBoxItem>
+            <ComboBoxItem>CCC</ComboBoxItem>
         </ComboBox>
     </StackPanel>
 </UserControl>

From 0797e2e5df253d36f74b8d9f5a9f8800bc7c2fea Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 11:16:05 +0800
Subject: [PATCH 12/15] fix: fix file chooser selection.

---
 src/Semi.Avalonia/Controls/ManagedFileChooser.axaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
index 6be3470..c9608ff 100644
--- a/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
+++ b/src/Semi.Avalonia/Controls/ManagedFileChooser.axaml
@@ -139,7 +139,11 @@
                                 <GridSplitter Grid.Column="7" Width="1" />
                                 <TextBlock Grid.Column="8" Text="Size" />
                             </Grid>
-                            <ListBox Name="PART_Files" Items="{Binding Items}">
+                            <ListBox
+                                Name="PART_Files"
+                                Items="{Binding Items}"
+                                SelectedItems="{Binding SelectedItems}"
+                                SelectionMode="{Binding SelectionMode}">
                                 <ListBox.ItemTemplate>
                                     <DataTemplate>
                                         <Grid Background="Transparent">

From 7cababb1400078543fc444f8c2543fcf2b6041fd Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 12:05:54 +0800
Subject: [PATCH 13/15] fix Checkbox null content behavior, and icon stretch in
 menu.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml |  2 ++
 src/Semi.Avalonia/Controls/CheckBox.axaml    |  4 +++-
 src/Semi.Avalonia/Controls/Menu.axaml        | 12 +++++++-----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index fb31939..52d3b0d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -89,6 +89,7 @@
                     <MenuItem Header="Menu Item with _Checkbox">
                         <MenuItem.Icon>
                             <CheckBox
+                                Padding="0"
                                 BorderThickness="0"
                                 IsChecked="True"
                                 IsHitTestVisible="False" />
@@ -115,6 +116,7 @@
                     <MenuItem Header="Menu Item with _Checkbox">
                         <MenuItem.Icon>
                             <CheckBox
+                                Padding="0"
                                 BorderThickness="0"
                                 IsChecked="True"
                                 IsHitTestVisible="False" />
diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index 9bab81d..fde8b43 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -25,7 +25,7 @@
 
                     <Grid
                         Grid.Column="0"
-                        Margin="0,2,0,0"
+                        Margin="0,0,0,0"
                         VerticalAlignment="Center">
                         <Border
                             x:Name="NormalRectangle"
@@ -51,6 +51,8 @@
                         VerticalAlignment="Center"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
+                        IsVisible="{TemplateBinding Content,
+                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
                         RecognizesAccessKey="True"
                         TextWrapping="Wrap" />
                 </Grid>
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
index a9316fe..2a13721 100644
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -132,15 +132,17 @@
 
                             <Viewbox
                                 Name="PART_IconPresenter"
-                                Width="12"
-                                Height="12"
+                                Width="16"
+                                Height="16"
                                 Margin="{DynamicResource MenuItemIconMargin}"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 IsVisible="False"
-                                Stretch="UniformToFill"
-                                StretchDirection="DownOnly">
-                                <ContentPresenter Content="{TemplateBinding Icon}" />
+                                Stretch="Uniform">
+                                <ContentPresenter
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    Content="{TemplateBinding Icon}" />
                             </Viewbox>
 
                             <ContentPresenter

From e6a3e187a6c76788504834953cff0ee7e98e0dc8 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 10 Feb 2023 23:58:12 +0800
Subject: [PATCH 14/15] fix: fix colorpicker layout, remove datagrid animation.

---
 src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml | 3 ++-
 src/Semi.Avalonia.DataGrid/DataGrid.axaml              | 8 +-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index 80b6429..b6aab24 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -317,7 +317,8 @@
                             <Grid
                                 Margin="12"
                                 ColumnDefinitions="Auto,*"
-                                RowDefinitions="Auto,24,1*,1*,1*,1*,12">
+                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown /template/ TextBox">
                                         <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
diff --git a/src/Semi.Avalonia.DataGrid/DataGrid.axaml b/src/Semi.Avalonia.DataGrid/DataGrid.axaml
index 1fa4c3e..05f86ef 100644
--- a/src/Semi.Avalonia.DataGrid/DataGrid.axaml
+++ b/src/Semi.Avalonia.DataGrid/DataGrid.axaml
@@ -357,13 +357,7 @@
                     VerticalAlignment="Center"
                     Background="Transparent"
                     Data="{DynamicResource DataGridRowGroupHeaderExpandIconGlyph}"
-                    Foreground="{DynamicResource DataGridRowGroupHeaderExpandIconForeground}">
-                    <PathIcon.Transitions>
-                        <Transitions>
-                            <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
-                        </Transitions>
-                    </PathIcon.Transitions>
-                </PathIcon>
+                    Foreground="{DynamicResource DataGridRowGroupHeaderExpandIconForeground}" />
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon">

From 99a973000110f6c8f42fa888a065ecedb7418c6b Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sat, 11 Feb 2023 00:15:24 +0800
Subject: [PATCH 15/15] fix: fix color model tag alignment.

---
 .../Controls/ColorPicker.axaml                     |  6 +++++-
 .../Controls/ColorView.axaml                       | 14 ++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 19af230..dd26aff 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -229,7 +229,11 @@
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown /template/ TextBox">
-                                                    <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                                    <Setter Property="InnerLeftContent">
+                                                        <Template>
+                                                            <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
+                                                        </Template>
+                                                    </Setter>
                                                 </Style>
                                                 <Style Selector="Grid[Tag=Rgba]">
                                                     <Style Selector="^ NumericUpDown#Component1NumericUpDown">
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index b6aab24..d8f1836 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -321,7 +321,11 @@
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown /template/ TextBox">
-                                        <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
+                                        <Setter Property="InnerLeftContent">
+                                            <Template>
+                                                <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
+                                            </Template>
+                                        </Setter>
                                     </Style>
                                 </Grid.Styles>
                                 <!--  Top color model & Hex input  -->
@@ -387,13 +391,7 @@
                                     Minimum="{Binding Minimum, ElementName=Component1Slider}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component1Slider}">
-                                    <NumericUpDown.Styles>
-                                        <Style Selector="NumericUpDown /template/ TextBox">
-                                            <Setter Property="InnerLeftContent" Value="{TemplateBinding Tag}" />
-                                        </Style>
-                                    </NumericUpDown.Styles>
-                                </NumericUpDown>
+                                    Value="{Binding Value, ElementName=Component1Slider}" />
                                 <primitives:ColorSlider
                                     x:Name="Component1Slider"
                                     Grid.Row="2"