From c5e8bd6662b18a4479445e072cfe3a0eb6251df5 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 26 Mar 2025 17:19:37 +0800
Subject: [PATCH] feat: add CardTabControl & ButtonTabControl.

---
 src/Semi.Avalonia/Controls/TabControl.axaml  | 106 ++++++++++++++-
 src/Semi.Avalonia/Controls/TabItem.axaml     | 133 +++++++++++++++++++
 src/Semi.Avalonia/Themes/Dark/TabItem.axaml  |   2 +-
 src/Semi.Avalonia/Themes/Light/TabItem.axaml |   2 +-
 4 files changed, 239 insertions(+), 4 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/TabControl.axaml b/src/Semi.Avalonia/Controls/TabControl.axaml
index 072863d..32e0973 100644
--- a/src/Semi.Avalonia/Controls/TabControl.axaml
+++ b/src/Semi.Avalonia/Controls/TabControl.axaml
@@ -37,7 +37,7 @@
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
                             <Border
                                 Name="PART_BorderSeparator"
-                                Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                                Background="{DynamicResource SemiColorBorder}" />
                         </Panel>
                         <ContentPresenter
                             Name="PART_SelectedContentHost"
@@ -184,7 +184,7 @@
                         <Border
                             Name="PART_BorderSeparator"
                             DockPanel.Dock="{TemplateBinding TabStripPlacement}"
-                            BorderBrush="{DynamicResource TabItemLinePipePressedBorderBrush}">
+                            BorderBrush="{DynamicResource SemiColorBorder}">
                             <ItemsPresenter
                                 Name="PART_ItemsPresenter"
                                 ItemsPanel="{TemplateBinding ItemsPanel}" />
@@ -300,4 +300,106 @@
             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="CardTabControl" TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabControlItem}" />
+        <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}">
+                    <DockPanel>
+                        <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <Border
+                                Name="PART_BorderSeparator"
+                                Background="{DynamicResource SemiColorBorder}" />
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        </Panel>
+                        <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], ^[TabStripPlacement=Right]">
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <WrapPanel Orientation="Vertical" />
+                </ItemsPanelTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Height" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Bottom" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Height" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Top" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ButtonTabControl" TargetType="TabControl">
+        <Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabControlItem}" />
+        <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}">
+                    <DockPanel>
+                        <Border
+                            Name="PART_BorderSeparator"
+                            DockPanel.Dock="{TemplateBinding TabStripPlacement}">
+                            <ItemsPresenter
+                                Name="PART_ItemsPresenter"
+                                ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        </Border>
+                        <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], ^[TabStripPlacement=Right]">
+            <Setter Property="TabControl.ItemsPanel">
+                <ItemsPanelTemplate>
+                    <WrapPanel Orientation="Vertical" />
+                </ItemsPanelTemplate>
+            </Setter>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index ac385b6..b62ca5a 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -213,4 +213,137 @@
             <Setter Property="HorizontalContentAlignment" Value="Right" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="CardTabControlItem" TargetType="TabItem">
+        <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabItem">
+                <ContentPresenter
+                    Name="PART_HeaderPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Content="{TemplateBinding Header}"
+                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Selected state  -->
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+            <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Background" Value="{DynamicResource SemiColorBackground0}" />
+        </Style>
+
+        <!-- Unselected state -->
+        <Style Selector="^:not(:selected)">
+            <Setter Property="Cursor" Value="Hand" />
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+                <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource SemiColorFill1}" />
+            </Style>
+        </Style>
+
+        <!--  TabStripPlacement States Group  -->
+        <Style Selector="^[TabStripPlacement=Top]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="3 3 0 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 1 0" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Setter Property="Margin" Value="0 0 8 0" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="0 0 3 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 0 1 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left]">
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="3 0 0 3" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="1 1 0 1" />
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="HorizontalContentAlignment" Value="Right" />
+            <Setter Property="Margin" Value="0 0 0 8" />
+            <Setter Property="Padding" Value="12 8" />
+            <Setter Property="CornerRadius" Value="0 3 3 0" />
+            <Style Selector="^:selected">
+                <Setter Property="BorderThickness" Value="0 1 1 1" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="ButtonTabControlItem" TargetType="TabItem">
+        <Setter Property="Padding" Value="12 8" />
+        <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
+        <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabItem">
+                <ContentPresenter
+                    Name="PART_HeaderPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Content="{TemplateBinding Header}"
+                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                    FontFamily="{TemplateBinding FontFamily}"
+                    FontWeight="{TemplateBinding FontWeight}"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Selected state  -->
+        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorPrimary}" />
+            <Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
+        </Style>
+
+        <!-- Unselected state -->
+        <Style Selector="^:not(:selected)">
+            <Setter Property="Cursor" Value="Hand" />
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+                <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Background" Value="{DynamicResource SemiColorFill1}" />
+            </Style>
+        </Style>
+
+        <!--  TabStripPlacement States Group  -->
+        <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+            <Setter Property="TabControl.Margin" Value="0 0 8 0" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
+            <Setter Property="TabControl.Margin" Value="0 0 0 8" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right]">
+            <Setter Property="HorizontalContentAlignment" Value="Right" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
index dc8da64..0e3f003 100644
--- a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
@@ -5,6 +5,6 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/TabItem.axaml b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
index dc8da64..0e3f003 100644
--- a/src/Semi.Avalonia/Themes/Light/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
@@ -5,6 +5,6 @@
     <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" />
+    <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
     <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
 </ResourceDictionary>
\ No newline at end of file