feat: add TabStripDemo.

This commit is contained in:
Zhang Dian
2025-04-09 17:15:20 +08:00
parent f008333683
commit 28a1336413
5 changed files with 121 additions and 0 deletions

View File

@@ -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>

View File

@@ -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();
}
}

View File

@@ -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));
}

View File

@@ -219,6 +219,9 @@
<TabItem Header="TabControl">
<pages:TabControlDemo />
</TabItem>
<TabItem Header="TabStrip">
<pages:TabStripDemo />
</TabItem>
<TabItem Header="TreeView">
<pages:TreeViewDemo />
</TabItem>

View File

@@ -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