zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-23 18:06:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add CardTabControl & ButtonTabControl.

Browse Source
This commit is contained in:
Zhang Dian
2025-03-26 17:19:37 +08:00
parent c447fd8d5d
commit c5e8bd6662
4 changed files with 239 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,7 @@
ItemsPanel="{TemplateBinding ItemsPanel}" /> ItemsPanel="{TemplateBinding ItemsPanel}" />
<Border <Border
Name="PART_BorderSeparator" Name="PART_BorderSeparator"
Background="{DynamicResource TabItemLinePipePressedBorderBrush}" /> Background="{DynamicResource SemiColorBorder}" />
</Panel> </Panel>
<ContentPresenter <ContentPresenter
Name="PART_SelectedContentHost" Name="PART_SelectedContentHost"
@@ -184,7 +184,7 @@
<Border <Border
Name="PART_BorderSeparator" Name="PART_BorderSeparator"
DockPanel.Dock="{TemplateBinding TabStripPlacement}" DockPanel.Dock="{TemplateBinding TabStripPlacement}"
BorderBrush="{DynamicResource TabItemLinePipePressedBorderBrush}"> BorderBrush="{DynamicResource SemiColorBorder}">
<ItemsPresenter <ItemsPresenter
Name="PART_ItemsPresenter" Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}" /> ItemsPanel="{TemplateBinding ItemsPanel}" />
@@ -300,4 +300,106 @@
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CardTabControl" TargetType="TabControl">
<Setter Property="ItemContainerTheme" Value="{StaticResource CardTabControlItem}" />
<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}">
<Border
Name="PART_BorderSeparator"
Background="{DynamicResource SemiColorBorder}" />
<ItemsPresenter
Name="PART_ItemsPresenter"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</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]">
<Setter Property="TabControl.ItemsPanel">
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter>
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_BorderSeparator">
<Setter Property="Height" Value="1" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</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=Left] /template/ Border#PART_BorderSeparator">
<Setter Property="Width" Value="1" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_BorderSeparator">
<Setter Property="Width" Value="1" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
</ControlTheme>
<ControlTheme x:Key="ButtonTabControl" TargetType="TabControl">
<Setter Property="ItemContainerTheme" Value="{StaticResource ButtonTabControlItem}" />
<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}">
<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>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

@@ -213,4 +213,137 @@
<Setter Property="HorizontalContentAlignment" Value="Right" /> <Setter Property="HorizontalContentAlignment" Value="Right" />
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CardTabControlItem" TargetType="TabItem">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
<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="Background" Value="{DynamicResource SemiColorBackground0}" />
</Style>
<!-- Unselected state -->
<Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
<Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource SemiColorFill1}" />
</Style>
</Style>
<!-- TabStripPlacement States Group -->
<Style Selector="^[TabStripPlacement=Top]">
<Setter Property="Margin" Value="0 0 8 0" />
<Setter Property="Padding" Value="12 8" />
<Setter Property="CornerRadius" Value="3 3 0 0" />
<Style Selector="^:selected">
<Setter Property="BorderThickness" Value="1 1 1 0" />
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Bottom]">
<Setter Property="Margin" Value="0 0 8 0" />
<Setter Property="Padding" Value="12 8" />
<Setter Property="CornerRadius" Value="0 0 3 3" />
<Style Selector="^:selected">
<Setter Property="BorderThickness" Value="1 0 1 1" />
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Left]">
<Setter Property="Margin" Value="0 0 0 8" />
<Setter Property="Padding" Value="12 8" />
<Setter Property="CornerRadius" Value="3 0 0 3" />
<Style Selector="^:selected">
<Setter Property="BorderThickness" Value="1 1 0 1" />
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Right]">
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="Margin" Value="0 0 0 8" />
<Setter Property="Padding" Value="12 8" />
<Setter Property="CornerRadius" Value="0 3 3 0" />
<Style Selector="^:selected">
<Setter Property="BorderThickness" Value="0 1 1 1" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="ButtonTabControlItem" TargetType="TabItem">
<Setter Property="Padding" Value="12 8" />
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
<Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
<Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
<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="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
<Setter Property="Foreground" Value="{DynamicResource SemiColorPrimary}" />
<Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
</Style>
<!-- Unselected state -->
<Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
<Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Background" Value="{DynamicResource SemiColorFill1}" />
</Style>
</Style>
<!-- TabStripPlacement States Group -->
<Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
<Setter Property="TabControl.Margin" Value="0 0 8 0" />
</Style>
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
<Setter Property="TabControl.Margin" Value="0 0 0 8" />
</Style>
<Style Selector="^[TabStripPlacement=Right]">
<Setter Property="HorizontalContentAlignment" Value="Right" />
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>

2
src/Semi.Avalonia/Themes/Dark/TabItem.axaml
View File

@@ -5,6 +5,6 @@
<StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" /> <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" /> <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
<StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" /> <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
<StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" /> <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
</ResourceDictionary> </ResourceDictionary>

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

@@ -5,6 +5,6 @@
<StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="TabItemLinePipePointeroverBorderBrush" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" /> <StaticResource x:Key="TabItemLinePipePressedBorderBrush" ResourceKey="SemiColorFill2" />
<StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" /> <StaticResource x:Key="TabItemLineHeaderForeground" ResourceKey="SemiColorText2" />
<StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText1" /> <StaticResource x:Key="TabItemLineHeaderPointeroverForeground" ResourceKey="SemiColorText0" />
<StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" /> <StaticResource x:Key="TabItemLineHeaderSelectedForeground" ResourceKey="SemiColorText0" />
</ResourceDictionary> </ResourceDictionary>