automatically add toggle button to first column

Author: MohammadHadi2031

src/MainDemo.Wpf/Trees.xaml

@@ -6,7 +6,6 @@
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
-             xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
              d:DataContext="{d:DesignInstance domain:TreesViewModel}"
              d:DesignHeight="1080"
              d:DesignWidth="1920"
@@ -19,8 +18,6 @@
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
       </ResourceDictionary.MergedDictionaries>
-      
-      <converters:TreeListViewIndentConverter x:Key="TreeListViewIndentConverter" />
     </ResourceDictionary>
   </UserControl.Resources>
 
@@ -218,18 +215,7 @@
                                      SelectedItem="{Binding SelectedTreeItem}">
             <materialDesign:TreeListView.Resources>
               <HierarchicalDataTemplate DataType="{x:Type domain:TestItem}" ItemsSource="{Binding Items, Mode=OneTime}">
-                <StackPanel Orientation="Horizontal">
-                  <StackPanel.Margin>
-                    <MultiBinding Converter="{StaticResource TreeListViewIndentConverter}">
-                      <Binding Path="LevelIndentSize" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type materialDesign:TreeListView}}" />
-                      <Binding Path="Level" RelativeSource="{RelativeSource AncestorType={x:Type materialDesign:TreeListViewItem}}" />
-                    </MultiBinding>
-                  </StackPanel.Margin>
-
-                  <ToggleButton IsChecked="{Binding RelativeSource={RelativeSource AncestorType=materialDesign:TreeListViewItem, Mode=FindAncestor}, Path=IsExpanded}" Style="{StaticResource MaterialDesignTreeListViewToggleButtonStyle}" />
-
                   <TextBlock VerticalAlignment="Center" Text="{Binding Name, Mode=OneTime}" />
-                </StackPanel>
               </HierarchicalDataTemplate>
 
               <HierarchicalDataTemplate DataType="{x:Type domain:MovieCategory}"
@@ -258,24 +244,13 @@
               </Style>
             </materialDesign:TreeListView.ItemContainerStyle>
 
-            <materialDesign:TreeListView.View>
+            <!--<materialDesign:TreeListView.View>
               <GridView>
                 <GridView.Columns>
                   <GridViewColumn Width="250" Header="Name">
                     <GridViewColumn.CellTemplate>
                       <DataTemplate>
-                        <StackPanel Orientation="Horizontal">
-                          <StackPanel.Margin>
-                            <MultiBinding Converter="{StaticResource TreeListViewIndentConverter}">
-                              <Binding Path="LevelIndentSize" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type materialDesign:TreeListView}}" />
-                              <Binding Path="Level" RelativeSource="{RelativeSource AncestorType={x:Type materialDesign:TreeListViewItem}}" />
-                            </MultiBinding>
-                          </StackPanel.Margin>
-
-                          <ToggleButton IsChecked="{Binding RelativeSource={RelativeSource AncestorType=materialDesign:TreeListViewItem, Mode=FindAncestor}, Path=IsExpanded}" Style="{StaticResource MaterialDesignTreeListViewToggleButtonStyle}" />
-
-                          <TextBlock VerticalAlignment="Center" Text="{Binding Name, Mode=OneTime}" />
-                        </StackPanel>
+                        <TextBlock VerticalAlignment="Center" Text="{Binding Name, Mode=OneTime}" />
                       </DataTemplate>
                     </GridViewColumn.CellTemplate>
                   </GridViewColumn>
@@ -289,7 +264,7 @@
                   </GridViewColumn>
                 </GridView.Columns>
               </GridView>
-            </materialDesign:TreeListView.View>
+            </materialDesign:TreeListView.View>-->
           </materialDesign:TreeListView>
           <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right">
             <Button Command="{Binding AddListTreeItemCommand}"

src/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TreeListView.xaml

@@ -112,7 +112,16 @@
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type wpf:TreeListViewItem}">
-          <Grid>
+          <Grid x:Name="ItemGrid">
+            <Grid.Margin>
+              <MultiBinding Converter="{x:Static converters:TreeListViewIndentConverter.Instance}">
+                <Binding Path="LevelIndentSize"
+                         RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type wpf:TreeListView}}"
+                         FallbackValue="16" />
+                <Binding Path="Level"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+              </MultiBinding>
+            </Grid.Margin>
             <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="Auto" />
@@ -166,7 +175,15 @@
                 <VisualState x:Name="Collapsed" />
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
-
+            <ToggleButton x:Name="Expander"
+                          Width="{TemplateBinding wpf:TreeViewAssist.ExpanderSize}"
+                          Height="{TemplateBinding wpf:TreeViewAssist.ExpanderSize}"
+                          Margin="8,0,8,0"
+                          VerticalAlignment="Center"
+                          ClickMode="Press"
+                          Foreground="{TemplateBinding Foreground}"
+                          IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
+                          Style="{StaticResource MaterialDesignTreeListViewToggleButtonStyle}" />
             <Border x:Name="MouseOverBorder"
                     Grid.Column="1"
                     Grid.ColumnSpan="2"
@@ -234,6 +251,8 @@
             <DataTrigger Binding="{Binding View, RelativeSource={RelativeSource AncestorType=wpf:TreeListView}, Converter={StaticResource ViewIsGridViewConverter}}" Value="True">
               <Setter TargetName="PART_ContentPresenter" Property="Visibility" Value="Hidden" />
               <Setter TargetName="PART_GridViewRowPresenterr" Property="Visibility" Value="Visible" />
+              <Setter TargetName="Expander" Property="Visibility" Value="Collapsed" />
+              <Setter TargetName="ItemGrid" Property="Margin" Value="0" />
             </DataTrigger>
           </ControlTemplate.Triggers>
         </ControlTemplate>

src/MaterialDesignThemes.Wpf/TreeListView.cs

@@ -1,6 +1,10 @@
+using System.Collections;
 using System.Collections.Specialized;
 using System.Windows.Automation.Peers;
+using System.Windows.Data;
+
 using MaterialDesignThemes.Wpf.Automation.Peers;
+using MaterialDesignThemes.Wpf.Converters;
 using MaterialDesignThemes.Wpf.Internal;
 
 namespace MaterialDesignThemes.Wpf;
@@ -266,4 +270,68 @@ internal void MoveSelectionToParent(TreeListViewItem item)
             }
         }
     }
+
+    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
+    {
+        base.OnPropertyChanged(e);
+
+        if (e.Property == ViewProperty)
+        {
+            if (View is GridView gridView)
+            {
+                AddToggleButtonToFirstColumn(gridView);
+            }
+        }
+    }
+
+    private void AddToggleButtonToFirstColumn(GridView gridView)
+    {
+        if (gridView.Columns.Count > 0)
+        {
+            var firstColumn = gridView.Columns[0];
+            firstColumn.CellTemplate = CreateToggleButtonTemplate(firstColumn.CellTemplate);
+        }
+    }
+
+    private DataTemplate CreateToggleButtonTemplate(DataTemplate originalTemplate)
+    {
+        var template = new DataTemplate();
+
+        var stackPanelFactory = new FrameworkElementFactory(typeof(StackPanel));
+        stackPanelFactory.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
+
+        var marginMultiBinding = new MultiBinding
+        {
+            Converter = TreeListViewIndentConverter.Instance,
+        };
+        marginMultiBinding.Bindings.Add(new Binding("LevelIndentSize")
+        {
+            RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(TreeListView), 1)
+        });
+        marginMultiBinding.Bindings.Add(new Binding("Level")
+        {
+            RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(TreeListViewItem), 1)
+        });
+        stackPanelFactory.SetBinding(StackPanel.MarginProperty, marginMultiBinding);
+
+        var toggleButtonFactory = new FrameworkElementFactory(typeof(ToggleButton));
+        toggleButtonFactory.SetValue(ToggleButton.StyleProperty, Application.Current.Resources["MaterialDesignTreeListViewToggleButtonStyle"]);
+
+        toggleButtonFactory.SetBinding(ToggleButton.IsCheckedProperty, new Binding("IsExpanded")
+        {
+            RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(TreeListViewItem), 1)
+        });
+
+        stackPanelFactory.AppendChild(toggleButtonFactory);
+
+        if (originalTemplate != null)
+        {
+            var originalContentFactory = new FrameworkElementFactory(typeof(ContentPresenter));
+            originalContentFactory.SetValue(ContentPresenter.ContentTemplateProperty, originalTemplate);
+            stackPanelFactory.AppendChild(originalContentFactory);
+        }
+
+        template.VisualTree = stackPanelFactory;
+        return template;
+    }
 }