feat: add scroll tab control.

This commit is contained in:
rabbitism
2024-01-25 23:19:16 +08:00
parent c9fd4c9605
commit ecbe87bf3c
6 changed files with 191 additions and 59 deletions

View File

@@ -1,6 +1,6 @@
<Project>
<PropertyGroup>
<Nullable>enable</Nullable>
<AvaloniaVersion>11.0.0</AvaloniaVersion>
<AvaloniaVersion>11.0.7</AvaloniaVersion>
</PropertyGroup>
</Project>

View File

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

View File

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

View File

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