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

Fluent TabStrip style

pull/4133/head
Max Katz 6 years ago
parent
38011f37a7
commit
eee0e13a8d
2 changed files with 102 additions and 19 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. 14
      src/Avalonia.Themes.Fluent/TabStrip.xaml
  2. 107
      src/Avalonia.Themes.Fluent/TabStripItem.xaml

14
src/Avalonia.Themes.Fluent/TabStrip.xaml
View File

@ -1,11 +1,20 @@
<Styles xmlns="https://github.com/avaloniaui">
<Design.PreviewWith>
<Border Padding="20">
<TabStrip>
<TabStripItem>Item 1</TabStripItem>
<TabStripItem>Item 2</TabStripItem>
<TabStripItem IsEnabled="False">Disabled</TabStripItem>
</TabStrip>
</Border>
</Design.PreviewWith>
<Style Selector="TabStrip">
<Setter Property="Template">
<ControlTemplate>
<ItemsPresenter Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
ItemTemplate="{TemplateBinding ItemTemplate}"/>
ItemTemplate="{TemplateBinding ItemTemplate}" />
</ControlTemplate>
</Setter>
<Setter Property="ItemsPanel">
@ -14,7 +23,4 @@
</ItemsPanelTemplate>
</Setter>
</Style>
<Style Selector="TabStrip > TabStripItem">
<Setter Property="Margin" Value="16"/>
</Style>
</Styles>

107
src/Avalonia.Themes.Fluent/TabStripItem.xaml
View File

@ -1,23 +1,100 @@
<Styles xmlns="https://github.com/avaloniaui">
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="20">
<TabStripItem>Leaf</TabStripItem>
<TabStripItem IsSelected="True">Arch</TabStripItem>
</StackPanel>
</Border>
</Design.PreviewWith>
<Styles.Resources>
<x:Double x:Key="TabStripItemHeight">48</x:Double>
</Styles.Resources>
<Style Selector="TabStripItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource PivotHeaderItemFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselected}" />
<Setter Property="Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselected}" />
<Setter Property="Padding" Value="{DynamicResource PivotHeaderItemMargin}" />
<Setter Property="Margin" Value="0" />
<Setter Property="Height" Value="{DynamicResource TabStripItemHeight}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Name="PART_ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}"/>
<Border Name="PART_LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Panel>
<ContentPresenter Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextBlock.FontFamily="{TemplateBinding FontFamily}"
TextBlock.FontSize="{TemplateBinding FontSize}"
TextBlock.FontWeight="{TemplateBinding FontWeight}" />
<Border Name="PART_SelectedPipe"
Height="2"
Margin="0,0,0,2"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
CornerRadius="{DynamicResource ControlCornerRadius}"
Background="{DynamicResource PivotHeaderItemSelectedPipeFill}" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
</Style>
<!-- Nornal state -->
<Style Selector="TabStripItem /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{Binding $parent[TabStripItem].Background}" />
</Style>
<Style Selector="TabStripItem /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="False" />
</Style>
<!-- Selected state -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background -->
<Style Selector="TabStripItem:selected">
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelected}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelected}" />
</Style>
<Style Selector="TabStripItem:selected /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" />
</Style>
<!-- PointerOver state -->
<Style Selector="TabStripItem:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselectedPointerOver}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselectedPointerOver}" />
</Style>
<!-- Selected PointerOver state -->
<Style Selector="TabStripItem:selected:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelectedPointerOver}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelectedPointerOver}" />
</Style>
<!-- Pressed state -->
<Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundUnselectedPressed}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselectedPressed}" />
</Style>
<!-- Selected Pressed state -->
<Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundSelectedPressed}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundSelectedPressed}" />
</Style>
<!-- Disabled state -->
<Style Selector="TabStripItem:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource PivotHeaderItemBackgroundDisabled}" />
<Setter Property="TextBlock.Foreground" Value="{DynamicResource PivotHeaderItemForegroundDisabled}" />
</Style>
</Styles>
</Styles>

Write Preview
Loading…
Cancel
Save