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

Merge pull request #5 from irihitech/tabcontrol

Browse Source 
TabControl
This commit is contained in:
Dong Bin 2022-12-13 00:42:49 +08:00 committed by GitHub
commit a9039f0c49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 172 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Semi.Avalonia.Demo/MainWindow.axaml
View File

@ -23,5 +23,8 @@
<TabItem Header="Border"> <TabItem Header="Border">
<pages:BorderDemo /> <pages:BorderDemo />
</TabItem> </TabItem>
<TabItem Header="TabControl">
<pages:TabControlDemo />
</TabItem>
</TabControl> </TabControl>
</Window> </Window>

36
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml Normal file
View File

@ -0,0 +1,36 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.TabControlDemo" 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" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel>
<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" />
</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" />
</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" />
</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" />
</TabControl>
</Border>
</StackPanel>
</UserControl>

18
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs Normal file
View File

@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class TabControlDemo : UserControl
{
public TabControlDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

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

@ -1,32 +1,34 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<ControlTheme TargetType="TabControl" x:Key="{x:Type TabControl}"> <ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
<Setter Property="Margin" Value="0" /> <Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="{DynamicResource TabItemMargin}" /> <Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="{DynamicResource TabControlBackground}" /> <Setter Property="Background" Value="{DynamicResource TabControlBackground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="TabControl"> <ControlTemplate TargetType="TabControl">
<Border <Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}">
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<DockPanel> <DockPanel>
<ItemsPresenter <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
DockPanel.Dock="{TemplateBinding TabStripPlacement}" <ItemsPresenter
ItemTemplate="{TemplateBinding ItemTemplate}" Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}" ItemTemplate="{TemplateBinding ItemTemplate}"
ItemsPanel="{TemplateBinding ItemsPanel}" Items="{TemplateBinding Items}"
Name="PART_ItemsPresenter" /> ItemsPanel="{TemplateBinding ItemsPanel}" />
<Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
<ContentPresenter <ContentPresenter
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Name="PART_SelectedContentHost" Name="PART_SelectedContentHost"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
</DockPanel> </DockPanel>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
@ -38,8 +40,30 @@
<Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter &gt; WrapPanel"> <Style Selector="^[TabStripPlacement=Right] /template/ ItemsPresenter#PART_ItemsPresenter &gt; WrapPanel">
<Setter Property="Orientation" Value="Vertical" /> <Setter Property="Orientation" Value="Vertical" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter"> <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
<Setter Property="Margin" Value="{DynamicResource TabControlTopPlacementItemMargin}" /> <Setter Property="Border.Width" Value="1" />
<Setter Property="Border.VerticalAlignment" Value="Stretch" />
<Setter Property="Border.HorizontalAlignment" Value="Left" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
<Setter Property="Border.Width" Value="1" />
<Setter Property="Border.VerticalAlignment" Value="Stretch" />
<Setter Property="Border.HorizontalAlignment" Value="Right" />
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
<Setter Property="Border.Height" Value="1" />
<Setter Property="Border.HorizontalAlignment" Value="Stretch" />
<Setter Property="Border.VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
<Setter Property="Border.Height" Value="1" />
<Setter Property="Border.HorizontalAlignment" Value="Stretch" />
<Setter Property="Border.VerticalAlignment" Value="Top" />
</Style>
<!--
<Style Selector="^[TabStripPlacement=Top] /template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="Margin" Value="8" />
</Style>
-->
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

@ -1,19 +1,24 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Theme: Card, Strip default is Strip --> <!-- Theme: Card, Strip default is Strip -->
<Design.PreviewWith>
<StackPanel Margin="20">
<TabItem Foreground="Red" Header="Hello">
<TextBlock Text="Content" />
</TabItem>
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem"> <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" /> <Setter Property="TabItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
<Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" /> <Setter Property="TabItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" /> <Setter Property="TabItem.Margin" Value="0" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" /> <Setter Property="TabItem.Padding" Value="8 4" />
<Setter Property="Padding" Value="8" /> <Setter Property="TabItem.MinHeight" Value="5" />
<Setter Property="Margin" Value="0" /> <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="5" /> <Setter Property="TabItem.Template">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate TargetType="TabItem"> <ControlTemplate TargetType="TabItem">
<Border <Border
Name="PART_LayoutRoot" Name="PART_LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
@ -21,16 +26,17 @@
<Panel> <Panel>
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplate="{TemplateBinding HeaderTemplate}"
FontFamily="{TemplateBinding FontFamily}" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}"
FontWeight="{TemplateBinding FontWeight}" /> TextElement.FontSize="30" />
<Border <Border
Name="PART_SelectedPipe" Name="PART_SelectedPipe"
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" Background="{DynamicResource TabItemLinePipeSelectedBackground}"
CornerRadius="{DynamicResource ControlCornerRadius}" CornerRadius="{DynamicResource ControlCornerRadius}"
IsVisible="False" /> IsVisible="False" />
</Panel> </Panel>
@ -41,16 +47,19 @@
<!-- Selected state --> <!-- Selected state -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background --> <!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background -->
<Style Selector="^:selected"> <Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" /> <Setter Property="Foreground" Value="Blue" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
</Style> </Style>
<Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style Selector="^:selected /template/ Border#PART_SelectedPipe"> <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" /> <Setter Property="IsVisible" Value="True" />
</Style> </Style>
<!-- PointerOver state --> <!-- PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot"> <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
</Style> </Style>
@ -79,30 +88,48 @@
</Style> </Style>
<!-- TabStripPlacement States Group --> <!-- TabStripPlacement States Group -->
<Style Selector="^[TabStripPlacement=Top]">
<Style Selector="^ /template/Border#PART_SelectedPipe">
<Setter Property="Height" Value="2" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,0,0,4" />
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Bottom]">
<Style Selector="^ /template/Border#PART_SelectedPipe">
<Setter Property="Height" Value="2" />
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,4,0,0" />
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe"> <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
<Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" /> <Setter Property="Border.Width" Value="2" />
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" /> <Setter Property="Border.Margin" Value="0,0,8,0" />
<Setter Property="Margin" Value="0,0,2,0" /> <Setter Property="Border.HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Border.VerticalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="8,0,0,0" /> <Setter Property="Margin" Value="8,0,0,0" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe"> <Style Selector="^[TabStripPlacement=Top] /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" /> <Setter Property="Margin" Value="0,0,0,8" />
<Setter Property="Margin" Value="0,0,0,2" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe"> <Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
<Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" /> <Setter Property="Width" Value="2" />
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
<Setter Property="Margin" Value="2,0,0,0" /> <Setter Property="Margin" Value="2,0,0,0" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Stretch" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,0,8,0" /> <Setter Property="Margin" Value="0,0,8,0" />
@ -111,4 +138,5 @@
<Setter Property="HorizontalContentAlignment" Value="Right" /> <Setter Property="HorizontalContentAlignment" Value="Right" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

2
src/Semi.Avalonia/Themes/Light/Light.axaml
View File

@ -7,6 +7,8 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" /> <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
</ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries>

14
src/Semi.Avalonia/Themes/Light/TabItem.axaml
View File

@ -1,3 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<!-- Line -->
<SolidColorBrush x:Key="TabItemLinePipeBackground" Color="Transparent" />
<SolidColorBrush x:Key="TabItemLinePipeSelectedBackground" Color="#0077FA" />
<SolidColorBrush x:Key="TabItemLinePipePointeroverBorderBrush" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="TabItemLinePipePressedBorderBrush" Opacity="0.13" Color="#2E3238" />
<SolidColorBrush x:Key="TabItemLineHeaderForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="TabItemLineHeaderPointeroverForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="TabItemLineHeaderBackground" Color="Transparent" />
<SolidColorBrush x:Key="TabItemLineHeaderPointeroverBackground" Color="Transparent" />
<SolidColorBrush x:Key="TabItemLineHeaderSelectedForeground" Color="Transparent" />
</ResourceDictionary> </ResourceDictionary>