From ecbe87bf3cc861faaed3f9f3a346ecbfe3a1266a Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Thu, 25 Jan 2024 23:19:16 +0800
Subject: [PATCH] feat: add scroll tab control.

---
 demo/Directory.Build.props                    |   2 +-
 .../Pages/TabControlDemo.axaml                | 141 +++++++++++-------
 .../Pages/TabControlDemo.axaml.cs             |   2 +
 .../ViewModels/TabControlDemoViewModel.cs     |  15 ++
 src/Package.props                             |   4 +-
 src/Semi.Avalonia/Controls/TabControl.axaml   |  86 +++++++++++
 6 files changed, 191 insertions(+), 59 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs

diff --git a/demo/Directory.Build.props b/demo/Directory.Build.props
index ae8bdf5..74d63f7 100644
--- a/demo/Directory.Build.props
+++ b/demo/Directory.Build.props
@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.0.0</AvaloniaVersion>
+    <AvaloniaVersion>11.0.7</AvaloniaVersion>
   </PropertyGroup>
 </Project>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index 94ba2ca..edb64b9 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -4,63 +4,92 @@
     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;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <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" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </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" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </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" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </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" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabStrip>
-                <TabStripItem>Tab 1</TabStripItem>
-                <TabStripItem>Tab 2</TabStripItem>
-            </TabStrip>
-        </Border>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <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" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </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" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </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" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </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" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabStrip>
+                    <TabStripItem>Tab 1</TabStripItem>
+                    <TabStripItem>Tab 2</TabStripItem>
+                </TabStrip>
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Top"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Left"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Bottom"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Right"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
index a01e76a..3d5bb3d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +10,6 @@ public partial class TabControlDemo : UserControl
     public TabControlDemo()
     {
         InitializeComponent();
+        this.DataContext = new TabControlDemoViewModel();
     }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
new file mode 100644
index 0000000..bbe153e
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
@@ -0,0 +1,15 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TabControlDemoViewModel: ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; }
+
+    public TabControlDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
+    }
+}
\ No newline at end of file
diff --git a/src/Package.props b/src/Package.props
index c3a98e0..3ad4e31 100644
--- a/src/Package.props
+++ b/src/Package.props
@@ -3,11 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>11</LangVersion>
-        <Version>11.0.1</Version>
+        <Version>11.0.7</Version>
         <Authors>IRIHI Technology</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.0.0</AvaloniaVersion>
+        <AvaloniaVersion>11.0.7</AvaloniaVersion>
         <PackageLicenseExpression>MIT</PackageLicenseExpression>
     </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/TabControl.axaml b/src/Semi.Avalonia/Controls/TabControl.axaml
index 90014f5..bd514f1 100644
--- a/src/Semi.Avalonia/Controls/TabControl.axaml
+++ b/src/Semi.Avalonia/Controls/TabControl.axaml
@@ -65,4 +65,90 @@
         </Style>
         -->
     </ControlTheme>
+    
+    <ControlTheme x:Key="ScrollTabControl" TargetType="TabControl">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <VirtualizingStackPanel Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </Setter>
+        <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}">
+                            <ScrollViewer Name="PART_ScrollViewer">
+                                <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12"/>
+                            </ScrollViewer>
+                            <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
+                        </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]">
+            <Style Selector="^ /template/ ItemsPresenter">
+                <Setter Property="ItemsPanel">
+                    <ItemsPanelTemplate>
+                        <VirtualizingStackPanel Orientation="Vertical"></VirtualizingStackPanel>
+                    </ItemsPanelTemplate>
+                </Setter>
+            </Style>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Left] /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+            <Setter Property="Margin" Value="0 0 12 0"></Setter>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Right] /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+        <Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
+            <Setter Property="Height" Value="1" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="VerticalAlignment" Value="Bottom" />
+            <Setter Property="Margin" Value="0 0 0 12"></Setter>
+        </Style>
+        <Style Selector="^[TabStripPlacement=Top] /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
+        </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=Bottom] /template/ ScrollViewer#PART_ScrollViewer">
+            <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
+            <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>