zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-26 03:07:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update TabItem with icon. (#778)

Browse Source
This commit is contained in:
Zhang Dian
2026-03-25 19:51:23 +08:00
committed by GitHub
parent a1bda0d2d9
commit 0fbcf43309
6 changed files with 100 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,14 +34,10 @@
</StackPanel> </StackPanel>
<Border MinHeight="150" Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}"> <TabControl Classes.ReverseSeparator="{Binding #reverse.IsChecked}" TabStripPlacement="{Binding #place.SelectedValue}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Height="300" Theme="{StaticResource CardBorder}"> <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -57,14 +53,10 @@
<StackPanel> <StackPanel>
<Border MinHeight="150" Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}"> <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource LineTabControl}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Height="300" Theme="{StaticResource CardBorder}"> <Border Height="300" Theme="{StaticResource CardBorder}">
@@ -82,14 +74,10 @@
Background="Transparent" Background="Transparent"
Theme="{StaticResource CardBorder}"> Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}"> <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource CardTabControl}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border <Border
@@ -107,14 +95,10 @@
<StackPanel> <StackPanel>
<Border MinHeight="150" Theme="{StaticResource CardBorder}"> <Border MinHeight="150" Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}"> <TabControl TabStripPlacement="{Binding #place.SelectedValue}" Theme="{StaticResource ButtonTabControl}">
<TabItem Content="Hello 1" Header="Tab 1" /> <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TabItem Content="Hello 2" Header="Tab 2" /> <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
<TabItem Content="Hello 3" Header="Tab 3" /> <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
<TabItem Content="中文内容" Header="中文中文" /> <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
<TabItem
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl> </TabControl>
</Border> </Border>
<Border Height="300" Theme="{StaticResource CardBorder}"> <Border Height="300" Theme="{StaticResource CardBorder}">

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

@@ -6,16 +6,12 @@
Width="400" Width="400"
Height="400" Height="400"
Margin="20"> Margin="20">
<TabItem Theme="{DynamicResource CardTabItem}" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}"> <TabControl TabStripPlacement="Top" Theme="{DynamicResource LineTabControl}">
<TabItem Header="文档"> <TabItem Content="Hello 1" Header="文档" Icon="{StaticResource SemiIconFile}" />
<TextBlock Text="Content1" /> <TabItem Content="Hello 2" Header="快速起步" Icon="{StaticResource SemiIconGlobe}" />
</TabItem> <TabItem Content="Hello 4" Header="无效" Icon="{StaticResource SemiIconClear}" IsEnabled="False" />
<TabItem Header="快速起步"> <TabItem Content="Hello 3" Header="帮助" Icon="{StaticResource SemiIconHelpCircle}" />
<TextBlock Text="Content2" />
</TabItem>
<TabItem Header="帮助" IsSelected="True">
<TextBlock Text="Content3" />
</TabItem>
</TabControl> </TabControl>
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
@@ -25,20 +21,39 @@
<Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemLinePipeBackground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="TabItem"> <ControlTemplate TargetType="TabItem">
<ContentPresenter <Border
Name="PART_HeaderPresenter" Name="PART_RootBorder"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Header}" CornerRadius="{TemplateBinding CornerRadius}">
ContentTemplate="{TemplateBinding HeaderTemplate}" <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
CornerRadius="{TemplateBinding CornerRadius}" <ContentPresenter
FontFamily="{TemplateBinding FontFamily}" Name="PART_IconPresenter"
FontWeight="{TemplateBinding FontWeight}" DockPanel.Dock="Left"
Foreground="{TemplateBinding Foreground}" /> Content="{TemplateBinding Icon}"
ContentTemplate="{TemplateBinding IconTemplate}"
IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
<ContentPresenter.DataTemplates>
<DataTemplate DataType="Geometry">
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{Binding}" />
</DataTemplate>
</ContentPresenter.DataTemplates>
</ContentPresenter>
<ContentPresenter
Name="PART_HeaderPresenter"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}" />
</DockPanel>
</Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@@ -46,17 +61,31 @@
<Setter Property="RecognizesAccessKey" Value="True" /> <Setter Property="RecognizesAccessKey" Value="True" />
</Style> </Style>
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected">
<Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" /> <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" /> <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemIconSelectedForeground}" />
</Style>
</Style> </Style>
<Style Selector="^:not(:selected)"> <Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" /> <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
</Style>
</Style> </Style>
</Style> </Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter,^ /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderDisabledForeground}" />
</Style>
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme <ControlTheme
@@ -65,15 +94,15 @@
TargetType="TabItem"> TargetType="TabItem">
<Setter Property="Padding" Value="8 4" /> <Setter Property="Padding" Value="8 4" />
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
</Style> </Style>
<Style Selector="^:not(:selected)"> <Style Selector="^:not(:selected)">
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
</Style> </Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pressed /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Style> </Style>
</Style> </Style>
@@ -98,27 +127,27 @@
x:Key="LineTabItem" x:Key="LineTabItem"
BasedOn="{StaticResource BaseTabItem}" BasedOn="{StaticResource BaseTabItem}"
TargetType="TabItem"> TargetType="TabItem">
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]"> <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderSelectedBackground}" />
</Style> </Style>
</Style> </Style>
<Style Selector="^:not(:selected)"> <Style Selector="^:not(:selected)">
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
</Style> </Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pressed /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]"> <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPointeroverBackground}" />
</Style> </Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pressed /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemLineHeaderPressedBackground}" />
</Style> </Style>
</Style> </Style>
@@ -150,15 +179,15 @@
TargetType="TabItem"> TargetType="TabItem">
<Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource TabControlSeparatorBorderBrush}" />
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderSelectedBackground}" />
</Style> </Style>
<Style Selector="^:not(:selected)"> <Style Selector="^:not(:selected)">
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPointeroverBackground}" />
</Style> </Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pressed /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemCardHeaderPressedBackground}" />
</Style> </Style>
</Style> </Style>
@@ -207,16 +236,20 @@
TargetType="TabItem"> TargetType="TabItem">
<Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" /> <Setter Property="CornerRadius" Value="{DynamicResource SemiBorderRadiusSmall}" />
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:selected">
<Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" /> <Style Selector="^ /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderSelectedBackground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemButtonHeaderSelectedForeground}" />
</Style>
</Style> </Style>
<Style Selector="^:not(:selected)"> <Style Selector="^:not(:selected)">
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPointeroverBackground}" />
</Style> </Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^:pressed /template/ Border#PART_RootBorder">
<Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource TabItemButtonHeaderPressedBackground}" />
</Style> </Style>
</Style> </Style>

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

@@ -19,4 +19,7 @@
<StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" /> <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
<StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" /> <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
<StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorDisabledText" />
</ResourceDictionary> </ResourceDictionary>

3
src/Semi.Avalonia/Themes/HighContrast/TabItem.axaml
View File

@@ -19,4 +19,7 @@
<StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorHighlightText" /> <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorHighlightText" />
<StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" /> <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorHighlightText" />
<StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorHighlightText" /> <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorHighlightText" />
<StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorHighlight" />
<StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorGrayText" />
</ResourceDictionary> </ResourceDictionary>

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

@@ -19,4 +19,7 @@
<StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" /> <StaticResource x:Key="TabItemButtonHeaderSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
<StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" /> <StaticResource x:Key="TabItemButtonHeaderPointeroverBackground" ResourceKey="SemiColorFill0" />
<StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" /> <StaticResource x:Key="TabItemButtonHeaderPressedBackground" ResourceKey="SemiColorFill1" />
<StaticResource x:Key="TabItemIconSelectedForeground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="TabItemHeaderDisabledForeground" ResourceKey="SemiColorDisabledText" />
</ResourceDictionary> </ResourceDictionary>

1
src/Semi.Avalonia/Themes/Shared/TabItem.axaml
View File

@@ -1,4 +1,5 @@
<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">
<StaticResource x:Key="TabItemIconHeaderSpacing" ResourceKey="SemiSpacingTight" />
<StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" /> <StaticResource x:Key="TabItemSelectedFontWeight" ResourceKey="SemiFontWeightBold" />
<StaticResource x:Key="TabItemCardDefaultHeight" ResourceKey="SemiHeightControlDefault" /> <StaticResource x:Key="TabItemCardDefaultHeight" ResourceKey="SemiHeightControlDefault" />
</ResourceDictionary> </ResourceDictionary>