From 4a985f42bce88fd9752810bc335c2aa242923baf Mon Sep 17 00:00:00 2001
From: Dong Bin <popmessiah@hotmail.com>
Date: Thu, 3 Apr 2025 20:26:45 +0800
Subject: [PATCH] feat: update TabControlDemo layout with improved border and
 alignment settings

---
 .../Pages/TabControlDemo.axaml                | 78 ++++++++-----------
 1 file changed, 33 insertions(+), 45 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
index 2dfb09d..f62cae8 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
@@ -13,12 +13,10 @@
     <ScrollViewer>
         <StackPanel>
             <Border
-                Theme="{StaticResource RadioButtonGroupBorder}"
                 Margin="8"
-                HorizontalAlignment="Left">
-                <ListBox
-                    Name="place"
-                    Theme="{StaticResource ButtonRadioGroupListBox}">
+                HorizontalAlignment="Left"
+                Theme="{StaticResource RadioButtonGroupBorder}">
+                <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
                     <Dock>Left</Dock>
                     <Dock>Bottom</Dock>
                     <Dock>Right</Dock>
@@ -29,20 +27,14 @@
                 <TabItem Header="Default">
                     <StackPanel>
                         <StackPanel
+                            Margin="8"
                             Orientation="Horizontal"
-                            Spacing="8"
-                            Margin="8">
-                            <TextBlock
-                                VerticalAlignment="Center"
-                                Text="ReverseSeparator" />
-                            <ToggleSwitch
-                                Name="reverse"
-                                Theme="{StaticResource SimpleToggleSwitch}" />
+                            Spacing="8">
+                            <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
+                            <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
                         </StackPanel>
-                        <Border Theme="{StaticResource CardBorder}">
-                            <TabControl
-                                Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
-                                TabStripPlacement="{Binding #place.SelectedValue}">
+                        <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" />
@@ -53,22 +45,19 @@
                                     IsEnabled="False" />
                             </TabControl>
                         </Border>
-                        <Border Theme="{StaticResource CardBorder}"
-                                Height="300">
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
                             <TabControl
-                                Theme="{StaticResource ScrollTabControl}"
                                 Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
                                 ItemsSource="{Binding Items}"
-                                TabStripPlacement="{Binding #place.SelectedValue}" />
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollTabControl}" />
                         </Border>
                     </StackPanel>
                 </TabItem>
                 <TabItem Header="Line">
                     <StackPanel>
-                        <Border Theme="{StaticResource CardBorder}">
-                            <TabControl
-                                Theme="{StaticResource LineTabControl}"
-                                TabStripPlacement="{Binding #place.SelectedValue}">
+                        <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" />
@@ -79,21 +68,21 @@
                                     IsEnabled="False" />
                             </TabControl>
                         </Border>
-                        <Border Theme="{StaticResource CardBorder}"
-                                Height="300">
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
                             <TabControl
-                                Theme="{StaticResource ScrollLineTabControl}"
                                 ItemsSource="{Binding Items}"
-                                TabStripPlacement="{Binding #place.SelectedValue}" />
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollLineTabControl}" />
                         </Border>
                     </StackPanel>
                 </TabItem>
                 <TabItem Header="Card">
                     <StackPanel>
-                        <Border Theme="{StaticResource CardBorder}">
-                            <TabControl
-                                Theme="{StaticResource CardTabControl}"
-                                TabStripPlacement="{Binding #place.SelectedValue}">
+                        <Border
+                            MinHeight="150"
+                            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" />
@@ -104,21 +93,21 @@
                                     IsEnabled="False" />
                             </TabControl>
                         </Border>
-                        <Border Theme="{StaticResource CardBorder}"
-                                Height="300">
+                        <Border
+                            Height="300"
+                            Background="Transparent"
+                            Theme="{StaticResource CardBorder}">
                             <TabControl
-                                Theme="{StaticResource ScrollCardTabControl}"
                                 ItemsSource="{Binding Items}"
-                                TabStripPlacement="{Binding #place.SelectedValue}" />
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollCardTabControl}" />
                         </Border>
                     </StackPanel>
                 </TabItem>
                 <TabItem Header="Button">
                     <StackPanel>
-                        <Border Theme="{StaticResource CardBorder}">
-                            <TabControl
-                                Theme="{StaticResource ButtonTabControl}"
-                                TabStripPlacement="{Binding #place.SelectedValue}">
+                        <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" />
@@ -129,12 +118,11 @@
                                     IsEnabled="False" />
                             </TabControl>
                         </Border>
-                        <Border Theme="{StaticResource CardBorder}"
-                                Height="300">
+                        <Border Height="300" Theme="{StaticResource CardBorder}">
                             <TabControl
-                                Theme="{StaticResource ScrollButtonTabControl}"
                                 ItemsSource="{Binding Items}"
-                                TabStripPlacement="{Binding #place.SelectedValue}" />
+                                TabStripPlacement="{Binding #place.SelectedValue}"
+                                Theme="{StaticResource ScrollButtonTabControl}" />
                         </Border>
                     </StackPanel>
                 </TabItem>