From 0fbcf43309402af52466e82decaf1f90b24a830e Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 25 Mar 2026 19:51:23 +0800
Subject: [PATCH] feat: update TabItem with icon. (#778)

---
 .../Pages/TabControlDemo.axaml                |  48 +++-----
 src/Semi.Avalonia/Controls/TabItem.axaml      | 115 +++++++++++-------
 src/Semi.Avalonia/Themes/Dark/TabItem.axaml   |   3 +
 .../Themes/HighContrast/TabItem.axaml         |   3 +
 src/Semi.Avalonia/Themes/Light/TabItem.axaml  |   3 +
 src/Semi.Avalonia/Themes/Shared/TabItem.axaml |   1 +
 6 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index dc2398c..bb41fb4 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -34,14 +34,10 @@
                         </StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -57,14 +53,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -82,14 +74,10 @@
                             Background="Transparent"
                             Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border
@@ -107,14 +95,10 @@
                     <StackPanel>
                         <Border MinHeight="150" Theme="{StaticResource CardBorder}">
                             <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
-                                <TabItem Content="Hello 1" Header="Tab 1" />
-                                <TabItem Content="Hello 2" Header="Tab 2" />
-                                <TabItem Content="Hello 3" Header="Tab 3" />
-                                <TabItem Content="中文内容" Header="中文中文" />
-                                <TabItem
-                                    Content="Hello 4"
-                                    Header="Tab 4"
-                                    IsEnabled="False" />
+                                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
                             </TabControl>
                         </Border>
                         <Border Height="300" Theme="{StaticResource CardBorder}">
diff --git a/src/Semi.Avalonia/Controls/TabItem.axaml b/src/Semi.Avalonia/Controls/TabItem.axaml
index e0fce6b..1f721c0 100644
--- a/src/Semi.Avalonia/Controls/TabItem.axaml
+++ b/src/Semi.Avalonia/Controls/TabItem.axaml
@@ -6,16 +6,12 @@
             Width="400"
             Height="400"
             Margin="20">
+            <TabItem Theme="{DynamicResource CardTabItem}" Header="文档" Icon="{StaticResource SemiIconFile}" />
             <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
-                <TabItem Header="文档">
-                    <TextBlock Text="Content1" />
-                </TabItem>
-                <TabItem Header="快速起步">
-                    <TextBlock Text="Content2" />
-                </TabItem>
-                <TabItem Header="帮助" IsSelected="True">
-                    <TextBlock Text="Content3" />
-                </TabItem>
+                <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
+                <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
+                <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
+                <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
             </TabControl>
         </StackPanel>
     </Design.PreviewWith>
@@ -25,20 +21,39 @@
         <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TabItem">
-                <ContentPresenter
-                    Name="PART_HeaderPresenter"
+                <Border
+                    Name="PART_RootBorder"
                     Padding="{TemplateBinding Padding}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Header}"
-                    ContentTemplate="{TemplateBinding HeaderTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    FontFamily="{TemplateBinding FontFamily}"
-                    FontWeight="{TemplateBinding FontWeight}"
-                    Foreground="{TemplateBinding Foreground}" />
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
+                        <ContentPresenter
+                            Name="PART_IconPresenter"
+                            DockPanel.Dock="Left"
+                            Content="{TemplateBinding Icon}"
+                            ContentTemplate="{TemplateBinding IconTemplate}"
+                            IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
+                            <ContentPresenter.DataTemplates>
+                                <DataTemplate DataType="Geometry">
+                                    <PathIcon
+                                        Theme="{StaticResource InnerPathIcon}"
+                                        Data="{Binding}" />
+                                </DataTemplate>
+                            </ContentPresenter.DataTemplates>
+                        </ContentPresenter>
+                        <ContentPresenter
+                            Name="PART_HeaderPresenter"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            FontFamily="{TemplateBinding FontFamily}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}" />
+                    </DockPanel>
+                </Border>
             </ControlTemplate>
         </Setter>
 
@@ -46,17 +61,31 @@
             <Setter Property="RecognizesAccessKey" Value="True" />
         </Style>
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
-            <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
+                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemIconSelectedForeground}" />
+            </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
             <Setter Property="Cursor" Value="Hand" />
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
+                </Style>
             </Style>
         </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderDisabledForeground}" />
+            </Style>
+        </Style>
+
     </ControlTheme>
 
     <ControlTheme
@@ -65,15 +94,15 @@
         TargetType="TabItem">
         <Setter Property="Padding" Value="8 4" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
         </Style>
@@ -98,27 +127,27 @@
         x:Key="LineTabItem"
         BasedOn="{StaticResource BaseTabItem}"
         TargetType="TabItem">
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
         </Style>
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-            <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:selected /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
             </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
             </Style>
             <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
-                <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+                <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
                 </Style>
-                <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+                <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                     <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
                 </Style>
             </Style>
@@ -150,15 +179,15 @@
         TargetType="TabItem">
         <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:selected /template/ Border#PART_RootBorder">
             <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
             </Style>
         </Style>
@@ -207,16 +236,20 @@
         TargetType="TabItem">
         <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
 
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
-            <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#PART_RootBorder">
+                <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
+            </Style>
         </Style>
 
         <Style Selector="^:not(:selected)">
-            <Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
+            <Style Selector="^:pressed /template/ Border#PART_RootBorder">
                 <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
             </Style>
         </Style>
diff --git a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
index af5e3d0..509c1c8 100644
--- a/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/TabItem.axaml
@@ -19,4 +19,7 @@
     <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
     <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+
+    <StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorDisabledText" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml b/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
index ced4623..890426c 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
@@ -19,4 +19,7 @@
     <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorHighlightText" />
     <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
     <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
+
+    <StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorGrayText" />
 </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 af5e3d0..509c1c8 100644
--- a/src/Semi.Avalonia/Themes/Light/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Light/TabItem.axaml
@@ -19,4 +19,7 @@
     <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
     <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
     <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
+
+    <StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorDisabledText" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/TabItem.axaml b/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
index 9e017ba..601039a 100644
--- a/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/TabItem.axaml
@@ -1,4 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TabItemIconHeaderSpacing" ResourceKey="SemiSpacingTight" />
     <StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
     <StaticResource x:Key="TabItemCardDefaultHeight" ResourceKey="SemiHeightControlDefault" />
 </ResourceDictionary>
\ No newline at end of file