Complete the implementation of the Card control

2026-10-29 07:16:33 +08:00 · 2025-09-07 15:59:05 +08:00
parent de0fff915a
commit 13baddd3ec
10 changed files with 386 additions and 63 deletions
@@ -70,9 +70,6 @@ public class Card : HeaderedContentControl,
    public static readonly StyledProperty<IDataTemplate?> CoverTemplateProperty = 
        AvaloniaProperty.Register<Card, IDataTemplate?>(nameof (CoverTemplate));
    
-    public static readonly StyledProperty<List<Control>> ActionsProperty = 
-        AvaloniaProperty.Register<Card, List<Control>>(nameof (Actions), new List<Control>());
-    
    public static readonly StyledProperty<bool> IsMotionEnabledProperty =
        MotionAwareControlProperty.IsMotionEnabledProperty.AddOwner<Card>();
    
@@ -236,7 +233,7 @@ public class Card : HeaderedContentControl,
    public Card()
    {
        this.RegisterResources();
-        Actions.CollectionChanged += new NotifyCollectionChangedEventHandler(this.HandleActionsChanged);
+        Actions.CollectionChanged += new NotifyCollectionChangedEventHandler(HandleActionsChanged);
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
@@ -281,9 +278,12 @@ public class Card : HeaderedContentControl,
        {
            SetCurrentValue(ContentTypeProperty, CardContentType.Meta);
        }
-        else if (Content is CardTabsContent)
+        else if (Content is CardTabsContent cardTabsContent)
        {
            SetCurrentValue(ContentTypeProperty, CardContentType.Tabs);
+            _contentBindingDisposables = new CompositeDisposable();
+            _contentBindingDisposables.Add(BindUtils.RelayBind(this, IsMotionEnabledProperty, cardTabsContent, CardTabsContent.IsMotionEnabledProperty));
+            _contentBindingDisposables.Add(BindUtils.RelayBind(this, SizeTypeProperty, cardTabsContent, CardTabsContent.SizeTypeProperty));
        }
        else if (Content is CardGridContent cardGridContent)
        {
@@ -2,13 +2,10 @@ using System.Collections.Specialized;
 using System.Reactive.Disposables;
 using AtomUI.Controls.Themes;
 using AtomUI.Data;
-using AtomUI.Theme.Data;
-using AtomUI.Theme.Styling;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
-using Avalonia.Data;

 namespace AtomUI.Controls;

@@ -25,6 +25,9 @@ public class CardGridItem : ContentControl
    public static readonly StyledProperty<int> ColumnSpanProperty = 
        AvaloniaProperty.Register<CardGridItem, int>(nameof (ColumnSpan));
    
+    public static readonly StyledProperty<bool> IsHoverableProperty = 
+        AvaloniaProperty.Register<CardGridItem, bool>(nameof (IsHoverable), true);
+    
    public BoxShadows BoxShadow
    {
        get => GetValue(BoxShadowProperty);
@@ -55,6 +58,12 @@ public class CardGridItem : ContentControl
        set => SetValue(ColumnSpanProperty, value);
    }
    
+    public bool IsHoverable
+    {
+        get => GetValue(IsHoverableProperty);
+        set => SetValue(IsHoverableProperty, value);
+    }
+    
    #region 内部属性定义

    public static readonly StyledProperty<SizeType> SizeTypeProperty = 
@@ -1,17 +1,30 @@
+using System.Collections;
+using System.Collections.Specialized;
+using AtomUI.Controls.Themes;
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
+using Avalonia.Metadata;

 namespace AtomUI.Controls;

+using ControlList = Avalonia.Controls.Controls;
+
 public class CardTabsContent : TemplatedControl
 {
    #region 公共属性定义
    public static readonly StyledProperty<object?> TabBarExtraContentProperty = 
-        AvaloniaProperty.Register<Card, object?>(nameof (TabBarExtraContent));
+        AvaloniaProperty.Register<CardTabsContent, object?>(nameof (TabBarExtraContent));
    
    public static readonly StyledProperty<IDataTemplate?> TabBarExtraContentTemplateProperty = 
-        AvaloniaProperty.Register<Card, IDataTemplate?>(nameof (TabBarExtraContentTemplate));
+        AvaloniaProperty.Register<CardTabsContent, IDataTemplate?>(nameof (TabBarExtraContentTemplate));
+    
+    public static readonly StyledProperty<IEnumerable?> TabItemsSourceProperty = 
+        AvaloniaProperty.Register<CardTabsContent, IEnumerable?>(nameof (TabItemsSource));
+    
+    public static readonly StyledProperty<IDataTemplate?> TabItemTemplateProperty = 
+        AvaloniaProperty.Register<CardTabsContent, IDataTemplate?>(nameof (TabItemTemplate));
    
    public object? TabBarExtraContent
    {
@@ -24,5 +37,130 @@ public class CardTabsContent : TemplatedControl
        get => GetValue(TabBarExtraContentTemplateProperty);
        set => SetValue(TabBarExtraContentTemplateProperty,  value);
    }
+    
+    public IEnumerable? TabItemsSource
+    {
+        get => GetValue(TabItemsSourceProperty);
+        set => SetValue(TabItemsSourceProperty,  value);
+    }
+    
+    [InheritDataTypeFromItems(nameof(TabItemsSource))]
+    public IDataTemplate? TabItemTemplate
+    {
+        get => GetValue(TabItemTemplateProperty);
+        set => SetValue(TabItemTemplateProperty,  value);
+    }
    #endregion
+    
+    #region 内部属性定义
+    
+    internal static readonly StyledProperty<SizeType> SizeTypeProperty = 
+        SizeTypeAwareControlProperty.SizeTypeProperty.AddOwner<CardTabsContent>();
+
+    internal static readonly StyledProperty<bool> IsMotionEnabledProperty =
+        MotionAwareControlProperty.IsMotionEnabledProperty.AddOwner<CardTabsContent>();
+    
+    public SizeType SizeType
+    {
+        get => GetValue(SizeTypeProperty);
+        set => SetValue(SizeTypeProperty, value);
+    }
+    
+    internal bool IsMotionEnabled
+    {
+        get => GetValue(IsMotionEnabledProperty);
+        set => SetValue(IsMotionEnabledProperty, value);
+    }
+    
+    #endregion
+    
+    private readonly ControlList _items = new ControlList();
+    private TabControl? _tabControl;
+    
+    [Content]
+    public ControlList Items => _items;
+
+    public CardTabsContent()
+    {
+        Items.CollectionChanged += new NotifyCollectionChangedEventHandler(HandleTabsChanged);
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        _tabControl = e.NameScope.Find<TabControl>(CardTabsContentThemeConstants.TabControlPart);
+        if (_tabControl != null)
+        {
+            foreach (var tabItem in Items)
+            {
+                _tabControl.Items.Add(tabItem);
+            }
+        }
+    }
+    
+    private void HandleTabsChanged(object? sender, NotifyCollectionChangedEventArgs e)
+    {
+        if (_tabControl != null)
+        {
+            switch (e.Action)
+            {
+                case NotifyCollectionChangedAction.Add:
+                    var newItems = e.NewItems!.OfType<Control>();
+                    var newStartingIndex = e.NewStartingIndex;
+                    foreach (var control in newItems)
+                    {
+                        _tabControl.Items.Insert(newStartingIndex++, control);
+                    }
+               
+                    break;
+                case NotifyCollectionChangedAction.Remove:
+                    foreach (var control in e.OldItems!.OfType<Control>())
+                    {
+                        _tabControl.Items.Remove(control);
+                    }
+                    break;
+                case NotifyCollectionChangedAction.Replace:
+                    for (int index1 = 0; index1 < e.OldItems!.Count; ++index1)
+                    {
+                        int     index2  = index1 + e.OldStartingIndex;
+                        Control newItem = (Control) e.NewItems![index1]!;
+                        _tabControl.Items[index2] = newItem;
+                    }
+                    break;
+                case NotifyCollectionChangedAction.Move:
+                    var           oldIndex = e.OldStartingIndex;
+                    var           count            = e.OldItems!.Count;
+                    List<Control> oldItems         = new List<Control>();
+                    for (int i = oldIndex; i < count; ++i)
+                    {
+                        var oldItem = e.OldItems![i];
+                        if (oldItem is Control control)
+                        {
+                            oldItems.Add(control);
+                        }
+                    }
+
+                    var newIndex = e.NewStartingIndex;
+                    int index    = newIndex;
+                    for (int i = oldIndex; i < count; ++i)
+                    {
+                        _tabControl.Items.RemoveAt(index);
+                    }
+
+                    if (newIndex > oldIndex)
+                    {
+                        index -= count - 1;
+                    }
+                    
+                    foreach (var control in oldItems)
+                    {
+                        _tabControl.Items.Insert(index++, control);
+                    }
+                    
+                    break;
+                case NotifyCollectionChangedAction.Reset:
+                    throw new NotSupportedException();
+            }
+        }
+    }
 }
@@ -13,14 +13,14 @@
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
            </ControlTemplate>
        </Setter>

-        <Setter Property="ClipToBounds" Value="False"/>
-        <Setter Property="HorizontalContentAlignment" Value="Center"/>
-        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="BoxShadow" Value="{DynamicResource {x:Static atom:CardTokenKey.CardGridItemShadows}}" />
        <Style Selector="^[SizeType=Large]">
            <Style Selector="^ /template/ Border#Frame">
@@ -39,9 +39,11 @@
                <Setter Property="Padding" Value="{DynamicResource {x:Static atom:CardTokenKey.BodyPaddingSM}}" />
            </Style>
        </Style>
-        
-        <Style Selector="^:pointerover">
-            <Setter Property="BoxShadow" Value="{DynamicResource {x:Static atom:CardTokenKey.CardShadows}}" />
+
+        <Style Selector="^[IsHoverable=True]">
+            <Style Selector="^:pointerover">
+                <Setter Property="BoxShadow" Value="{DynamicResource {x:Static atom:CardTokenKey.CardShadows}}" />
+            </Style>
        </Style>
    </ControlTheme>
 </ResourceDictionary>
@@ -6,7 +6,41 @@
    <ControlTheme x:Key="{x:Type atom:CardTabsContent}" TargetType="atom:CardTabsContent">
        <Setter Property="Template">
            <ControlTemplate>
+                <atom:TabControl Name="{x:Static atom:CardTabsContentThemeConstants.TabControlPart}"
+                                 SizeType="{TemplateBinding SizeType}"
+                                 ItemsSource="{TemplateBinding TabItemsSource}"
+                                 ItemTemplate="{TemplateBinding TabItemTemplate}"
+                                 TabAndContentGutter="0"
+                                 IsMotionEnabled="{TemplateBinding IsMotionEnabled}"
+                                 HeaderEndExtraContent="{TemplateBinding TabBarExtraContent}"
+                                 HeaderEndExtraContentTemplate="{TemplateBinding TabBarExtraContentTemplate}"
+                                 />
            </ControlTemplate>
        </Setter>
+        
+        <Style Selector="^[SizeType=Large]">
+            <Style Selector="^ /template/ atom|TabControl">
+                <Setter Property="ContentPadding" Value="{DynamicResource {x:Static atom:CardTokenKey.BodyPaddingLG}}" />
+                <Setter Property="HeaderStartEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingLG}}" />
+                <Setter Property="HeaderEndEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingLG}}" />
+            </Style>
+        </Style>
+        
+        <Style Selector="^[SizeType=Middle]">
+            <Style Selector="^ /template/ atom|TabControl">
+                <Setter Property="ContentPadding" Value="{DynamicResource {x:Static atom:CardTokenKey.BodyPadding}}" />
+                <Setter Property="HeaderStartEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingSM}}" />
+                <Setter Property="HeaderEndEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingSM}}" />
+            </Style>
+        </Style>
+        
+        <Style Selector="^[SizeType=Small]">
+            <Style Selector="^ /template/ atom|TabControl">
+                <Setter Property="ContentPadding" Value="{DynamicResource {x:Static atom:CardTokenKey.BodyPaddingSM}}" />
+                <Setter Property="HeaderStartEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingXS}}" />
+                <Setter Property="HeaderEndEdgePadding" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyPaddingXS}}" />
+            </Style>
+        </Style>
+        
    </ControlTheme>
 </ResourceDictionary>
@@ -118,6 +118,12 @@
            </Style>
        </Style>

+        <Style Selector="^[IsInnerMode=True]">
+            <Style Selector="^ /template/ Border#HeaderFrame">
+                <Setter Property="Background" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorFillAlter}}" />
+            </Style>
+        </Style>
+
        <Style Selector="^[ContentType=Meta],^[ContentType=Default]">
            <Style Selector="^[SizeType=Large]">
                <Style Selector="^ /template/ Border#CardContent">
@@ -15,3 +15,7 @@ internal class CardGridContentThemeConstants
    public const string ItemsPresenterPart = "PART_ItemsPresenter";
 }

+internal class CardTabsContentThemeConstants
+{
+    public const string TabControlPart = "PART_TabControl";
+}
@@ -16,27 +16,39 @@
                        <Panel Name="{x:Static atom:TabControlThemeConstants.AlignWrapperPart}"
                               DockPanel.Dock="{TemplateBinding TabStripPlacement}"
                               Margin="{TemplateBinding TabStripMargin}">
-                            <atom:TabsContainerPanel Name="{x:Static atom:TabControlThemeConstants.TabsContainerPart}"
-                                                     TabStripPlacement="{TemplateBinding TabStripPlacement}">
-                                <atom:TabsContainerPanel.TabScrollViewer>
-                                    <atom:TabControlScrollViewer
-                                        Name="{x:Static atom:TabControlThemeConstants.CardTabStripScrollViewerPart}"
-                                        IsScrollChainingEnabled="False"
-                                        TabStripPlacement="{TemplateBinding TabStripPlacement}"
-                                        IsMotionEnabled="{TemplateBinding IsMotionEnabled}">
-                                        <ItemsPresenter
-                                            Name="{x:Static atom:TabControlThemeConstants.ItemsPresenterPart}"
-                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                    </atom:TabControlScrollViewer>
-                                </atom:TabsContainerPanel.TabScrollViewer>
-                                <atom:TabsContainerPanel.AddTabButton>
-                                    <atom:IconButton Name="{x:Static atom:TabControlThemeConstants.AddTabButtonPart}"
-                                                     Icon="{atom:IconProvider PlusOutlined}"
-                                                     BorderThickness="{TemplateBinding CardBorderThickness}"
-                                                     CornerRadius="{TemplateBinding CardBorderRadius}"
-                                                     IsVisible="{TemplateBinding IsShowAddTabButton}" />
-                                </atom:TabsContainerPanel.AddTabButton>
-                            </atom:TabsContainerPanel>
+                            <Border Padding="{TemplateBinding EffectiveHeaderPadding}">
+                                <DockPanel LastChildFill="True" Name="HeaderLayout">
+                                    <ContentPresenter Name="HeaderStartExtraContent"
+                                                      Content="{TemplateBinding HeaderStartExtraContent}"
+                                                      ContentTemplate="{TemplateBinding HeaderStartExtraContentTemplate}" />
+                                    <ContentPresenter Name="HeaderEndExtraContent"
+                                                      Content="{TemplateBinding HeaderEndExtraContent}"
+                                                      ContentTemplate="{TemplateBinding HeaderEndExtraContentTemplate}" />
+                                    <atom:TabsContainerPanel
+                                        Name="{x:Static atom:TabControlThemeConstants.TabsContainerPart}"
+                                        TabStripPlacement="{TemplateBinding TabStripPlacement}">
+                                        <atom:TabsContainerPanel.TabScrollViewer>
+                                            <atom:TabControlScrollViewer
+                                                Name="{x:Static atom:TabControlThemeConstants.CardTabStripScrollViewerPart}"
+                                                IsScrollChainingEnabled="False"
+                                                TabStripPlacement="{TemplateBinding TabStripPlacement}"
+                                                IsMotionEnabled="{TemplateBinding IsMotionEnabled}">
+                                                <ItemsPresenter
+                                                    Name="{x:Static atom:TabControlThemeConstants.ItemsPresenterPart}"
+                                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                            </atom:TabControlScrollViewer>
+                                        </atom:TabsContainerPanel.TabScrollViewer>
+                                        <atom:TabsContainerPanel.AddTabButton>
+                                            <atom:IconButton
+                                                Name="{x:Static atom:TabControlThemeConstants.AddTabButtonPart}"
+                                                Icon="{atom:IconProvider PlusOutlined}"
+                                                BorderThickness="{TemplateBinding CardBorderThickness}"
+                                                CornerRadius="{TemplateBinding CardBorderRadius}"
+                                                IsVisible="{TemplateBinding IsShowAddTabButton}" />
+                                        </atom:TabsContainerPanel.AddTabButton>
+                                    </atom:TabsContainerPanel>
+                                </DockPanel>
+                            </Border>
                        </Panel>

                        <ContentPresenter Name="{x:Static atom:TabControlThemeConstants.SelectedContentHostPart}"
@@ -66,7 +78,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Top]">
-
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="HorizontalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Left"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Right"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -88,6 +113,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Right]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="VerticalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Top"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Bottom"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -109,6 +148,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="HorizontalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Left"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Right"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -130,6 +183,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Left]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="VerticalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Top"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Bottom"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -12,26 +12,37 @@
            <ControlTemplate>
                <Border Name="{x:Static atom:TabStripThemeConstants.FramePart}">
                    <Panel Name="{x:Static atom:TabStripThemeConstants.AlignWrapperPart}">
-                        <atom:TabsContainerPanel Name="{x:Static atom:TabStripThemeConstants.TabsContainerPart}"
-                                                 TabStripPlacement="{TemplateBinding TabStripPlacement}">
-                            <atom:TabsContainerPanel.TabScrollViewer>
-                                <atom:TabStripScrollViewer
-                                    Name="{x:Static atom:TabStripThemeConstants.CardTabStripScrollViewerPart}"
-                                    IsScrollChainingEnabled="False"
-                                    TabStripPlacement="{TemplateBinding TabStripPlacement}"
-                                    IsMotionEnabled="{TemplateBinding IsMotionEnabled}">
-                                    <ItemsPresenter Name="{x:Static atom:TabStripThemeConstants.ItemsPresenterPart}"
-                                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                </atom:TabStripScrollViewer>
-                            </atom:TabsContainerPanel.TabScrollViewer>
-                            <atom:TabsContainerPanel.AddTabButton>
-                                <atom:IconButton Name="{x:Static atom:TabStripThemeConstants.AddTabButtonPart}"
-                                                 Icon="{atom:IconProvider PlusOutlined}"
-                                                 BorderThickness="{TemplateBinding CardBorderThickness}"
-                                                 CornerRadius="{TemplateBinding CardBorderRadius}"
-                                                 IsVisible="{TemplateBinding IsShowAddTabButton}" />
-                            </atom:TabsContainerPanel.AddTabButton>
-                        </atom:TabsContainerPanel>
+                        <Border Padding="{TemplateBinding EffectiveHeaderPadding}">
+                            <DockPanel LastChildFill="True" Name="HeaderLayout">
+                                <ContentPresenter Name="HeaderStartExtraContent"
+                                                  Content="{TemplateBinding HeaderStartExtraContent}"
+                                                  ContentTemplate="{TemplateBinding HeaderStartExtraContentTemplate}" />
+                                <ContentPresenter Name="HeaderEndExtraContent"
+                                                  Content="{TemplateBinding HeaderEndExtraContent}"
+                                                  ContentTemplate="{TemplateBinding HeaderEndExtraContentTemplate}" />
+                                <atom:TabsContainerPanel Name="{x:Static atom:TabStripThemeConstants.TabsContainerPart}"
+                                                         TabStripPlacement="{TemplateBinding TabStripPlacement}">
+                                <atom:TabsContainerPanel.TabScrollViewer>
+                                    <atom:TabStripScrollViewer
+                                        Name="{x:Static atom:TabStripThemeConstants.CardTabStripScrollViewerPart}"
+                                        IsScrollChainingEnabled="False"
+                                        TabStripPlacement="{TemplateBinding TabStripPlacement}"
+                                        IsMotionEnabled="{TemplateBinding IsMotionEnabled}">
+                                        <ItemsPresenter
+                                            Name="{x:Static atom:TabStripThemeConstants.ItemsPresenterPart}"
+                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                    </atom:TabStripScrollViewer>
+                                </atom:TabsContainerPanel.TabScrollViewer>
+                                <atom:TabsContainerPanel.AddTabButton>
+                                    <atom:IconButton Name="{x:Static atom:TabStripThemeConstants.AddTabButtonPart}"
+                                                     Icon="{atom:IconProvider PlusOutlined}"
+                                                     BorderThickness="{TemplateBinding CardBorderThickness}"
+                                                     CornerRadius="{TemplateBinding CardBorderRadius}"
+                                                     IsVisible="{TemplateBinding IsShowAddTabButton}" />
+                                </atom:TabsContainerPanel.AddTabButton>
+                            </atom:TabsContainerPanel>
+                                </DockPanel>
+                        </Border>
                    </Panel>
                </Border>
            </ControlTemplate>
@@ -53,7 +64,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Top]">
-
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="HorizontalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Left"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Right"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -75,6 +99,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Right]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="VerticalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Top"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Bottom"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -87,7 +125,7 @@
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.CardGutter}}" />
                <Setter Property="Orientation" Value="Vertical" />
            </Style>
-            
+
            <Style Selector="^ /template/ atom|IconButton#PART_AddTabButton">
                <Setter Property="Margin"
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.AddTabButtonMarginVertical}}" />
@@ -96,6 +134,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Bottom]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="HorizontalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Left"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Right"/>
+                <Setter Property="VerticalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -108,7 +160,7 @@
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.CardGutter}}" />
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
-            
+
            <Style Selector="^ /template/ atom|IconButton#PART_AddTabButton">
                <Setter Property="Margin"
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.AddTabButtonMarginHorizontal}}" />
@@ -117,6 +169,20 @@
        </Style>

        <Style Selector="^[TabStripPlacement=Left]">
+            <Style Selector="^ /template/ DockPanel#HeaderLayout">
+                <Setter Property="VerticalSpacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.SpacingXS}}"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderStartExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Top"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
+            <Style Selector="^ /template/ ContentPresenter#HeaderEndExtraContent">
+                <Setter Property="DockPanel.Dock" Value="Bottom"/>
+                <Setter Property="HorizontalAlignment" Value="Center"/>
+            </Style>
+            
            <!-- tabs 是否居中 -->
            <Style Selector="^[TabAlignmentCenter=True]">
                <Style Selector="^ /template/ atom|TabsContainerPanel#PART_TabsContainer">
@@ -129,7 +195,7 @@
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.CardGutter}}" />
                <Setter Property="Orientation" Value="Vertical" />
            </Style>
-            
+
            <Style Selector="^ /template/ atom|IconButton#PART_AddTabButton">
                <Setter Property="Margin"
                        Value="{DynamicResource {x:Static atom:TabControlTokenKey.AddTabButtonMarginVertical}}" />