From 28a1336413145f8894a63e0929b4da19289d6c05 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 9 Apr 2025 17:15:20 +0800
Subject: [PATCH] feat: add TabStripDemo.

---
 .../Pages/TabStripDemo.axaml                  | 93 +++++++++++++++++++
 .../Pages/TabStripDemo.axaml.cs               | 13 +++
 .../ViewModels/TabStripDemoViewModel.cs       | 10 ++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |  3 +
 src/Semi.Avalonia/Controls/TabStrip.axaml     |  2 +
 5 files changed, 121 insertions(+)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml.cs
 create mode 100644 demo/Semi.Avalonia.Demo/ViewModels/TabStripDemoViewModel.cs

diff --git a/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml
new file mode 100644
index 0000000..b078cba
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml
@@ -0,0 +1,93 @@
+<UserControl 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"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.TabStripDemo"
+             x:DataType="vm:TabStripDemoViewModel">
+    <Design.DataContext>
+        <vm:TabStripDemoViewModel />
+    </Design.DataContext>
+    <ScrollViewer>
+        <StackPanel>
+            <TabControl Theme="{StaticResource LineTabControl}">
+                <TabItem Header="Default">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip>
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Line">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource LineTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource LineTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Card">
+                    <StackPanel>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource CardTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource CardTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+                <TabItem Header="Button">
+                    <StackPanel>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip Theme="{StaticResource ButtonTabStrip}">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                                <TabStripItem Content="中文中文" />
+                                <TabStripItem Content="Tab 4" IsEnabled="False" />
+                            </TabStrip>
+                        </Border>
+                        <Border Theme="{StaticResource CardBorder}">
+                            <TabStrip
+                                ItemsSource="{Binding Items}"
+                                Theme="{StaticResource ButtonTabStrip}" />
+                        </Border>
+                    </StackPanel>
+                </TabItem>
+            </TabControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml.cs
new file mode 100644
index 0000000..40ccf12
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/TabStripDemo.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabStripDemo : UserControl
+{
+    public TabStripDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new TabStripDemoViewModel();
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/TabStripDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/TabStripDemoViewModel.cs
new file mode 100644
index 0000000..353fc5f
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TabStripDemoViewModel.cs
@@ -0,0 +1,10 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TabStripDemoViewModel : ObservableObject
+{
+    public ObservableCollection<string> Items => new(Enumerable.Range(1, 10).Select(a => "Tab " + a));
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 3eb3ccd..2f79f72 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -219,6 +219,9 @@
             <TabItem Header="TabControl">
                 <pages:TabControlDemo />
             </TabItem>
+            <TabItem Header="TabStrip">
+                <pages:TabStripDemo />
+            </TabItem>
             <TabItem Header="TreeView">
                 <pages:TreeViewDemo />
             </TabItem>
diff --git a/src/Semi.Avalonia/Controls/TabStrip.axaml b/src/Semi.Avalonia/Controls/TabStrip.axaml
index 6828287..71e6ec6 100644
--- a/src/Semi.Avalonia/Controls/TabStrip.axaml
+++ b/src/Semi.Avalonia/Controls/TabStrip.axaml
@@ -13,6 +13,7 @@
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
+        <Setter Property="VerticalAlignment" Value="Top"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="TabStrip">
                 <Border
@@ -51,6 +52,7 @@
         BasedOn="{StaticResource {x:Type TabStrip}}"
         TargetType="TabStrip">
         <Setter Property="ItemContainerTheme" Value="{StaticResource CardTabStripItem}" />
+        <Setter Property="VerticalAlignment" Value="Top"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="TabStrip">
                 <Border