feat: update TabControlDemo layout with improved border and alignment settings

This commit is contained in:
Dong Bin
2025-04-03 20:26:45 +08:00
parent 74071f48fe
commit 4a985f42bc

View File

@@ -13,12 +13,10 @@
<ScrollViewer> <ScrollViewer>
<StackPanel> <StackPanel>
<Border <Border
Theme="{StaticResource RadioButtonGroupBorder}"
Margin="8" Margin="8"
HorizontalAlignment="Left"> HorizontalAlignment="Left"
<ListBox Theme="{StaticResource RadioButtonGroupBorder}">
Name="place" <ListBox Name="place" Theme="{StaticResource ButtonRadioGroupListBox}">
Theme="{StaticResource ButtonRadioGroupListBox}">
<Dock>Left</Dock> <Dock>Left</Dock>
<Dock>Bottom</Dock> <Dock>Bottom</Dock>
<Dock>Right</Dock> <Dock>Right</Dock>
@@ -29,20 +27,14 @@
<TabItem Header="Default"> <TabItem Header="Default">
<StackPanel> <StackPanel>
<StackPanel <StackPanel
Margin="8"
Orientation="Horizontal" Orientation="Horizontal"
Spacing="8" Spacing="8">
Margin="8"> <TextBlock VerticalAlignment="Center" Text="ReverseSeparator" />
<TextBlock <ToggleSwitch Name="reverse" Theme="{StaticResource SimpleToggleSwitch}" />
VerticalAlignment="Center"
Text="ReverseSeparator" />
<ToggleSwitch
Name="reverse"
Theme="{StaticResource SimpleToggleSwitch}" />
</StackPanel> </StackPanel>
<Border Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
TabStripPlacement="{Binding #place.SelectedValue}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 3" Header="Tab 3" />
@@ -53,22 +45,19 @@
IsEnabled="False" /> IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Theme="{StaticResource CardBorder}" <Border Height="300" Theme="{StaticResource CardBorder}">
Height="300">
<TabControl <TabControl
Theme="{StaticResource ScrollTabControl}"
Classes.ReverseSeparator="{Binding #reverse.IsChecked}" Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
ItemsSource="{Binding Items}" ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" /> TabStripPlacement="{Binding #place.SelectedValue}"
Theme="{StaticResource ScrollTabControl}" />
</Border> </Border>
</StackPanel> </StackPanel>
</TabItem> </TabItem>
<TabItem Header="Line"> <TabItem Header="Line">
<StackPanel> <StackPanel>
<Border Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
Theme="{StaticResource LineTabControl}"
TabStripPlacement="{Binding #place.SelectedValue}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 3" Header="Tab 3" />
@@ -79,21 +68,21 @@
IsEnabled="False" /> IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Theme="{StaticResource CardBorder}" <Border Height="300" Theme="{StaticResource CardBorder}">
Height="300">
<TabControl <TabControl
Theme="{StaticResource ScrollLineTabControl}"
ItemsSource="{Binding Items}" ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" /> TabStripPlacement="{Binding #place.SelectedValue}"
Theme="{StaticResource ScrollLineTabControl}" />
</Border> </Border>
</StackPanel> </StackPanel>
</TabItem> </TabItem>
<TabItem Header="Card"> <TabItem Header="Card">
<StackPanel> <StackPanel>
<Border Theme="{StaticResource CardBorder}"> <Border
<TabControl MinHeight="150"
Theme="{StaticResource CardTabControl}" Background="Transparent"
TabStripPlacement="{Binding #place.SelectedValue}"> Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 3" Header="Tab 3" />
@@ -104,21 +93,21 @@
IsEnabled="False" /> IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Theme="{StaticResource CardBorder}" <Border
Height="300"> Height="300"
Background="Transparent"
Theme="{StaticResource CardBorder}">
<TabControl <TabControl
Theme="{StaticResource ScrollCardTabControl}"
ItemsSource="{Binding Items}" ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" /> TabStripPlacement="{Binding #place.SelectedValue}"
Theme="{StaticResource ScrollCardTabControl}" />
</Border> </Border>
</StackPanel> </StackPanel>
</TabItem> </TabItem>
<TabItem Header="Button"> <TabItem Header="Button">
<StackPanel> <StackPanel>
<Border Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
Theme="{StaticResource ButtonTabControl}"
TabStripPlacement="{Binding #place.SelectedValue}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 3" Header="Tab 3" />
@@ -129,12 +118,11 @@
IsEnabled="False" /> IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Theme="{StaticResource CardBorder}" <Border Height="300" Theme="{StaticResource CardBorder}">
Height="300">
<TabControl <TabControl
Theme="{StaticResource ScrollButtonTabControl}"
ItemsSource="{Binding Items}" ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" /> TabStripPlacement="{Binding #place.SelectedValue}"
Theme="{StaticResource ScrollButtonTabControl}" />
</Border> </Border>
</StackPanel> </StackPanel>
</TabItem> </TabItem>