zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #281 from irihitech/tab

Browse Source 
feat: add scroll tab control.
This commit is contained in:
Zhang Dian 2024-01-26 19:23:49 +08:00 committed by GitHub
commit 74140e9db1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 191 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/Directory.Build.props
View File

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

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

@ -4,63 +4,92 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="vm:TabControlDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel Spacing="20"> <ScrollViewer>
<Border Theme="{StaticResource CardBorder}"> <StackPanel Spacing="20">
<TabControl TabStripPlacement="Top"> <Border Theme="{StaticResource CardBorder}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabControl TabStripPlacement="Top">
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="Tab 3" />
<TabItem <TabItem Content="中文内容" Header="中文中文" />
Content="Hello 4" <TabItem
Header="Tab 4" Content="Hello 4"
IsEnabled="False" /> Header="Tab 4"
</TabControl> IsEnabled="False" />
</Border> </TabControl>
<Border Theme="{StaticResource CardBorder}"> </Border>
<TabControl TabStripPlacement="Left"> <Border Theme="{StaticResource CardBorder}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabControl TabStripPlacement="Left">
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="Tab 3" />
<TabItem <TabItem Content="中文内容" Header="中文中文" />
Content="Hello 4" <TabItem
Header="Tab 4" Content="Hello 4"
IsEnabled="False" /> Header="Tab 4"
</TabControl> IsEnabled="False" />
</Border> </TabControl>
<Border Theme="{StaticResource CardBorder}"> </Border>
<TabControl TabStripPlacement="Right"> <Border Theme="{StaticResource CardBorder}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabControl TabStripPlacement="Right">
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="Tab 3" />
<TabItem <TabItem Content="中文内容" Header="中文中文" />
Content="Hello 4" <TabItem
Header="Tab 4" Content="Hello 4"
IsEnabled="False" /> Header="Tab 4"
</TabControl> IsEnabled="False" />
</Border> </TabControl>
<Border Theme="{StaticResource CardBorder}"> </Border>
<TabControl TabStripPlacement="Bottom"> <Border Theme="{StaticResource CardBorder}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabControl TabStripPlacement="Bottom">
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 1" Header="Tab 1" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 2" Header="Tab 2" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="Tab 3" />
<TabItem <TabItem Content="中文内容" Header="中文中文" />
Content="Hello 4" <TabItem
Header="Tab 4" Content="Hello 4"
IsEnabled="False" /> Header="Tab 4"
</TabControl> IsEnabled="False" />
</Border> </TabControl>
<Border Theme="{StaticResource CardBorder}"> </Border>
<TabStrip> <Border Theme="{StaticResource CardBorder}">
<TabStripItem>Tab 1</TabStripItem> <TabStrip>
<TabStripItem>Tab 2</TabStripItem> <TabStripItem>Tab 1</TabStripItem>
</TabStrip> <TabStripItem>Tab 2</TabStripItem>
</Border> </TabStrip>
</StackPanel> </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> </UserControl>

2
demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
View File

@ -1,6 +1,7 @@
using Avalonia; using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Markup.Xaml; using Avalonia.Markup.Xaml;
using Semi.Avalonia.Demo.ViewModels;
namespace Semi.Avalonia.Demo.Pages; namespace Semi.Avalonia.Demo.Pages;
@ -9,5 +10,6 @@ public partial class TabControlDemo : UserControl
public TabControlDemo() public TabControlDemo()
{ {
InitializeComponent(); InitializeComponent();
this.DataContext = new TabControlDemoViewModel();
} }
} }

15
demo/Semi.Avalonia.Demo/ViewModels/TabControlDemoViewModel.cs Normal file
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));
}
}

4
src/Package.props
View File

@ -3,11 +3,11 @@
<TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks> <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
<Nullable>enable</Nullable> <Nullable>enable</Nullable>
<LangVersion>11</LangVersion> <LangVersion>11</LangVersion>
<Version>11.0.1</Version> <Version>11.0.7</Version>
<Authors>IRIHI Technology</Authors> <Authors>IRIHI Technology</Authors>
<Description>Avalonia Theme inspired by Semi Design.</Description> <Description>Avalonia Theme inspired by Semi Design.</Description>
<PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl> <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
<AvaloniaVersion>11.0.0</AvaloniaVersion> <AvaloniaVersion>11.0.7</AvaloniaVersion>
<PackageLicenseExpression>MIT</PackageLicenseExpression> <PackageLicenseExpression>MIT</PackageLicenseExpression>
</PropertyGroup> </PropertyGroup>
</Project> </Project>

86
src/Semi.Avalonia/Controls/TabControl.axaml
View File

@ -65,4 +65,90 @@
</Style> </Style>
--> -->
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="ScrollTabControl" TargetType="TabControl">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter>
<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>
<Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
<ScrollViewer Name="PART_ScrollViewer">
<ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12"/>
</ScrollViewer>
<Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
<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], ^[TabStripPlacement=Right]">
<Style Selector="^ /template/ ItemsPresenter">
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</Setter>
</Style>
</Style>
<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="^[TabStripPlacement=Left] /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
</Style>
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
<Setter Property="Width" Value="1" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Margin" Value="0 0 12 0"></Setter>
</Style>
<Style Selector="^[TabStripPlacement=Right] /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
<Setter Property="Height" Value="1" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="Margin" Value="0 0 0 12"></Setter>
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
</Style>
<Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
<Setter Property="Height" Value="1" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[TabStripPlacement=Bottom] /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>