feat: add TreeView theme.
This commit is contained in:
rabbitism
Dong Bin
parent
2c90d24cc5
commit
348a77243d
@ -35,6 +35,9 @@
|
||||
<TabItem Header="TextBox">
|
||||
<pages:TextBoxDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="TreeView">
|
||||
<pages:TreeViewDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="RepeatButton">
|
||||
<pages:RepeatButtonDemo />
|
||||
</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/TextBlock.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/Window.axaml" />
|
||||
</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/TextBlock.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" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</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