mirror of
https://gitcode.com/gh_mirrors/se/Semi.Avalonia
synced 2026-03-13 13:09:27 +08:00
feat: add LineTabControl Theme.
This commit is contained in:
Zhang Dian
@@ -80,7 +80,7 @@
|
||||
Padding="20,0,0,0"
|
||||
TabStripPlacement="Left"
|
||||
Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
|
||||
Theme="{DynamicResource ScrollTabControl}">
|
||||
Theme="{DynamicResource ScrollLineTabControl}">
|
||||
<TabControl.Styles>
|
||||
<Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
|
||||
<Setter Property="IsVisible" Value="False" />
|
||||
|
||||
@@ -2,6 +2,24 @@
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
x:CompileBindings="True">
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Width="400" Height="400" Margin="20">
|
||||
<TabControl
|
||||
Theme="{DynamicResource LineTabControl}"
|
||||
TabStripPlacement="Top">
|
||||
<TabItem Header="文档">
|
||||
<TextBlock Text="Content1" />
|
||||
</TabItem>
|
||||
<TabItem Header="快速起步" IsEnabled="False">
|
||||
<TextBlock Text="Content2" />
|
||||
</TabItem>
|
||||
<TabItem Header="帮助" IsSelected="True">
|
||||
<TextBlock Text="Content3" />
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
|
||||
<ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="TabControl">
|
||||
@@ -150,4 +168,136 @@
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="LineTabControl" TargetType="TabControl">
|
||||
<Setter Property="ItemContainerTheme" Value="{StaticResource LineTabControlItem}" />
|
||||
<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>
|
||||
<Border
|
||||
Name="PART_BorderSeparator"
|
||||
DockPanel.Dock="{TemplateBinding TabStripPlacement}"
|
||||
BorderBrush="{DynamicResource TabItemLinePipePressedBorderBrush}">
|
||||
<ItemsPresenter
|
||||
Name="PART_ItemsPresenter"
|
||||
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||
</Border>
|
||||
<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]">
|
||||
<Setter Property="TabControl.ItemsPanel">
|
||||
<ItemsPanelTemplate>
|
||||
<WrapPanel Orientation="Vertical" />
|
||||
</ItemsPanelTemplate>
|
||||
</Setter>
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 0 0 1" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 1 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 0 1 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="1 0 0 0" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="ScrollLineTabControl" TargetType="TabControl">
|
||||
<Setter Property="ItemContainerTheme" Value="{StaticResource LineTabControlItem}" />
|
||||
<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>
|
||||
<ScrollViewer
|
||||
Name="PART_ScrollViewer"
|
||||
DockPanel.Dock="{TemplateBinding TabStripPlacement}"
|
||||
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
|
||||
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
|
||||
<Border
|
||||
Name="PART_BorderSeparator"
|
||||
BorderBrush="{DynamicResource TabItemLinePipePressedBorderBrush}">
|
||||
<ItemsPresenter
|
||||
Name="PART_ItemsPresenter"
|
||||
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||
</Border>
|
||||
</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], ^[TabStripPlacement=Right]">
|
||||
<Setter Property="TabControl.ItemsPanel">
|
||||
<ItemsPanelTemplate>
|
||||
<VirtualizingStackPanel />
|
||||
</ItemsPanelTemplate>
|
||||
</Setter>
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 0 0 1" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 1 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="0 0 1 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
|
||||
<Setter Property="BorderThickness" Value="1 0 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Top]">
|
||||
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Bottom]">
|
||||
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left]">
|
||||
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Right]">
|
||||
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
|
||||
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@@ -2,12 +2,21 @@
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
x:CompileBindings="True">
|
||||
<!-- Theme: Card, Strip default is Strip -->
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Margin="20">
|
||||
<TabItem Header="Hello">
|
||||
<TextBlock Text="Content" />
|
||||
</TabItem>
|
||||
<StackPanel Width="400" Height="400" Margin="20">
|
||||
<TabControl
|
||||
Theme="{DynamicResource LineTabControl}"
|
||||
TabStripPlacement="Top">
|
||||
<TabItem Header="文档">
|
||||
<TextBlock Text="Content1" />
|
||||
</TabItem>
|
||||
<TabItem Header="快速起步" IsEnabled="False">
|
||||
<TextBlock Text="Content2" />
|
||||
</TabItem>
|
||||
<TabItem Header="帮助" IsSelected="True">
|
||||
<TextBlock Text="Content3" />
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
|
||||
@@ -122,4 +131,86 @@
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme x:Key="LineTabControlItem" TargetType="TabItem">
|
||||
<Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="TabItem">
|
||||
<ContentPresenter
|
||||
Name="PART_HeaderPresenter"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
FontFamily="{TemplateBinding FontFamily}"
|
||||
FontWeight="{TemplateBinding FontWeight}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}" />
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
|
||||
<!-- Selected state -->
|
||||
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
|
||||
<Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
|
||||
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
<!-- Unselected state -->
|
||||
<Style Selector="^:not(:selected)">
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
|
||||
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Background" Value="{DynamicResource SemiColorFill1}" />
|
||||
</Style>
|
||||
</Style>
|
||||
</Style>
|
||||
|
||||
<!-- Disabled state -->
|
||||
<Style Selector="^:disabled /template/ ContentPresenter#PART_HeaderPresenter">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
|
||||
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
|
||||
</Style>
|
||||
|
||||
<!-- TabStripPlacement States Group -->
|
||||
<Style Selector="^[TabStripPlacement=Top]">
|
||||
<Setter Property="Margin" Value="0 0 24 0" />
|
||||
<Setter Property="Padding" Value="4 16 4 14" />
|
||||
<Setter Property="BorderThickness" Value="0 0 0 2" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Bottom]">
|
||||
<Setter Property="Margin" Value="0 0 24 0" />
|
||||
<Setter Property="Padding" Value="4 14 4 16" />
|
||||
<Setter Property="BorderThickness" Value="0 2 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Left]">
|
||||
<Setter Property="Padding" Value="12" />
|
||||
<Setter Property="BorderThickness" Value="2 0 0 0" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Right]">
|
||||
<Setter Property="Padding" Value="12" />
|
||||
<Setter Property="BorderThickness" Value="0 0 2 0" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Right" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
Reference in New Issue
Block a user
