Update Treeview to offer new options (#2359)

* Add two new properties to TreeView

They control the expander size and the selection feedback

* Showcase changes in demo app

Author: StefanoRivolta-Previero

MainDemo.Wpf/Trees.xaml

@@ -151,9 +151,13 @@
                     <TreeView
                         Grid.Row="0"
                         ItemsSource="{Binding MovieCategories}"
-                        MinWidth="220"
+                        MinWidth="220" 
                         SelectedItemChanged="TreeView_SelectedItemChanged">
                         <TreeView.Resources>
+                            <Style TargetType="TreeViewItem" BasedOn="{StaticResource MaterialDesignTreeViewItem}">
+                                <Setter Property="materialDesign:TreeViewAssist.ExpanderSize" Value="32"/>
+                                <Setter Property="materialDesign:TreeViewAssist.ShowSelection" Value="False"/>
+                            </Style>
                             <HierarchicalDataTemplate
                                 DataType="{x:Type domain:MovieCategory}"
                                 ItemsSource="{Binding Movies}">

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TreeView.xaml

@@ -70,10 +70,11 @@
         <Setter Property="Focusable" Value="False"/>
         <Setter Property="Width" Value="16"/>
         <Setter Property="Height" Value="16"/>
+        <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ToggleButton}">
-                    <Border Background="Transparent" Height="16" Width="16">
+                    <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CheckStates">
                                 <VisualStateGroup.Transitions>
@@ -162,6 +163,8 @@
         <Setter Property="Padding" Value="8" />
         <Setter Property="FocusVisualStyle" Value="{StaticResource MaterialDesignTreeViewItemFocusVisual}"/>
         <Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}}"/>
+        <Setter Property="wpf:TreeViewAssist.ExpanderSize" Value="16"/>
+        <Setter Property="wpf:TreeViewAssist.ShowSelection" Value="True"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type TreeViewItem}">
@@ -177,7 +180,7 @@
                             <RowDefinition/>
                         </Grid.RowDefinitions>
                         <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup Name="CommonStates">
+                            <VisualStateGroup Name="CommonStates" >
                                 <VisualStateGroup.Transitions>
                                     <VisualTransition GeneratedDuration="0:0:0.3" To="Normal">
                                         <VisualTransition.GeneratedEasingFunction>
@@ -200,7 +203,7 @@
                                 <VisualStateGroup.Transitions>
                                     <VisualTransition GeneratedDuration="0:0:0.6"/>
                                 </VisualStateGroup.Transitions>
-                                <VisualState Name="Selected">
+                                <VisualState Name="Selected" >
                                     <Storyboard>
                                         <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                                          Storyboard.TargetProperty="Opacity"
@@ -261,8 +264,9 @@
                                       Style="{StaticResource MaterialDesignExpandCollapseToggleStyle}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Margin="8 0 8 0"
-                                      VerticalAlignment="Center"
-                                              />
+                                      Width="{TemplateBinding wpf:TreeViewAssist.ExpanderSize}"
+                                      Height="{TemplateBinding wpf:TreeViewAssist.ExpanderSize}"
+                                      VerticalAlignment="Center"/>
 
                         <Border x:Name="MouseOverBorder"
                                 Grid.Column="1" Grid.ColumnSpan="2"
@@ -278,6 +282,7 @@
 
                         <Grid Grid.Column="1" Grid.ColumnSpan="2" x:Name="ContentGrid" Background="{TemplateBinding Background}">
                             <wpf:Ripple Feedback="{TemplateBinding Foreground, Converter={StaticResource BrushRoundConverter}}"
+                                        x:Name="Ripple"
                                         Focusable="False"
                                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
@@ -326,6 +331,11 @@
                         <Trigger Property="IsEnabled" Value="false">
                             <Setter Property="Opacity" Value=".56"/>
                         </Trigger>
+                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(wpf:TreeViewAssist.ShowSelection)}" Value="False">
+                            <Setter TargetName="MouseOverBorder" Property="Visibility" Value="Collapsed"/>
+                            <Setter TargetName="SelectedBorder" Property="Visibility" Value="Collapsed"/>
+                            <Setter TargetName="Ripple" Property="Feedback" Value="Transparent"/>
+                        </DataTrigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>

MaterialDesignThemes.Wpf/TreeViewAssist.cs

@@ -9,6 +9,7 @@ namespace MaterialDesignThemes.Wpf
 {
     public static class TreeViewAssist
     {
+        #region AdditionalTemplate
         /// <summary>
         /// Allows additional rendering for each tree node, outside of the rippled part of the node which responsds to user selection.                        
         /// </summary>
@@ -44,6 +45,10 @@ public static DataTemplate GetAdditionalTemplate(DependencyObject element)
             return (DataTemplate)element.GetValue(AdditionalTemplateProperty);
         }
 
+        #endregion
+
+        #region AdditionalTemplateSelector
+
         /// <summary>
         /// Allows additional rendering for each tree node, outside of the rippled part of the node which responsds to user selection.                        
         /// </summary>
@@ -79,6 +84,10 @@ public static DataTemplateSelector GetAdditionalTemplateSelector(DependencyObjec
             return (DataTemplateSelector)element.GetValue(AdditionalTemplateSelectorProperty);
         }
 
+        #endregion
+
+        #region NoTemplate
+
         private static readonly Lazy<DataTemplate> NoAdditionalTemplateProvider = new Lazy<DataTemplate>(CreateEmptyGridDataTemplate);
 
         /// <summary>
@@ -99,5 +108,32 @@ public static DataTemplate CreateEmptyGridDataTemplate()
                 return (DataTemplate)XamlReader.Load(memoryStream, parserContext);
             }
         }
+
+        #endregion
+
+        #region ExpanderSize
+
+        public static double GetExpanderSize(DependencyObject element)
+            => (double)element.GetValue(ExpanderSizeProperty);
+        public static void SetExpanderSize(DependencyObject element, double value)
+            => element.SetValue(ExpanderSizeProperty, value);
+
+        public static readonly DependencyProperty ExpanderSizeProperty =
+            DependencyProperty.RegisterAttached("ExpanderSize", typeof(double), typeof(TreeViewAssist), new PropertyMetadata(default(double)));
+
+        #endregion
+
+        #region ShowSelection
+
+        public static bool GetShowSelection(DependencyObject element)
+            => (bool)element.GetValue(ExpanderSizeProperty);
+        public static void SetShowSelection(DependencyObject element, bool value)
+            => element.SetValue(ExpanderSizeProperty, value);
+
+        public static readonly DependencyProperty ShowSelectionProperty =
+            DependencyProperty.RegisterAttached("ShowSelection", typeof(bool), typeof(TreeViewAssist), new PropertyMetadata(true));
+
+        #endregion
+
     }
 }