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

Tweaked TabStrip/Item ControlTemplates.

pull/8479/head
Steven Kirk 4 years ago
parent
27abe82009
commit
1af445893a
2 changed files with 116 additions and 126 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. 62
      src/Avalonia.Themes.Fluent/Controls/TabStrip.xaml
  2. 180
      src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml

62
src/Avalonia.Themes.Fluent/Controls/TabStrip.xaml
View File

@ -1,34 +1,34 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border Padding="20">
<TabStrip>
<TabStripItem>Item 1</TabStripItem>
<TabStripItem>Item 2</TabStripItem>
<TabStripItem IsEnabled="False">Disabled</TabStripItem>
</TabStrip>
</Border>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
ItemTemplate="{TemplateBinding ItemTemplate}" />
</Border>
</ControlTemplate>
</Setter>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter>
</ControlTheme>
<Design.PreviewWith>
<Border Padding="20">
<TabStrip>
<TabStripItem>Item 1</TabStripItem>
<TabStripItem>Item 2</TabStripItem>
<TabStripItem IsEnabled="False">Disabled</TabStripItem>
</TabStrip>
</Border>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter Name="PART_ItemsPresenter"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
ItemTemplate="{TemplateBinding ItemTemplate}" />
</Border>
</ControlTemplate>
</Setter>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

180
src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml
View File

@ -2,107 +2,97 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="20">
<TabStripItem>Leaf</TabStripItem>
<TabStripItem IsSelected="True">Arch</TabStripItem>
</StackPanel>
</Border>
</Design.PreviewWith>
<x:Double x:Key="TabStripItemMinHeight">48</x:Double>
<x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="20">
<TabStripItem>Leaf</TabStripItem>
<TabStripItem IsSelected="True">Arch</TabStripItem>
<TabStripItem Background="Yellow">Background</TabStripItem>
</StackPanel>
</Border>
</Design.PreviewWith>
<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="Margin" Value="0" />
<Setter Property="MinHeight" Value="{DynamicResource TabStripItemMinHeight}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border
Name="PART_LayoutRoot"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<ContentPresenter
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" />
<Border Name="PART_SelectedPipe" Background="{DynamicResource TabItemHeaderSelectedPipeFill}" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<x:Double x:Key="TabStripItemMinHeight">48</x:Double>
<x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
</Style>
<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="Margin" Value="0" />
<Setter Property="MinHeight" Value="{DynamicResource TabStripItemMinHeight}" />
<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}">
<Panel>
<ContentPresenter
Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" />
<Border Name="PART_SelectedPipe"
Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
CornerRadius="{DynamicResource ControlCornerRadius}"
Height="{DynamicResource TabStripItemPipeThickness}"
IsVisible="False"
Margin="0,0,0,2"
VerticalAlignment="Bottom"/>
</Panel>
</Border>
</ControlTemplate>
</Setter>
<!-- Nornal state -->
<Style Selector="^ /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{Binding $parent[TabStripItem].Background}" />
</Style>
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="Height" Value="{DynamicResource TabStripItemPipeThickness}" />
<Setter Property="Margin" Value="0,0,0,2" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</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>
<!-- 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>
<!-- PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
</Style>
<!-- PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
</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}" />
</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}" />
</Style>
<!-- Pressed state -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</Style>
<!-- Pressed state -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</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}" />
</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}" />
</Style>
<!-- Disabled state -->
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style>
</ControlTheme>
<!-- Disabled state -->
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style>
</ControlTheme>
</ResourceDictionary>

Write Preview
Loading…
Cancel
Save