tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fluent 2 - fix tabitem

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
9b2e2d76fe
commit
b033162703
1 changed files with 151 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      src/Avalonia.Themes.Fluent2/Controls/TabItem.xaml

217
src/Avalonia.Themes.Fluent2/Controls/TabItem.xaml
View File

@ -1,7 +1,7 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal"> x:ClassModifier="internal">
<Design.PreviewWith> <Design.PreviewWith>
<Border Padding="20"> <Border Padding="20">
<StackPanel Spacing="20"> <StackPanel Spacing="20">
@ -11,17 +11,57 @@
</StackPanel> </StackPanel>
</Border> </Border>
</Design.PreviewWith> </Design.PreviewWith>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<StaticResource x:Key="TabItemHeaderBackgroundUnselected" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundUnselectedPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundUnselectedPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelected" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelectedPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselected" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselectedPointerOver" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselectedPressed" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelected" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelectedPointerOver" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelectedPressed" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="TabItemHeaderSelectedPipeFill" ResourceKey="AccentFillColorDefaultBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<StaticResource x:Key="TabItemHeaderBackgroundUnselected" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundUnselectedPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundUnselectedPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelected" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundSelectedPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
<StaticResource x:Key="TabItemHeaderBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselected" ResourceKey="SystemControlForegroundBaseMediumBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselectedPointerOver" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundUnselectedPressed" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelected" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelectedPointerOver" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundSelectedPressed" ResourceKey="SystemControlHighlightAltBaseMediumHighBrush" />
<StaticResource x:Key="TabItemHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="TabItemHeaderSelectedPipeFill" ResourceKey="AccentFillColorDefaultBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<!-- WinUI reference: Pivot_themeresources.xaml (DefaultPivotHeaderItemStyle), <!-- WinUI reference: Pivot_themeresources.xaml (DefaultPivotHeaderItemStyle),
Uno.UI.FluentTheme.v2 Version2/PriorityDefault. Header: 24px SemiLight, padding 12,0, Uno.UI.FluentTheme.v2 Version2/PriorityDefault. Header: 24px SemiLight, padding 12,0,
height 48, subtle rounded hover fill; the selection indicator is an accent pill under height 48, subtle rounded hover fill; the selection indicator is an accent pill under
the header text (thickness bumped 2 -> 3 with fully rounded ends per the WinUI 3 the header text (thickness bumped 2 -> 3 with fully rounded ends per the WinUI 3
Fluent 2 selection-indicator shape). WinUI has no press scale. --> Fluent 2 selection-indicator shape). WinUI has no press scale. -->
<x:Double x:Key="TabItemMinHeight">48</x:Double> <x:Double x:Key="TabItemMinHeight">48</x:Double>
<x:Double x:Key="TabItemVerticalPipeHeight">24</x:Double> <x:Double x:Key="TabItemHeaderFontSize">24</x:Double>
<x:Double x:Key="TabItemPipeThickness">3</x:Double> <FontWeight x:Key="TabItemHeaderThemeFontWeight">SemiLight</FontWeight>
<CornerRadius x:Key="TabItemPipeCornerRadius">1.5</CornerRadius> <Thickness x:Key="TabItemHeaderMargin">12,0,12,0</Thickness>
<Thickness x:Key="TabItemHeaderVerticalMargin">0,12,0,12</Thickness>
<CornerRadius x:Key="TabItemHeaderSelectedPipeCornerRadius">1.5</CornerRadius>
<x:Double x:Key="TabItemSelectionIndicatorHeight">3</x:Double>
<ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem"> <ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
@ -29,19 +69,19 @@
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" /> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" /> <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" />
<Setter Property="Padding" Value="{DynamicResource TabItemHeaderMargin}" /> <Setter Property="Padding" Value="{DynamicResource TabItemHeaderMargin}" />
<Setter Property="Height" Value="48" />
<Setter Property="Margin" Value="0" /> <Setter Property="Margin" Value="0" />
<Setter Property="MinHeight" Value="{DynamicResource TabItemMinHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource TabItemMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource TabItemHeaderSelectedPipeCornerRadius}" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Border <Border
Name="PART_LayoutRoot" Name="PART_LayoutRoot"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
Padding="{TemplateBinding Padding}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" /> <BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
@ -49,15 +89,18 @@
</Border.Transitions> </Border.Transitions>
<Panel> <Panel>
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" FontSize="{TemplateBinding FontSize}"
/> FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
/>
<Border Name="PART_SelectedPipe" <Border Name="PART_SelectedPipe"
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
CornerRadius="{DynamicResource TabItemPipeCornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="False"/> IsVisible="False"/>
</Panel> </Panel>
</Border> </Border>
@ -68,72 +111,114 @@
<Setter Property="RecognizesAccessKey" Value="True" /> <Setter Property="RecognizesAccessKey" Value="True" />
</Style> </Style>
<!-- Selected state --> <!-- Pointer-over -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background --> <Style Selector="^:pointerover">
<Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
</Style>
<Style Selector="^:selected /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" />
</Style>
<!-- PointerOver state --> <Style Selector="^ /template/ Border#PART_LayoutRoot">
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot"> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" /> </Style>
</Style> </Style>
<!-- Selected PointerOver state --> <!-- Pressed -->
<Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot"> <Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" /> <Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</Style>
</Style> </Style>
<!-- Pressed state --> <!-- Disabled -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> <Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" /> <Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style>
</Style> </Style>
<!-- Selected Pressed state --> <!-- Selected state -->
<Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot"> <Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" /> <Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
</Style>
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" />
</Style>
<!-- Pointer-over -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
</Style>
</Style>
<!-- Disabled -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style>
</Style>
</Style> </Style>
<!-- Disabled state --> <Style Selector="^ /template/ Border#PART_SelectedPipe">
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot"> <Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" /> <Setter Property="Width" Value="NaN"/>
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" /> <Setter Property="Height" Value="{DynamicResource TabItemSelectionIndicatorHeight}"/>
</Style> </Style>
<!-- TabStripPlacement States Group --> <!-- TabStripPlacement States Group -->
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe"> <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
<Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" /> <Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" /> <Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,0,2,0" /> <Setter Property="Height" Value="NaN"/>
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Width" Value="{DynamicResource TabItemSelectionIndicatorHeight}"/>
<Setter Property="VerticalAlignment" Value="Center" /> </Style>
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Padding" Value="{DynamicResource TabItemHeaderVerticalMargin}"/>
</Style>
</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=Bottom] /template/ Border#PART_SelectedPipe">
<Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" /> <Setter Property="Margin" Value="0,2,0,0" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe">
<Setter Property="Margin" Value="0,0,0,2" /> <Setter Property="Margin" Value="0,0,0,2" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" /> <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="Margin" Value="0,0,2,0" />
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
<Setter Property="Margin" Value="2,0,0,0" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style> </Style>
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
<Setter Property="Margin" Value="2,0,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
</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" />
</Style> </Style>

Write Preview
Loading…
Cancel
Save