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

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

@ -2,107 +2,97 @@
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:CompileBindings="True"> x:CompileBindings="True">
<Design.PreviewWith> <Design.PreviewWith>
<Border Padding="20"> <Border Padding="20">
<StackPanel Spacing="20"> <StackPanel Spacing="20">
<TabStripItem>Leaf</TabStripItem> <TabStripItem>Leaf</TabStripItem>
<TabStripItem IsSelected="True">Arch</TabStripItem> <TabStripItem IsSelected="True">Arch</TabStripItem>
</StackPanel> <TabStripItem Background="Yellow">Background</TabStripItem>
</Border> </StackPanel>
</Design.PreviewWith> </Border>
</Design.PreviewWith>
<x:Double x:Key="TabStripItemMinHeight">48</x:Double>
<x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
<ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem"> <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" /> <x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
<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>
<Style Selector="^ /template/ Border#PART_SelectedPipe"> <ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> <Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
</Style> <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 --> <!-- Selected state -->
<Style Selector="^ /template/ Border#PART_LayoutRoot"> <!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background -->
<Setter Property="Background" Value="{Binding $parent[TabStripItem].Background}" /> <Style Selector="^:selected">
</Style> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" />
<Style Selector="^ /template/ Border#PART_SelectedPipe"> <Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" />
<Setter Property="IsVisible" Value="False" /> </Style>
</Style> <Style Selector="^:selected /template/ Border#PART_SelectedPipe">
<Style Selector="^ /template/ Border#PART_SelectedPipe"> <Setter Property="IsVisible" Value="True" />
<Setter Property="Height" Value="{DynamicResource TabStripItemPipeThickness}" /> </Style>
<Setter Property="Margin" Value="0,0,0,2" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<!-- Selected state --> <!-- PointerOver state -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background --> <Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Style Selector="^:selected"> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" />
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelected}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
<Setter Property="Foreground" Value="{DynamicResource TabItemHeaderForegroundSelected}" /> </Style>
</Style>
<Style Selector="^:selected /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" />
</Style>
<!-- PointerOver state --> <!-- Selected PointerOver state -->
<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot"> <Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPointerOver}" /> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" />
</Style> </Style>
<!-- Selected PointerOver state --> <!-- Pressed state -->
<Style Selector="^:selected:pointerover /template/ Border#PART_LayoutRoot"> <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPointerOver}" /> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPointerOver}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
</Style> </Style>
<!-- Pressed state --> <!-- Selected Pressed state -->
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> <Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundUnselectedPressed}" /> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
</Style> </Style>
<!-- Selected Pressed state --> <!-- Disabled state -->
<Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot"> <Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" /> <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" /> <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style> </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> </ResourceDictionary>

Write Preview
Loading…
Cancel
Save