From 392f432a7bdd386678212fee63057e94830c3a53 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 12 Dec 2022 23:54:45 +0800
Subject: [PATCH 1/3] feat: add tab theme. encountered some issue with
 ContentPresenter text element style.

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |  3 +
 .../Pages/TabControlDemo.axaml                | 28 +++++++++
 .../Pages/TabControlDemo.axaml.cs             | 18 ++++++
 src/Semi.Avalonia/Controls/TabItem.axaml      | 57 ++++++++++---------
 src/Semi.Avalonia/Themes/Light/Light.axaml    |  2 +
 src/Semi.Avalonia/Themes/Light/TabItem.axaml  | 14 +++++
 6 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index ba4ea16..eed45f8 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml
@@ -23,5 +23,8 @@
         <TabItem Header="Border">
             <pages:BorderDemo />
         </TabItem>
+        <TabItem Header="TabControl">
+            <pages:TabControlDemo />
+        </TabItem>
     </TabControl>
 </Window>
diff --git a/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
new file mode 100644
index 0000000..287b5d0
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -0,0 +1,28 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TabControlDemo" 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>
+        <TabControl TabStripPlacement="Top">
+            <TabItem Content="Hello 1" Header="Tab 1" />
+            <TabItem Content="Hello 2" Header="Tab 2" />
+            <TabItem Content="Hello 3" Header="Tab 3" />
+        </TabControl>
+        <TabControl TabStripPlacement="Left">
+            <TabItem Content="Hello 1" Header="Tab 1" />
+            <TabItem Content="Hello 2" Header="Tab 2" />
+            <TabItem Content="Hello 3" Header="Tab 3" />
+        </TabControl>
+        <TabControl TabStripPlacement="Right">
+            <TabItem Content="Hello 1" Header="Tab 1" />
+            <TabItem Content="Hello 2" Header="Tab 2" />
+            <TabItem Content="Hello 3" Header="Tab 3" />
+        </TabControl>
+        <TabControl TabStripPlacement="Bottom">
+            <TabItem Content="Hello 1" Header="Tab 1" />
+            <TabItem Content="Hello 2" Header="Tab 2" />
+            <TabItem Content="Hello 3" Header="Tab 3" />
+        </TabControl>
+    </StackPanel>
+</UserControl>
diff --git a/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
new file mode 100644
index 0000000..3fbb803
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabControlDemo : UserControl
+{
+    public TabControlDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index 39da335..f48c44b 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -1,16 +1,22 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Theme: Card, Strip  default is Strip  -->
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <TabItem Foreground="Red" Header="Hello">
+                <TextBlock Text="Content" />
+            </TabItem>
+        </StackPanel>
+    </Design.PreviewWith>
+
     <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
-        <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
-        <Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
-        <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
-        <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" />
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="Margin" Value="0" />
-        <Setter Property="MinHeight" Value="5" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="TabItem">
+        <Setter Property="TabItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+        <Setter Property="TabItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
+        <Setter Property="TabItem.Padding" Value="8" />
+        <Setter Property="TabItem.Margin" Value="0" />
+        <Setter Property="TabItem.MinHeight" Value="5" />
+        <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+        <Setter Property="TabItem.Template">
+            <ControlTemplate>
                 <Border
                     Name="PART_LayoutRoot"
                     Padding="{TemplateBinding Padding}"
@@ -18,7 +24,7 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
+                    <Grid>
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -26,14 +32,14 @@
                             Content="{TemplateBinding Header}"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontSize="{TemplateBinding FontSize}"
-                            FontWeight="{TemplateBinding FontWeight}" />
+                            FontWeight="{TemplateBinding FontWeight}"
+                            TextElement.FontSize="30" />
                         <Border
                             Name="PART_SelectedPipe"
-                            Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
+                            Background="{DynamicResource TabItemLinePipeSelectedBackground}"
                             CornerRadius="{DynamicResource ControlCornerRadius}"
                             IsVisible="False" />
-                    </Panel>
+                    </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -41,9 +47,9 @@
         <!--  Selected state  -->
         <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->
         <Style Selector="^:selected">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
-            <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
+            <Setter Property="Foreground" Value="Blue" />
         </Style>
+
         <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
             <Setter Property="IsVisible" Value="True" />
         </Style>
@@ -80,29 +86,27 @@
 
         <!--  TabStripPlacement States Group  -->
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
-            <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
-            <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
-            <Setter Property="Margin" Value="0,0,2,0" />
-            <Setter Property="HorizontalAlignment" Value="Left" />
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="Border.Width" Value="2" />
+            <Setter Property="Border.Margin" Value="0,0,2,0" />
+            <Setter Property="Border.HorizontalAlignment" Value="Left" />
+            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Margin" Value="8,0,0,0" />
         </Style>
 
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-            <Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" />
+            <Setter Property="Height" Value="2" />
             <Setter Property="Margin" Value="0,0,0,2" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
 
         <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
-            <Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
-            <Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
+            <Setter Property="Width" Value="2" />
             <Setter Property="Margin" Value="2,0,0,0" />
             <Setter Property="HorizontalAlignment" Value="Right" />
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
         </Style>
         <Style Selector="^[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Margin" Value="0,0,8,0" />
@@ -111,4 +115,5 @@
             <Setter Property="HorizontalContentAlignment" Value="Right" />
         </Style>
     </ControlTheme>
+
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 3b32fa9..7352bc2 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -7,6 +7,8 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
     </ResourceDictionary.MergedDictionaries>
diff --git a/src/Semi.Avalonia/Themes/Light/TabItem.axaml b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
index 9017e8d..12369ed 100644
--- a/src/Semi.Avalonia/Themes/Light/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
@@ -1,3 +1,17 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <!--  Line  -->
+    <SolidColorBrush x:Key="TabItemLinePipeBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="TabItemLinePipeSelectedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="TabItemLinePipePointeroverBorderBrush" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="TabItemLinePipePressedBorderBrush" Opacity="0.13" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="TabItemLineHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TabItemLineHeaderPointeroverForeground" Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="TabItemLineHeaderBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="TabItemLineHeaderPointeroverBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="TabItemLineHeaderSelectedForeground" Color="Transparent" />
+
+
 </ResourceDictionary>

From 6b2fd3caae6e5d46b7a64d94200d5d82957de67e Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 13 Dec 2022 00:30:05 +0800
Subject: [PATCH 2/3] feat: update style to make it feels a bit better.

---
 .../Pages/TabControlDemo.axaml                | 48 ++++++++-------
 src/Semi.Avalonia/Controls/TabControl.axaml   | 60 +++++++++++++------
 src/Semi.Avalonia/Controls/TabItem.axaml      | 30 +++++++---
 3 files changed, 93 insertions(+), 45 deletions(-)

diff --git a/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index 287b5d0..3f479d0 100644
--- a/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -4,25 +4,33 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
     d:DesignWidth="800" mc:Ignorable="d">
     <StackPanel>
-        <TabControl TabStripPlacement="Top">
-            <TabItem Content="Hello 1" Header="Tab 1" />
-            <TabItem Content="Hello 2" Header="Tab 2" />
-            <TabItem Content="Hello 3" Header="Tab 3" />
-        </TabControl>
-        <TabControl TabStripPlacement="Left">
-            <TabItem Content="Hello 1" Header="Tab 1" />
-            <TabItem Content="Hello 2" Header="Tab 2" />
-            <TabItem Content="Hello 3" Header="Tab 3" />
-        </TabControl>
-        <TabControl TabStripPlacement="Right">
-            <TabItem Content="Hello 1" Header="Tab 1" />
-            <TabItem Content="Hello 2" Header="Tab 2" />
-            <TabItem Content="Hello 3" Header="Tab 3" />
-        </TabControl>
-        <TabControl TabStripPlacement="Bottom">
-            <TabItem Content="Hello 1" Header="Tab 1" />
-            <TabItem Content="Hello 2" Header="Tab 2" />
-            <TabItem Content="Hello 3" Header="Tab 3" />
-        </TabControl>
+        <Border Theme="{StaticResource CardBorder}">
+            <TabControl TabStripPlacement="Top">
+                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabItem Content="Hello 2" Header="Tab 2" />
+                <TabItem Content="Hello 3" Header="Tab 3" />
+            </TabControl>
+        </Border>
+        <Border Theme="{StaticResource CardBorder}">
+            <TabControl TabStripPlacement="Left">
+                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabItem Content="Hello 2" Header="Tab 2" />
+                <TabItem Content="Hello 3" Header="Tab 3" />
+            </TabControl>
+        </Border>
+        <Border Theme="{StaticResource CardBorder}">
+            <TabControl TabStripPlacement="Right">
+                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabItem Content="Hello 2" Header="Tab 2" />
+                <TabItem Content="Hello 3" Header="Tab 3" />
+            </TabControl>
+        </Border>
+        <Border Theme="{StaticResource CardBorder}">
+            <TabControl TabStripPlacement="Bottom">
+                <TabItem Content="Hello 1" Header="Tab 1" />
+                <TabItem Content="Hello 2" Header="Tab 2" />
+                <TabItem Content="Hello 3" Header="Tab 3" />
+            </TabControl>
+        </Border>
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/TabControl.axaml b/src/Semi.Avalonia/Controls/TabControl.axaml
index 11b1caa..55cd6d9 100644
--- a/src/Semi.Avalonia/Controls/TabControl.axaml
+++ b/src/Semi.Avalonia/Controls/TabControl.axaml
@@ -1,32 +1,34 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <ControlTheme TargetType="TabControl" x:Key="{x:Type TabControl}">
+    <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
         <Setter Property="Margin" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource TabItemMargin}" />
+        <Setter Property="Padding" Value="0" />
         <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabControl">
                 <Border
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}">
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <ItemsPresenter
-                            DockPanel.Dock="{TemplateBinding TabStripPlacement}"
-                            ItemTemplate="{TemplateBinding ItemTemplate}"
-                            Items="{TemplateBinding Items}"
-                            ItemsPanel="{TemplateBinding ItemsPanel}"
-                            Name="PART_ItemsPresenter" />
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemTemplate="{TemplateBinding ItemTemplate}"
+                                Items="{TemplateBinding Items}"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                        </Panel>
                         <ContentPresenter
-                            Content="{TemplateBinding SelectedContent}"
-                            ContentTemplate="{TemplateBinding SelectedContentTemplate}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            Margin="{TemplateBinding Padding}"
                             Name="PART_SelectedContentHost"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -38,8 +40,30 @@
         <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter &gt; WrapPanel">
             <Setter Property="Orientation" Value="Vertical" />
         </Style>
-        <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
-            <Setter Property="Margin" Value="{DynamicResource TabControlTopPlacementItemMargin}" />
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Width" Value="2" />
+            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
+            <Setter Property="Border.HorizontalAlignment" Value="Left" />
         </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Width" Value="2" />
+            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
+            <Setter Property="Border.HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Height" Value="2" />
+            <Setter Property="Border.HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Border.VerticalAlignment" Value="Bottom" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Border.Height" Value="2" />
+            <Setter Property="Border.HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Border.VerticalAlignment" Value="Top" />
+        </Style>
+        <!--
+        <Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
+            <Setter Property="Margin" Value="8" />
+        </Style>
+        -->
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index f48c44b..99d584b 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -16,17 +16,17 @@
         <Setter Property="TabItem.MinHeight" Value="5" />
         <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
         <Setter Property="TabItem.Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="TabItem">
                 <Border
                     Name="PART_LayoutRoot"
-                    Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid>
+                    <Panel>
                         <ContentPresenter
                             Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Header}"
@@ -39,7 +39,7 @@
                             Background="{DynamicResource TabItemLinePipeSelectedBackground}"
                             CornerRadius="{DynamicResource ControlCornerRadius}"
                             IsVisible="False" />
-                    </Grid>
+                    </Panel>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -50,13 +50,16 @@
             <Setter Property="Foreground" Value="Blue" />
         </Style>
 
+        <Style Selector="^:not(:selected)">
+            <Setter Property="Cursor" Value="Hand" />
+        </Style>
+
         <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
             <Setter Property="IsVisible" Value="True" />
         </Style>
 
         <!--  PointerOver state  -->
         <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
-            <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
             <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
         </Style>
 
@@ -87,7 +90,7 @@
         <!--  TabStripPlacement States Group  -->
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
             <Setter Property="Border.Width" Value="2" />
-            <Setter Property="Border.Margin" Value="0,0,2,0" />
+            <Setter Property="Border.Margin" Value="0,0,8,0" />
             <Setter Property="Border.HorizontalAlignment" Value="Left" />
             <Setter Property="Border.VerticalAlignment" Value="Stretch" />
         </Style>
@@ -97,11 +100,24 @@
 
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
             <Setter Property="Height" Value="2" />
-            <Setter Property="Margin" Value="0,0,0,2" />
+            <Setter Property="Margin" Value="0,0,0,0" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
+            <Setter Property="VerticalAlignment" Value="Top" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe">
             <Setter Property="VerticalAlignment" Value="Bottom" />
         </Style>
 
+        <Style Selector="^[TabStripPlacement=Top] /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Margin" Value="0,0,0,8" />
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Bottom] /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Margin" Value="0,0,0,8" />
+        </Style>
+
         <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
             <Setter Property="Width" Value="2" />
             <Setter Property="Margin" Value="2,0,0,0" />

From 9e2b51f1e26cdc92735787156a0a4ecf33f5454f Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 13 Dec 2022 00:39:15 +0800
Subject: [PATCH 3/3] feat: update theme for padding.

---
 src/Semi.Avalonia/Controls/TabControl.axaml |  8 ++--
 src/Semi.Avalonia/Controls/TabItem.axaml    | 41 ++++++++++++---------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/TabControl.axaml b/src/Semi.Avalonia/Controls/TabControl.axaml
index 55cd6d9..3211dab 100644
--- a/src/Semi.Avalonia/Controls/TabControl.axaml
+++ b/src/Semi.Avalonia/Controls/TabControl.axaml
@@ -41,22 +41,22 @@
             <Setter Property="Orientation" Value="Vertical" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Width" Value="2" />
+            <Setter Property="Border.Width" Value="1" />
             <Setter Property="Border.VerticalAlignment" Value="Stretch" />
             <Setter Property="Border.HorizontalAlignment" Value="Left" />
         </Style>
         <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Width" Value="2" />
+            <Setter Property="Border.Width" Value="1" />
             <Setter Property="Border.VerticalAlignment" Value="Stretch" />
             <Setter Property="Border.HorizontalAlignment" Value="Right" />
         </Style>
         <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Height" Value="2" />
+            <Setter Property="Border.Height" Value="1" />
             <Setter Property="Border.HorizontalAlignment" Value="Stretch" />
             <Setter Property="Border.VerticalAlignment" Value="Bottom" />
         </Style>
         <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Height" Value="2" />
+            <Setter Property="Border.Height" Value="1" />
             <Setter Property="Border.HorizontalAlignment" Value="Stretch" />
             <Setter Property="Border.VerticalAlignment" Value="Top" />
         </Style>
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index 99d584b..723c6e2 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -11,8 +11,8 @@
     <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
         <Setter Property="TabItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="TabItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
-        <Setter Property="TabItem.Padding" Value="8" />
         <Setter Property="TabItem.Margin" Value="0" />
+        <Setter Property="TabItem.Padding" Value="8 4" />
         <Setter Property="TabItem.MinHeight" Value="5" />
         <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
         <Setter Property="TabItem.Template">
@@ -88,6 +88,29 @@
         </Style>
 
         <!--  TabStripPlacement States Group  -->
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Style Selector="^ /template/Border#PART_SelectedPipe">
+                <Setter Property="Height" Value="2" />
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="HorizontalAlignment" Value="Stretch" />
+                <Setter Property="VerticalAlignment" Value="Bottom" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Margin" Value="0,0,0,4" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Style Selector="^ /template/Border#PART_SelectedPipe">
+                <Setter Property="Height" Value="2" />
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="HorizontalAlignment" Value="Stretch" />
+                <Setter Property="VerticalAlignment" Value="Top" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Margin" Value="0,4,0,0" />
+            </Style>
+        </Style>
+
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
             <Setter Property="Border.Width" Value="2" />
             <Setter Property="Border.Margin" Value="0,0,8,0" />
@@ -98,26 +121,10 @@
             <Setter Property="Margin" Value="8,0,0,0" />
         </Style>
 
-        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-            <Setter Property="Height" Value="2" />
-            <Setter Property="Margin" Value="0,0,0,0" />
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-            <Setter Property="VerticalAlignment" Value="Top" />
-        </Style>
-        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe">
-            <Setter Property="VerticalAlignment" Value="Bottom" />
-        </Style>
-
         <Style Selector="^[TabStripPlacement=Top] /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Margin" Value="0,0,0,8" />
         </Style>
 
-        <Style Selector="^[TabStripPlacement=Bottom] /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Margin" Value="0,0,0,8" />
-        </Style>
-
         <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
             <Setter Property="Width" Value="2" />
             <Setter Property="Margin" Value="2,0,0,0" />