From 580c03f5118b2479424b9fcda016995353ffb243 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Mon, 22 Jun 2020 02:54:25 -0400
Subject: [PATCH] Fluent TreeView and TreeViewItem

---
 src/Avalonia.Themes.Fluent/TreeView.xaml     |  17 +-
 src/Avalonia.Themes.Fluent/TreeViewItem.xaml | 246 +++++++++++++------
 2 files changed, 176 insertions(+), 87 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/TreeView.xaml b/src/Avalonia.Themes.Fluent/TreeView.xaml
index 6ed2fd17b8..292317eb34 100644
--- a/src/Avalonia.Themes.Fluent/TreeView.xaml
+++ b/src/Avalonia.Themes.Fluent/TreeView.xaml
@@ -1,10 +1,11 @@
-<Style xmlns="https://github.com/avaloniaui" Selector="TreeView">
-  <Setter Property="Background" Value="Transparent"/>
-  <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-  <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
-  <Setter Property="Padding" Value="4"/>
-  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
-  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+<Style xmlns="https://github.com/avaloniaui"
+       Selector="TreeView">
+  <Setter Property="Background" Value="Transparent" />
+  <Setter Property="BorderBrush" Value="Transparent" />
+  <Setter Property="BorderThickness" Value="0" />
+  <Setter Property="Padding" Value="0" />
+  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
   <Setter Property="Template">
     <ControlTemplate>
       <Border BorderBrush="{TemplateBinding BorderBrush}"
@@ -15,7 +16,7 @@
           <ItemsPresenter Name="PART_ItemsPresenter"
                           Items="{TemplateBinding Items}"
                           ItemsPanel="{TemplateBinding ItemsPanel}"
-                          Margin="{TemplateBinding Padding}"/>
+                          Margin="{TemplateBinding Padding}" />
         </ScrollViewer>
       </Border>
     </ControlTemplate>
diff --git a/src/Avalonia.Themes.Fluent/TreeViewItem.xaml b/src/Avalonia.Themes.Fluent/TreeViewItem.xaml
index a3f8d8b7f7..a938394b56 100644
--- a/src/Avalonia.Themes.Fluent/TreeViewItem.xaml
+++ b/src/Avalonia.Themes.Fluent/TreeViewItem.xaml
@@ -1,92 +1,180 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls">
-    <Style Selector="TreeViewItem">
-        <Style.Resources>
-            <converters:MarginMultiplierConverter Indent="16" Left="True" x:Key="LeftMarginConverter" />
-        </Style.Resources>
-        <Setter Property="Padding" Value="2"/>
-        <Setter Property="Background" Value="Transparent"/>
-        <Setter Property="Template">
-            <ControlTemplate>
-                <StackPanel>
-                    <Border Name="SelectionBorder"
-                            Focusable="True"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            TemplatedControl.IsTemplateFocusTarget="True">
-                        <Grid Name="PART_Header"
-                              ColumnDefinitions="16, *"
-                              Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource LeftMarginConverter}}" >
-                            <ToggleButton Name="expander"
-                                          Focusable="False"
-                                          IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"/>
-                            <ContentPresenter Name="PART_HeaderPresenter"
-                                              Focusable="False"
-                                              Content="{TemplateBinding Header}"
-                                              HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
-                                              Padding="{TemplateBinding Padding}"
-                                              Grid.Column="1"/>
-                        </Grid>
-                    </Border>
-                    <ItemsPresenter Name="PART_ItemsPresenter"
-                                    IsVisible="{TemplateBinding IsExpanded}"
-                                    Items="{TemplateBinding Items}"
-                                    ItemsPanel="{TemplateBinding ItemsPanel}"/>
-                </StackPanel>
-            </ControlTemplate>
-        </Setter>
-    </Style>
 
-    <Style Selector="TreeViewItem /template/ ToggleButton#expander">
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Border Background="Transparent"
-                        Width="14"
-                        Height="12"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center">
-                    <Path Fill="{DynamicResource ThemeForegroundBrush}"
-                          HorizontalAlignment="Center"
-                          VerticalAlignment="Center"
-                          Data="M 0 2 L 4 6 L 0 10 Z"/>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-    </Style>
+  <Design.PreviewWith>
+    <Border Padding="20"
+            MinWidth="300">
+      <TreeView>
+        <TreeViewItem Header="Level 1">
+          <TreeViewItem Header="Level 2.1">
+            <TreeViewItem Header="Level 3.1" />
+            <TreeViewItem Header="Level 3.2">
+              <TreeViewItem Header="Level 4" />
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem Header="Level 2.2"
+                        IsEnabled="False" />
+        </TreeViewItem>
+      </TreeView>
+    </Border>
+  </Design.PreviewWith>
 
-    <Style Selector="TreeViewItem /template/ ContentPresenter#PART_HeaderPresenter">
-        <Setter Property="Padding" Value="2"/>
-    </Style>
+  <Styles.Resources>
+    <x:Double x:Key="TreeViewItemIndent">16</x:Double>
+    <x:Double x:Key="TreeViewItemExpandCollapseChevronSize">12</x:Double>
+    <Thickness x:Key="TreeViewItemExpandCollapseChevronMargin">12, 0, 12, 0</Thickness>
+    <StreamGeometry x:Key="TreeViewItemCollapsedChevronPathData">M 1,0 10,10 l -9,10 -1,-1 L 8,10 -0,1 Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeViewItemExpandedChevronPathData">M0,1 L10,10 20,1 19,0 10,8 1,0 Z</StreamGeometry>
+    <converters:MarginMultiplierConverter Indent="{StaticResource TreeViewItemIndent}"
+                                          Left="True"
+                                          x:Key="TreeViewItemLeftMarginConverter" />
+  </Styles.Resources>
 
-    <Style Selector="TreeViewItem /template/ Border#SelectionBorder:pointerover">
-        <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
-    </Style>
+  <Style Selector="ToggleButton.ExpandCollapseChevron">
+    <Setter Property="Margin" Value="0" />
+    <Setter Property="Width" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
+    <Setter Property="Height" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="Transparent"
+                Width="{TemplateBinding Width}"
+                Height="{TemplateBinding Height}"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center">
+          <Path x:Name="ChevronPath"
+                Fill="{DynamicResource TreeViewItemForeground}"
+                Stretch="Uniform"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
 
-    <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
-    </Style>
+  <Style Selector="TreeViewItem">
+    <Style.Resources />
+    <Setter Property="Padding" Value="0" />
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource TreeViewItemBorderThemeThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForeground}" />
+    <Setter Property="MinHeight" Value="{DynamicResource TreeViewItemMinHeight}" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <StackPanel>
+          <Border Name="PART_LayoutRoot"
+                  Classes="TreeViewItemLayoutRoot"
+                  Focusable="True"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  MinHeight="{TemplateBinding MinHeight}"
+                  TemplatedControl.IsTemplateFocusTarget="True">
+            <Grid Name="PART_Header"
+                  ColumnDefinitions="Auto, *"
+                  Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
+              <Panel Name="PART_ExpandCollapseChevronContainer"
+                     Margin="{StaticResource TreeViewItemExpandCollapseChevronMargin}">
+                <ToggleButton Name="PART_ExpandCollapseChevron"
+                              Classes="ExpandCollapseChevron"
+                              Focusable="False"
+                              IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+              </Panel>
+              <ContentPresenter Name="PART_HeaderPresenter"
+                                Grid.Column="1"
+                                Focusable="False"
+                                Content="{TemplateBinding Header}"
+                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                Margin="{TemplateBinding Padding}" />
+            </Grid>
+          </Border>
+          <ItemsPresenter Name="PART_ItemsPresenter"
+                          IsVisible="{TemplateBinding IsExpanded}"
+                          Items="{TemplateBinding Items}"
+                          ItemsPanel="{TemplateBinding ItemsPanel}" />
+        </StackPanel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
 
-    <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:focus">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
-    </Style>
+  <!--  PointerOver state  -->
+  <Style Selector="TreeViewItem /template/ Border#PART_LayoutRoot:pointerover">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPointerOver}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPointerOver}" />
+  </Style>
+  <Style Selector="TreeViewItem /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundPointerOver}" />
+  </Style>
 
-    <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:pointerover">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/>
-    </Style>
+  <!--  Pressed state  -->
+  <Style Selector="TreeViewItem:pressed /template/ Border#PART_LayoutRoot:pointerover">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPressed}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushPressed}" />
+  </Style>
+  <Style Selector="TreeViewItem:pressed /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundPressed}" />
+  </Style>
 
-    <Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:pointerover:focus">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
-    </Style>
+  <!--  Disabled state  -->
+  <Style Selector="TreeViewItem:disabled /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundDisabled}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushDisabled}" />
+  </Style>
+  <Style Selector="TreeViewItem:disabled /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundDisabled}" />
+  </Style>
 
-    <Style Selector="TreeViewItem /template/ ToggleButton#expander:checked">
-        <Setter Property="RenderTransform">
-            <RotateTransform Angle="45"/>
-        </Setter>
-    </Style>
+  <!--  Selected state  -->
+  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelected}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelected}" />
+  </Style>
+  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundSelected}" />
+  </Style>
+
+  <!--  Selected PointerOver state  -->
+  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPointerOver}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPointerOver}" />
+  </Style>
+  <Style Selector="TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPointerOver}" />
+  </Style>
+
+  <!--  Selected Pressed state  -->
+  <Style Selector="TreeViewItem:pressed:selected /template/ Border#PART_LayoutRoot:pointerover">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedPressed}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedPressed}" />
+  </Style>
+  <Style Selector="TreeViewItem:pressed:selected /template/ Border#PART_LayoutRoot:pointerover > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedPressed}" />
+  </Style>
+
+  <!--  Disabled Selected state  -->
+  <Style Selector="TreeViewItem:disabled:selected /template/ Border#PART_LayoutRoot">
+    <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundSelectedDisabled}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrushSelectedDisabled}" />
+  </Style>
+  <Style Selector="TreeViewItem:disabled:selected /template/ Border#PART_LayoutRoot > ContentPresenter#PART_HeaderPresenter">
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TreeViewItemForegroundSelectedDisabled}" />
+  </Style>
+
+  <!--  ExpandCollapseChevron Group states  -->
+  <Style Selector="ToggleButton.ExpandCollapseChevron /template/ Path#ChevronPath">
+    <Setter Property="Data" Value="{StaticResource TreeViewItemCollapsedChevronPathData}" />
+  </Style>
+  <Style Selector="ToggleButton.ExpandCollapseChevron:checked /template/ Path#ChevronPath">
+    <Setter Property="Data" Value="{StaticResource TreeViewItemExpandedChevronPathData}" />
+  </Style>
+  <Style Selector="TreeViewItem:empty /template/ ToggleButton#PART_ExpandCollapseChevron">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+  <Style Selector="TreeViewItem:empty /template/ Panel#PART_ExpandCollapseChevronContainer">
+    <Setter Property="Width" Value="{StaticResource TreeViewItemExpandCollapseChevronSize}" />
+  </Style>
 
-    <Style Selector="TreeViewItem:empty /template/ ToggleButton#expander">
-        <Setter Property="IsVisible" Value="False"/>
-    </Style>
 </Styles>