feat: add tab theme. encountered some issue with ContentPresenter text element style.
This commit is contained in:
rabbitism
parent
31f9fc6115
commit
392f432a7b
@ -23,5 +23,8 @@
|
||||
<TabItem Header="Border">
|
||||
<pages:BorderDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="TabControl">
|
||||
<pages:TabControlDemo />
|
||||
</TabItem>
|
||||
</TabControl>
|
||||
</Window>
|
||||
|
||||
28
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
Normal file
28
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
Normal file
@ -0,0 +1,28 @@
|
||||
<UserControl
|
||||
x:Class="Semi.Avalonia.Demo.Pages.TabControlDemo" xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
|
||||
d:DesignWidth="800" mc:Ignorable="d">
|
||||
<StackPanel>
|
||||
<TabControl TabStripPlacement="Top">
|
||||
<TabItem Content="Hello 1" Header="Tab 1" />
|
||||
<TabItem Content="Hello 2" Header="Tab 2" />
|
||||
<TabItem Content="Hello 3" Header="Tab 3" />
|
||||
</TabControl>
|
||||
<TabControl TabStripPlacement="Left">
|
||||
<TabItem Content="Hello 1" Header="Tab 1" />
|
||||
<TabItem Content="Hello 2" Header="Tab 2" />
|
||||
<TabItem Content="Hello 3" Header="Tab 3" />
|
||||
</TabControl>
|
||||
<TabControl TabStripPlacement="Right">
|
||||
<TabItem Content="Hello 1" Header="Tab 1" />
|
||||
<TabItem Content="Hello 2" Header="Tab 2" />
|
||||
<TabItem Content="Hello 3" Header="Tab 3" />
|
||||
</TabControl>
|
||||
<TabControl TabStripPlacement="Bottom">
|
||||
<TabItem Content="Hello 1" Header="Tab 1" />
|
||||
<TabItem Content="Hello 2" Header="Tab 2" />
|
||||
<TabItem Content="Hello 3" Header="Tab 3" />
|
||||
</TabControl>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
18
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
Normal file
18
src/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml.cs
Normal file
@ -0,0 +1,18 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
public partial class TabControlDemo : UserControl
|
||||
{
|
||||
public TabControlDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,22 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Theme: Card, Strip default is Strip -->
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Margin="20">
|
||||
<TabItem Foreground="Red" Header="Hello">
|
||||
<TextBlock Text="Content" />
|
||||
</TabItem>
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
|
||||
<ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
|
||||
<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="8" />
|
||||
<Setter Property="Margin" Value="0" />
|
||||
<Setter Property="MinHeight" Value="5" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="TabItem">
|
||||
<Setter Property="TabItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
|
||||
<Setter Property="TabItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
|
||||
<Setter Property="TabItem.Padding" Value="8" />
|
||||
<Setter Property="TabItem.Margin" Value="0" />
|
||||
<Setter Property="TabItem.MinHeight" Value="5" />
|
||||
<Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="TabItem.Template">
|
||||
<ControlTemplate>
|
||||
<Border
|
||||
Name="PART_LayoutRoot"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
@ -18,7 +24,7 @@
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}">
|
||||
<Panel>
|
||||
<Grid>
|
||||
<ContentPresenter
|
||||
Name="PART_ContentPresenter"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
@ -26,14 +32,14 @@
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
FontFamily="{TemplateBinding FontFamily}"
|
||||
FontSize="{TemplateBinding FontSize}"
|
||||
FontWeight="{TemplateBinding FontWeight}" />
|
||||
FontWeight="{TemplateBinding FontWeight}"
|
||||
TextElement.FontSize="30" />
|
||||
<Border
|
||||
Name="PART_SelectedPipe"
|
||||
Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
|
||||
Background="{DynamicResource TabItemLinePipeSelectedBackground}"
|
||||
CornerRadius="{DynamicResource ControlCornerRadius}"
|
||||
IsVisible="False" />
|
||||
</Panel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
@ -41,9 +47,9 @@
|
||||
<!-- 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}" />
|
||||
<Setter Property="Foreground" Value="Blue" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:selected /template/ Border#PART_SelectedPipe">
|
||||
<Setter Property="IsVisible" Value="True" />
|
||||
</Style>
|
||||
@ -80,29 +86,27 @@
|
||||
|
||||
<!-- 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" />
|
||||
<Setter Property="Border.Width" Value="2" />
|
||||
<Setter Property="Border.Margin" Value="0,0,2,0" />
|
||||
<Setter Property="Border.HorizontalAlignment" Value="Left" />
|
||||
<Setter Property="Border.VerticalAlignment" Value="Stretch" />
|
||||
</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}" />
|
||||
<Setter Property="Height" Value="2" />
|
||||
<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="Width" Value="2" />
|
||||
<Setter Property="Margin" Value="2,0,0,0" />
|
||||
<Setter Property="HorizontalAlignment" Value="Right" />
|
||||
<Setter Property="VerticalAlignment" Value="Center" />
|
||||
<Setter Property="VerticalAlignment" Value="Stretch" />
|
||||
</Style>
|
||||
<Style Selector="^[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
|
||||
<Setter Property="Margin" Value="0,0,8,0" />
|
||||
@ -111,4 +115,5 @@
|
||||
<Setter Property="HorizontalContentAlignment" Value="Right" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
</ResourceDictionary>
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<!-- Line -->
|
||||
<SolidColorBrush x:Key="TabItemLinePipeBackground" Color="Transparent" />
|
||||
<SolidColorBrush x:Key="TabItemLinePipeSelectedBackground" Color="#0077FA" />
|
||||
<SolidColorBrush x:Key="TabItemLinePipePointeroverBorderBrush" Opacity="0.09" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TabItemLinePipePressedBorderBrush" Opacity="0.13" Color="#2E3238" />
|
||||
|
||||
<SolidColorBrush x:Key="TabItemLineHeaderForeground" Opacity="0.62" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TabItemLineHeaderPointeroverForeground" Color="#1C1F23" />
|
||||
|
||||
<SolidColorBrush x:Key="TabItemLineHeaderBackground" Color="Transparent" />
|
||||
<SolidColorBrush x:Key="TabItemLineHeaderPointeroverBackground" Color="Transparent" />
|
||||
<SolidColorBrush x:Key="TabItemLineHeaderSelectedForeground" Color="Transparent" />
|
||||
|
||||
|
||||
</ResourceDictionary>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user