From 348a77243d3c4d1ed68e324d032a11c008585b36 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 16 Dec 2022 18:56:07 +0800
Subject: [PATCH] feat: add TreeView theme.

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |   3 +
 .../Pages/TreeViewDemo.axaml                  |  42 +++++
 .../Pages/TreeViewDemo.axaml.cs               |  18 ++
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/TreeView.axaml     | 177 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 src/Semi.Avalonia/Themes/Light/TreeView.axaml |  24 +++
 7 files changed, 266 insertions(+)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/TreeView.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/TreeView.axaml

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index 553004b..8ab668d 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml
@@ -35,6 +35,9 @@
         <TabItem Header="TextBox">
             <pages:TextBoxDemo />
         </TabItem>
+        <TabItem Header="TreeView">
+            <pages:TreeViewDemo />
+        </TabItem>
         <TabItem Header="RepeatButton">
             <pages:RepeatButtonDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml b/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
new file mode 100644
index 0000000..74a29ee
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
@@ -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>
diff --git a/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
new file mode 100644
index 0000000..b6011a6
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
@@ -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);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 01ceddf..db08b35 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Controls/TreeView.axaml b/src/Semi.Avalonia/Controls/TreeView.axaml
new file mode 100644
index 0000000..44d2b03
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/TreeView.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 15d962d..163188d 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Light/TreeView.axaml b/src/Semi.Avalonia/Themes/Light/TreeView.axaml
new file mode 100644
index 0000000..7210326
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/TreeView.axaml
@@ -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>