zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-05-03 06:21:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #582 from irihitech/Tab

Browse Source 
Redesign TabControl
This commit is contained in:
Dong Bin
2025-04-04 10:14:11 +08:00
committed by GitHub
parent 45b1c9ab73 610d7f4058
commit 39550a6010
18 changed files with 664 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

49
demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
View File

@@ -1,49 +0,0 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="NavigationTab" TargetType="TabControl">
<Setter Property="Template">
<ControlTemplate TargetType="TabControl">
<Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<DockPanel>
<ScrollViewer
DockPanel.Dock="Left"
Name="PART_ScrollViewer"
VerticalScrollBarVisibility="Auto">
<Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
<ItemsPresenter Name="PART_ItemsPresenter">
<ItemsPresenter.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsPresenter.ItemsPanel>
</ItemsPresenter>
<Border Name="PART_BorderSeparator"
Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
</ScrollViewer>
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
</DockPanel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
<Setter Property="Width" Value="1" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style Selector="^.Dismiss /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="IsVisible" Value="False" />
</Style>
</ControlTheme>
</ResourceDictionary>

1
demo/Semi.Avalonia.Demo/Themes/_index.axaml
View File

@@ -4,7 +4,6 @@
<ResourceInclude Source="ColorItemControl.axaml" />
<ResourceInclude Source="FunctionalColorGroupControl.axaml" />
<ResourceInclude Source="ShadowGroupControl.axaml" />
<ResourceInclude Source="TabMenu.axaml" />
<ResourceInclude Source="ToggleSwitch.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

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

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

13
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@@ -78,10 +78,19 @@
Grid.Row="1"
Margin="8"
Padding="20,0,0,0"
HorizontalAlignment="Stretch"
TabStripPlacement="Left"
Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
Theme="{DynamicResource NavigationTab}">
Theme="{DynamicResource ScrollLineTabControl}">
<TabControl.Styles>
<Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="IsVisible" Value="False" />
</Style>
</TabControl.Styles>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
<TabItem Header="Overview">
<pages:Overview />
</TabItem>