feat: use vertical navigation tab control.

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

@@ -11,10 +11,7 @@
     <Design.DataContext>
         <local:AutoCompleteBoxDemoViewModel />
     </Design.DataContext>
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <StackPanel.Styles>
             <Style Selector="AutoCompleteBox">
                 <Setter Property="Width" Value="300" />

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

@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo" xmlns="https://github.com/avaloniaui"
+    x:Class="Semi.Avalonia.Demo.Pages.BorderDemo"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    d:DesignWidth="800" mc:Ignorable="d">
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    <StackPanel Margin="20" Spacing="20">
+    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>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <TextBlock>Light (Default)</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="20">
             <Button Classes="Primary">Primary</Button>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <ButtonSpinner
             Height="30"
             AllowSpin="{Binding #allowSpinCheck.IsChecked}"

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"

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

@@ -10,9 +10,4 @@ public partial class CalendarDatePickerDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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>

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>

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"

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>

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

@@ -10,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
     {
         InitializeComponent();
     }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
 }

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

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" />

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

@@ -1,9 +1,13 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo" xmlns="https://github.com/avaloniaui"
+    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    d:DesignWidth="800" mc:Ignorable="d">
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    <StackPanel Margin="20" Spacing="20">
+    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"
+                Grid.Column="1"
-                HorizontalAlignment="Right" ExpandDirection="Left"
+                Height="200"
+                HorizontalAlignment="Right"
+                ExpandDirection="Left"
                 Header="Left">
                 <TextBlock>Left Content</TextBlock>
             </Expander>

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

@@ -1,11 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo" xmlns="https://github.com/avaloniaui"
+    x:Class="Semi.Avalonia.Demo.Pages.LabelDemo"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    d:DesignWidth="800" mc:Ignorable="d">
+    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"
+        Width="500"
-        HorizontalAlignment="Left" Spacing="20">
+        HorizontalAlignment="Left"
+        Spacing="20">
         <StackPanel.Styles>
             <Style Selector="Label">
                 <Setter Property="Margin" Value="4" />

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>

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>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="300,20,20,20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <Button Click="InfoButton_OnClick" Content="Information" />
         <Button Click="InfoButton_OnClick" Content="Success" />
         <Button Click="InfoButton_OnClick" Content="Warning" />

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <NumericUpDown
             Width="200"
             Maximum="100"

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"

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

@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <ProgressBar
             Width="200"
             Maximum="100"

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

@@ -1,10 +1,11 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
+    x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    <StackPanel
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        Margin="20" HorizontalAlignment="Left"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        Spacing="20">
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
         <TextBlock Text="Radio Buttons" />
         <StackPanel>
             <RadioButton>111</RadioButton>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <RefreshContainer Name="container">
             <TextBlock Text="Content" />
         </RefreshContainer>

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

@@ -1,11 +1,13 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<UserControl
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns="https://github.com/avaloniaui"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             mc:Ignorable="d" d:DesignWidth="800"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             d:DesignHeight="450"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo">
+    d:DesignHeight="450"
-    <StackPanel Margin="20" HorizontalAlignment="Left" Spacing="20">
+    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>

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

@@ -7,10 +7,7 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
+    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        Margin="20"
-        HorizontalAlignment="Left"
-        Spacing="20">
         <Slider
             Width="300"
             Maximum="100"

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

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" />

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" />

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>

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"

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>

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>