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

fluent 2 - base tabstrip on selectorbar control

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
4278f23c18
commit
554471a2b9
2 changed files with 165 additions and 71 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. 2
      src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml
  2. 234
      src/Avalonia.Themes.Fluent2/Controls/TabStripItem.xaml

2
src/Avalonia.Themes.Fluent2/Controls/TabStrip.xaml
View File

@ -10,8 +10,10 @@
</TabStrip>
</Border>
</Design.PreviewWith>
<Thickness x:Key="TabStripBarPadding">0,4</Thickness>
<ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
<Setter Property="Padding" Value="{DynamicResource TabStripBarPadding}" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"

234
src/Avalonia.Themes.Fluent2/Controls/TabStripItem.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">
@ -12,96 +12,188 @@
</Border>
</Design.PreviewWith>
<!-- WinUI reference: Pivot_themeresources.xaml (DefaultPivotHeaderItemStyle),
Uno.UI.FluentTheme.v2 Version2/PriorityDefault. Mirrors TabItem.xaml: 24px SemiLight
header, padding 12,0, subtle rounded hover fill, accent selection pipe bumped
2 -> 3 with fully rounded ends. WinUI has no press scale. -->
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<StaticResource x:Key="TabStripItemPillFill" ResourceKey="AccentFillColorDefaultBrush"/>
<StaticResource x:Key="TabStripItemDisabledPillFill" ResourceKey="AccentFillColorDisabledBrush"/>
<StaticResource x:Key="TabStripItemBorderBrush" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushSelected" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushPressed" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
<StaticResource x:Key="TabStripItemBackground" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundSelected" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundPressed" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundDisabled" ResourceKey="SystemControlTransparentBrush"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<StaticResource x:Key="TabStripItemPillFill" ResourceKey="AccentFillColorDefaultBrush"/>
<StaticResource x:Key="TabStripItemDisabledPillFill" ResourceKey="AccentFillColorDisabledBrush"/>
<StaticResource x:Key="TabStripItemBorderBrush" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushPointerOver" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushSelected" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushPressed" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundPointerOver" ResourceKey="TextFillColorSecondaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundSelected" ResourceKey="TextFillColorPrimaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundPressed" ResourceKey="TextFillColorTertiaryBrush"/>
<StaticResource x:Key="TabStripItemForegroundDisabled" ResourceKey="TextFillColorDisabledBrush"/>
<StaticResource x:Key="TabStripItemBackground" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundSelected" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundPressed" ResourceKey="SystemControlTransparentBrush"/>
<StaticResource x:Key="TabStripItemBackgroundDisabled" ResourceKey="SystemControlTransparentBrush"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<x:Double x:Key="TabStripItemMinHeight">48</x:Double>
<x:Double x:Key="TabStripItemPipeThickness">3</x:Double>
<CornerRadius x:Key="TabStripItemPipeCornerRadius">1.5</CornerRadius>
<Thickness x:Key="TabStripItemBorderThickness">1</Thickness>
<Thickness x:Key="TabStripSelectedInnerThickness">1</Thickness>
<Thickness x:Key="TabStripItemIconVisualMargin">-2,0</Thickness>
<Thickness x:Key="TabStripItemTextVisualMargin">0</Thickness>
<Thickness x:Key="TabStripItemPadding">12,10,12,7</Thickness>
<Thickness x:Key="TabStripItemSelectionVisualMargin">0</Thickness>
<Thickness x:Key="TabStripItemFocusVisualMargin">-2</Thickness>
<x:Double x:Key="TabStripItemPillHeight">3</x:Double>
<x:Double x:Key="TabStripItemPillWidth">4</x:Double>
<x:Double x:Key="TabStripItemPillScaledWidth">16</x:Double>
<x:Double x:Key="TabStripItemIconScale">0.8</x:Double>
<x:Double x:Key="TabStripItemSpacing">8</x:Double>
<ControlTheme x:Key="TabStripItemPill" TargetType="Rectangle" BasedOn="{StaticResource ComboBoxItemPill}">
<Setter Property="Fill" Value="{DynamicResource TabStripItemPillFill}"/>
<Setter Property="Height" Value="{DynamicResource TabStripItemPillHeight}"/>
<Setter Property="Width" Value="{DynamicResource TabStripItemPillWidth}"/>
</ControlTheme>
<ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselected}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselected}" />
<Setter Property="Padding" Value="{DynamicResource TabItemHeaderMargin}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Foreground" Value="{DynamicResource TabStripItemForeground}"/>
<Setter Property="BorderBrush" Value="{DynamicResource TabStripItemBorderBrush}"/>
<Setter Property="BorderThickness" Value="{DynamicResource TabStripItemBorderThickness}"/>
<Setter Property="Padding" Value="{StaticResource TabStripItemPadding}"/>
<Setter Property="Margin" Value="0" />
<Setter Property="MinHeight" Value="{DynamicResource TabStripItemMinHeight}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
<Setter Property="Template">
<ControlTemplate>
<Border
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="{DynamicResource ControlFasterAnimationDuration}" />
</Transitions>
</Border.Transitions>
<Panel>
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
<ContentPresenter
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Border Name="PART_SelectedPipe"
Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
CornerRadius="{DynamicResource TabStripItemPipeCornerRadius}"
Height="{DynamicResource TabStripItemPipeThickness}"
IsVisible="False"
Margin="0,0,0,2"
VerticalAlignment="Bottom"/>
</Panel>
Grid.ColumnSpan="2"
Margin="{TemplateBinding Padding}"
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle x:Name="PART_SelectedPipe"
Grid.ColumnSpan="2"
Grid.Row="1"
Theme="{StaticResource TabStripItemPill}"
RadiusX="0.5"
RadiusY="1"
Margin="{DynamicResource TabStripItemSelectionVisualMargin}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
IsHitTestVisible="False"
Opacity="0">
<Rectangle.Transitions>
<Transitions>
<DoubleTransition Property="Width"
Duration="{DynamicResource ComboBoxItemScaleAnimationDuration}"
Easing="0,0,0,1"/>
</Transitions>
</Rectangle.Transitions>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter>
<!-- Pointer-over -->
<Style Selector="^:pointerover">
<!-- 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 Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
</Style>
</Style>
<!-- PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<!-- Selected PointerOver state -->
<Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPressed}" />
</Style>
</Style>
<!-- Pressed state -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</Style>
<!-- Disabled -->
<Style Selector="^:disabled">
<!-- Selected Pressed state -->
<Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundDisabled}" />
</Style>
<Style Selector="^ /template/ Rectangle#PART_SelectedPipe">
<Setter Property="Fill" Value="{DynamicResource TabStripItemDisabledPillFill}" />
</Style>
</Style>
<!-- Disabled state -->
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
<!-- Selected state -->
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundSelected}" />
</Style>
<Style Selector="^ /template/ Rectangle#PART_SelectedPipe">
<Setter Property="Opacity" Value="1" />
<Setter Property="Width" Value="{DynamicResource TabStripItemPillScaledWidth}" />
</Style>
<!-- Pointer-over -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
</Style>
</Style>
<!-- Pressed -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabStripItemBackgroundSelected}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabStripItemForegroundPointerOver}" />
</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>
</ControlTheme>
</ResourceDictionary>

Write Preview
Loading…
Cancel
Save