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] 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>