zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-26 03:07:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign TabControlDemo.

Browse Source
This commit is contained in:
Zhang Dian
2025-03-31 10:30:31 +08:00
parent 8e7581fbe7
commit 09a070e3a9
2 changed files with 130 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
View File

@@ -11,85 +11,134 @@
x:DataType="vm:TabControlDemoViewModel" x:DataType="vm:TabControlDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<ScrollViewer> <ScrollViewer>
<StackPanel Spacing="20"> <StackPanel>
<Border Theme="{StaticResource CardBorder}"> <Border
<TabControl TabStripPlacement="Top"> Theme="{StaticResource RadioButtonGroupBorder}"
<TabItem Content="Hello 1" Header="Tab 1" /> Margin="8"
<TabItem Content="Hello 2" Header="Tab 2" /> HorizontalAlignment="Left">
<TabItem Content="Hello 3" Header="Tab 3" /> <ListBox
<TabItem Content="中文内容" Header="中文中文" /> Name="place"
<TabItem Theme="{StaticResource ButtonRadioGroupListBox}">
Content="Hello 4" <Dock>Left</Dock>
Header="Tab 4" <Dock>Bottom</Dock>
IsEnabled="False" /> <Dock>Right</Dock>
</TabControl> <Dock>Top</Dock>
</Border> </ListBox>
<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> </Border>
<TabControl Theme="{StaticResource LineTabControl}">
<TabItem Header="Default">
<StackPanel>
<StackPanel
Orientation="Horizontal"
Spacing="8"
Margin="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}">
<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}"
Height="300">
<TabControl
Theme="{StaticResource ScrollTabControl}"
Classes.ReverseSeparator="{Binding #reverse.IsChecked}"
ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" />
</Border>
</StackPanel>
</TabItem>
<TabItem Header="Line">
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<TabControl
Theme="{StaticResource LineTabControl}"
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" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
<Border Theme="{StaticResource CardBorder}"
Height="300">
<TabControl
Theme="{StaticResource ScrollLineTabControl}"
ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" />
</Border>
</StackPanel>
</TabItem>
<TabItem Header="Card">
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<TabControl
Theme="{StaticResource CardTabControl}"
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" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
<Border Theme="{StaticResource CardBorder}"
Height="300">
<TabControl
Theme="{StaticResource ScrollCardTabControl}"
ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" />
</Border>
</StackPanel>
</TabItem>
<TabItem Header="Button">
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<TabControl
Theme="{StaticResource ButtonTabControl}"
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" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
<Border Theme="{StaticResource CardBorder}"
Height="300">
<TabControl
Theme="{StaticResource ScrollButtonTabControl}"
ItemsSource="{Binding Items}"
TabStripPlacement="{Binding #place.SelectedValue}" />
</Border>
</StackPanel>
</TabItem>
</TabControl>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

9
demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs
View File

@@ -4,12 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
namespace Semi.Avalonia.Demo.ViewModels; namespace Semi.Avalonia.Demo.ViewModels;
public class TabControlDemoViewModel: ObservableObject public class TabControlDemoViewModel : ObservableObject
{ {
public ObservableCollection<string> Items { get; set; } public ObservableCollection<string> Items => new(Enumerable.Range(1, 200).Select(a => "Tab " + a));
public TabControlDemoViewModel()
{
Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
}
} }