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
Split 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
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="20">
@ -11,17 +11,57 @@
</StackPanel>
</Border>
</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),
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
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. -->
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
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. -->
<x:Double x:Key="TabItemMinHeight">48</x:Double>
<x:Double x:Key="TabItemVerticalPipeHeight">24</x:Double>
<x:Double x:Key="TabItemPipeThickness">3</x:Double>
<CornerRadius x:Key="TabItemPipeCornerRadius">1.5</CornerRadius>
<x:Double x:Key="TabItemHeaderFontSize">24</x:Double>
<FontWeight x:Key="TabItemHeaderThemeFontWeight">SemiLight</FontWeight>
<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">
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
@ -29,19 +69,19 @@
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" />
<Setter Property="Padding" Value="{DynamicResource TabItemHeaderMargin}" />
<Setter Property="Height" Value="48" />
<Setter Property="Margin" Value="0" />
<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="Template">
<ControlTemplate>
<Border
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
@ -49,15 +89,18 @@
</Border.Transitions>
<Panel>
<ContentPresenter
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
/>
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
/>
<Border Name="PART_SelectedPipe"
Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
CornerRadius="{DynamicResource TabItemPipeCornerRadius}"
CornerRadius="{TemplateBinding CornerRadius}"
IsVisible="False"/>
</Panel>
</Border>
@ -68,72 +111,114 @@
<Setter Property="RecognizesAccessKey" Value="True" />
</Style>
<!-- Selected state -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background -->
<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>
<!-- Pointer-over -->
<Style Selector="^:pointerover">
<!-- PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
</Style>
</Style>
<!-- Selected PointerOver state -->
<Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</Style>
</Style>
<!-- Pressed state -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
<!-- 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>
<!-- Selected Pressed state -->
<Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
<!-- Selected state -->
<Style Selector="^:selected">
<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>
<!-- Disabled state -->
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Width" Value="NaN"/>
<Setter Property="Height" Value="{DynamicResource TabItemSelectionIndicatorHeight}"/>
</Style>
<!-- TabStripPlacement States Group -->
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
<Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
<Setter Property="Margin" Value="0,0,2,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Height" Value="NaN"/>
<Setter Property="Width" Value="{DynamicResource TabItemSelectionIndicatorHeight}"/>
</Style>
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Padding" Value="{DynamicResource TabItemHeaderVerticalMargin}"/>
</Style>
</Style>
<Style Selector="^[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="8,0,0,0" />
</Style>
<Style Selector="^[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, ^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
<Setter Property="Height" Value="{DynamicResource TabItemPipeThickness}" />
<Style Selector="^[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
<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="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
<Setter Property="Width" Value="{DynamicResource TabItemPipeThickness}" />
<Setter Property="Height" Value="{DynamicResource TabItemVerticalPipeHeight}" />
<Setter Property="Margin" Value="2,0,0,0" />
<Setter Property="Margin" Value="0,0,2,0" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
</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">
<Setter Property="Margin" Value="0,0,8,0" />
</Style>

Write Preview
Loading…
Cancel
Save