feat: add TreeView theme.
This commit is contained in:
rabbitism
Dong Bin
parent
2c90d24cc5
commit
348a77243d
@ -35,6 +35,9 @@
|
|||||||
<TabItem Header="TextBox">
|
<TabItem Header="TextBox">
|
||||||
<pages:TextBoxDemo />
|
<pages:TextBoxDemo />
|
||||||
</TabItem>
|
</TabItem>
|
||||||
|
<TabItem Header="TreeView">
|
||||||
|
<pages:TreeViewDemo />
|
||||||
|
</TabItem>
|
||||||
<TabItem Header="RepeatButton">
|
<TabItem Header="RepeatButton">
|
||||||
<pages:RepeatButtonDemo />
|
<pages:RepeatButtonDemo />
|
||||||
</TabItem>
|
</TabItem>
|
||||||
|
|||||||
42
src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
Normal file
42
src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<UserControl
|
||||||
|
x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo" 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">
|
||||||
|
<Panel>
|
||||||
|
<TreeView>
|
||||||
|
<TreeViewItem Header="Level 1">
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2">
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem>
|
||||||
|
<TreeViewItem.Header>
|
||||||
|
<StackPanel>
|
||||||
|
<TextBlock>Layer 1</TextBlock>
|
||||||
|
<TextBlock>Layer 2</TextBlock>
|
||||||
|
<TextBlock>Layer 3</TextBlock>
|
||||||
|
</StackPanel>
|
||||||
|
</TreeViewItem.Header>
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
<TreeViewItem Header="Level 4" />
|
||||||
|
</TreeViewItem>
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
</TreeViewItem>
|
||||||
|
</TreeViewItem>
|
||||||
|
</TreeView>
|
||||||
|
</Panel>
|
||||||
|
</UserControl>
|
||||||
18
src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
Normal file
18
src/Semi.Avalonia.Demo/Pages/TreeViewDemo.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 TreeViewDemo : UserControl
|
||||||
|
{
|
||||||
|
public TreeViewDemo()
|
||||||
|
{
|
||||||
|
InitializeComponent();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void InitializeComponent()
|
||||||
|
{
|
||||||
|
AvaloniaXamlLoader.Load(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -15,6 +15,7 @@
|
|||||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
|
||||||
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
|
||||||
</ResourceDictionary.MergedDictionaries>
|
</ResourceDictionary.MergedDictionaries>
|
||||||
|
|||||||
177
src/Semi.Avalonia/Controls/TreeView.axaml
Normal file
177
src/Semi.Avalonia/Controls/TreeView.axaml
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
<ResourceDictionary
|
||||||
|
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
|
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
|
||||||
|
|
||||||
|
<Design.PreviewWith>
|
||||||
|
<StackPanel
|
||||||
|
Height="200" Margin="20"
|
||||||
|
Spacing="20">
|
||||||
|
<TreeView>
|
||||||
|
<TreeViewItem Header="Level 1">
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2" />
|
||||||
|
<TreeViewItem Header="Level 2">
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
<TreeViewItem Header="Level 3" />
|
||||||
|
</TreeViewItem>
|
||||||
|
</TreeViewItem>
|
||||||
|
</TreeView>
|
||||||
|
</StackPanel>
|
||||||
|
</Design.PreviewWith>
|
||||||
|
|
||||||
|
<ControlTheme x:Key="{x:Type TreeView}" TargetType="TreeView">
|
||||||
|
<Setter Property="TreeView.Background" Value="Transparent" />
|
||||||
|
<Setter Property="TreeView.BorderBrush" Value="Transparent" />
|
||||||
|
<Setter Property="TreeView.BorderThickness" Value="0" />
|
||||||
|
<Setter Property="TreeView.Padding" Value="8 0" />
|
||||||
|
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
|
||||||
|
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
|
||||||
|
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
|
||||||
|
<Setter Property="Template">
|
||||||
|
<ControlTemplate TargetType="TreeView">
|
||||||
|
<Border
|
||||||
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}">
|
||||||
|
<ScrollViewer
|
||||||
|
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
|
||||||
|
Background="{TemplateBinding Background}"
|
||||||
|
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
|
||||||
|
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
|
||||||
|
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
|
||||||
|
<ItemsPresenter
|
||||||
|
Name="PART_ItemsPresenter"
|
||||||
|
Margin="{TemplateBinding Padding}"
|
||||||
|
Items="{TemplateBinding Items}"
|
||||||
|
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||||
|
</ScrollViewer>
|
||||||
|
</Border>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
</ControlTheme>
|
||||||
|
|
||||||
|
<converters:MarginMultiplierConverter
|
||||||
|
x:Key="TreeViewItemLeftMarginConverter"
|
||||||
|
Indent="{StaticResource SizeTreeViewItemIndent}"
|
||||||
|
Left="True" />
|
||||||
|
<ControlTheme x:Key="ToggleButtonTreeViewItemIconButton" TargetType="ToggleButton">
|
||||||
|
<Setter Property="Margin" Value="0" />
|
||||||
|
<Setter Property="ToggleButton.Cursor" Value="Hand" />
|
||||||
|
<Setter Property="Template">
|
||||||
|
<ControlTemplate TargetType="ToggleButton">
|
||||||
|
<Border
|
||||||
|
Width="{TemplateBinding Width}"
|
||||||
|
Height="{TemplateBinding Height}"
|
||||||
|
HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||||
|
Background="Transparent">
|
||||||
|
<PathIcon
|
||||||
|
Name="PART_ExpandIconPath"
|
||||||
|
Width="{DynamicResource SizeTreeViewItemIconSize}"
|
||||||
|
Height="{DynamicResource SizeTreeViewItemIconSize}"
|
||||||
|
Data="{DynamicResource ExpanderIconData}"
|
||||||
|
Foreground="{DynamicResource ColorTreeViewItemIconDefaultForeground}">
|
||||||
|
<PathIcon.Transitions>
|
||||||
|
<Transitions>
|
||||||
|
<TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
|
||||||
|
</Transitions>
|
||||||
|
</PathIcon.Transitions>
|
||||||
|
</PathIcon>
|
||||||
|
</Border>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
|
||||||
|
<Style Selector="^:checked /template/ PathIcon#PART_ExpandIconPath">
|
||||||
|
<Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^:pointerover /template/ PathIcon#PART_ExpandIconPath">
|
||||||
|
<Setter Property="PathIcon.Foreground" Value="{DynamicResource ColorTreeViewItemIconHoverForeground}" />
|
||||||
|
</Style>
|
||||||
|
</ControlTheme>
|
||||||
|
|
||||||
|
<ControlTheme x:Key="{x:Type TreeViewItem}" TargetType="TreeViewItem">
|
||||||
|
<Setter Property="TreeViewItem.Padding" Value="0" />
|
||||||
|
<Setter Property="TreeViewItem.Background" Value="{DynamicResource ColorTreeViewItemDefaultBackground}" />
|
||||||
|
<Setter Property="TreeViewItem.Foreground" Value="{DynamicResource ColorTreeViewItemDefaultForeground}" />
|
||||||
|
<Setter Property="TreeViewItem.CornerRadius" Value="3" />
|
||||||
|
<Setter Property="TreeViewItem.VerticalAlignment" Value="Center" />
|
||||||
|
<Setter Property="TreeViewItem.Template">
|
||||||
|
<ControlTemplate TargetType="TreeViewItem">
|
||||||
|
<StackPanel>
|
||||||
|
<Border
|
||||||
|
Name="PART_LayoutRoot"
|
||||||
|
MinHeight="{TemplateBinding MinHeight}"
|
||||||
|
Padding="{DynamicResource ThicknessTreeViewItemPadding}"
|
||||||
|
Background="{TemplateBinding Background}"
|
||||||
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}"
|
||||||
|
Focusable="True" TemplatedControl.IsTemplateFocusTarget="True">
|
||||||
|
<Grid
|
||||||
|
Name="PART_Header"
|
||||||
|
Margin="{TemplateBinding Level,
|
||||||
|
Mode=OneWay,
|
||||||
|
Converter={StaticResource TreeViewItemLeftMarginConverter}}"
|
||||||
|
ColumnDefinitions="Auto, *">
|
||||||
|
<Panel
|
||||||
|
Name="PART_ExpandCollapseChevronContainer" Grid.Column="0"
|
||||||
|
Margin="{StaticResource ThicknessTreeViewItemIconMargin}">
|
||||||
|
<ToggleButton
|
||||||
|
Name="PART_ExpandCollapseChevron" Focusable="False"
|
||||||
|
IsChecked="{TemplateBinding IsExpanded,
|
||||||
|
Mode=TwoWay}"
|
||||||
|
Theme="{StaticResource ToggleButtonTreeViewItemIconButton}" />
|
||||||
|
</Panel>
|
||||||
|
<ContentPresenter
|
||||||
|
Name="PART_HeaderPresenter" Grid.Column="1"
|
||||||
|
Margin="{TemplateBinding Padding}"
|
||||||
|
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
|
||||||
|
VerticalAlignment="{TemplateBinding VerticalAlignment}"
|
||||||
|
Content="{TemplateBinding Header}"
|
||||||
|
Focusable="False"
|
||||||
|
Foreground="{TemplateBinding Foreground}" />
|
||||||
|
</Grid>
|
||||||
|
</Border>
|
||||||
|
<ItemsPresenter
|
||||||
|
Name="PART_ItemsPresenter"
|
||||||
|
IsVisible="{TemplateBinding IsExpanded}"
|
||||||
|
Items="{TemplateBinding Items}"
|
||||||
|
ItemsPanel="{TemplateBinding ItemsPanel}" />
|
||||||
|
</StackPanel>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
|
||||||
|
<!-- PointerOver state -->
|
||||||
|
<Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
|
||||||
|
<Setter Property="Background" Value="{DynamicResource ColorTreeViewItemPointerOverBackground}" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Pressed state -->
|
||||||
|
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
|
||||||
|
<Setter Property="Background" Value="{DynamicResource ColorTreeViewItemPressedBackground}" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Disabled state -->
|
||||||
|
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
|
||||||
|
<Setter Property="Background" Value="{DynamicResource ColorTreeViewItemDisabledBackground}" />
|
||||||
|
</Style>
|
||||||
|
<Style Selector="^:disabled /template/ ContentPresenter#PART_HeaderPresenter">
|
||||||
|
<Setter Property="Foreground" Value="{DynamicResource ColorTreeViewItemDisabledForeground}" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Selected state -->
|
||||||
|
<Style Selector="^:selected /template/ Border#PART_LayoutRoot">
|
||||||
|
<Setter Property="Background" Value="{DynamicResource ColorTreeViewItemSelectedBackground}" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<!-- Disabled Selected state -->
|
||||||
|
<Style Selector="^:disabled:selected /template/ Border#PART_LayoutRoot">
|
||||||
|
<Setter Property="Background" Value="{DynamicResource ColorTreeViewItemSelectedDisabledBackground}" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
<Style Selector="^:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
|
||||||
|
<Setter Property="ToggleButton.Opacity" Value="0" />
|
||||||
|
<Setter Property="ToggleButton.IsHitTestVisible" Value="False" />
|
||||||
|
</Style>
|
||||||
|
|
||||||
|
</ControlTheme>
|
||||||
|
</ResourceDictionary>
|
||||||
@ -13,6 +13,7 @@
|
|||||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.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/TextBlock.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
|
||||||
|
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
|
||||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
|
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
|
||||||
</ResourceDictionary.MergedDictionaries>
|
</ResourceDictionary.MergedDictionaries>
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
24
src/Semi.Avalonia/Themes/Light/TreeView.axaml
Normal file
24
src/Semi.Avalonia/Themes/Light/TreeView.axaml
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<ResourceDictionary
|
||||||
|
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
|
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
|
||||||
|
<sys:Double x:Key="SizeTreeViewItemIndent">20</sys:Double>
|
||||||
|
<sys:Double x:Key="SizeTreeViewItemIconSize">8</sys:Double>
|
||||||
|
<Thickness x:Key="TreeViewItemExpandCollapseChevronMargin">12, 0, 12, 0</Thickness>
|
||||||
|
|
||||||
|
<StreamGeometry x:Key="ExpanderIconData">M9.65618 3.44015L18.6322 11.2454C19.0906 11.644 19.0906 12.356 18.6322 12.7546L9.65618 20.5598C9.00895 21.1226 8 20.6629 8 19.8052V4.19475C8 3.33705 9.00895 2.87734 9.65618 3.44015Z</StreamGeometry>
|
||||||
|
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemDefaultForeground" Color="#1C1F23" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemIconDefaultForeground" Opacity="0.62" Color="#1C1F23" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemIconHoverForeground" Color="#1C1F23" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemDisabledForeground" Opacity="0.35" Color="#1C1F23" />
|
||||||
|
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemDefaultBackground" Color="Transparent" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemPointerOverBackground" Opacity="0.05" Color="#2E3238" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemPressedBackground" Opacity="0.09" Color="#2E3238" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemSelectedBackground" Color="#EAF5FF" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemDisabledBackground" Color="Transparent" />
|
||||||
|
<SolidColorBrush x:Key="ColorTreeViewItemSelectedDisabledBackground" Opacity="0.04" Color="#2E3238" />
|
||||||
|
|
||||||
|
<Thickness x:Key="ThicknessTreeViewItemIconMargin">0 0 8 0</Thickness>
|
||||||
|
<Thickness x:Key="ThicknessTreeViewItemPadding">8 4 0 4</Thickness>
|
||||||
|
</ResourceDictionary>
|
||||||
Loading…
x
Reference in New Issue
Block a user