implement TreeDataGrid

[MohammadHadi2031]

Hi Keboo.

According to talk in the discord about adding columns to TreeListView I created this pull request. This is WIP and most of the task is done just the styles is left (light/dark theme, ...). for using this just run demo app and go to trees -> multi select tree view I have couple of questions:

1. Shall we show gripper (gridlines) for columns? in material design theme the data table column's gripper has no color.
2. In order to show columns for cells I used GridViewRowPresenter but I can't remove internal:TreeListViewContentPresenter because no children is shown. so the final code is as below. Is there better solution for this?

 <Grid Margin="0,0,0,0">
   <internal:TreeListViewContentPresenter x:Name="PART_ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          Visibility="Hidden" />

   <GridViewRowPresenter x:Name="PART_Header"
                         Columns="{Binding Columns, RelativeSource={RelativeSource AncestorType={x:Type wpf:TreeListView}}}"
                         Content="{TemplateBinding Content}" />
 </Grid>

3. For showing gridlines for each treelistview cells I created simple TreeListViewCell if it's not necessary to show gridlines we can remove this.

 <Style TargetType="{x:Type wpf:TreeListViewCell}">
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type wpf:TreeListViewCell}">
         <Border Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
           <Grid>
             <Border Margin="0,0,-5,0"
                     Padding="0,3,0,3"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     BorderBrush="{Binding RelativeSource={RelativeSource AncestorType={x:Type wpf:TreeListViewItem}}, Path=IsSelected, Converter={StaticResource TreeListViewGridLineBrushConverter}}"
                     BorderThickness="0,0,1,0">
               <TextBlock Text="" />
             </Border>

             <ContentPresenter />
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>

4. I moved Toggle button to the first column data template this is a easy trick but maybe not perfect solution I want to ask you what could be better way to have toggle button on the first cell. here is the first column

<GridViewColumn Width="250"
                Header="Name">
  <GridViewColumn.CellTemplate>
    <DataTemplate>
      <materialDesign:TreeListViewCell>
        <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>
      </materialDesign:TreeListViewCell>
    </DataTemplate>
  </GridViewColumn.CellTemplate>
</GridViewColumn>

5. Can I create new control called TreeDataGrid?

feel free to mention me if there is any error. here is my view

[Keboo]

Just replying back to the questions.

1. I think let's skip on the separator line. I think having it similar to the DataGrid is probably most common.
2. This is a bit interesting and will require some more thought. Initially I think it might be fine, but I am interested in testing out some cases with template bindings as that was the intent for in the other presenter.
3. Yea I think we can drop it (as per 1)
4. This is more interesting, I would really want to keep the toggle outside of the columns.
5. I am bit hesitant to create a brand-new control. I would be more open to a new control template over the existing one though. It seems like that might be the cleaner approach.

I think we might need to pivot on the implementation a bit here. It would probably be better to look more at implementing it view the GridView similar to how the WPF base ListView control works. This likely will be a more complicated path, but I think it will be the better approach.

[MohammadHadi2031]

Thanks a lot for suggesting GridView it got much easier but still toggle button is the issue. So what I did was to see how WPF is working with GridView and I found out that for having columns it uses style for the ScrollViewer and for having cells in rows it uses GridViewRowPresenter too. So we have it columns and cells. the only thing is to support both TreeListView.View == null and TreeListView.View != null I've done it with a simple DataTrigger just like how WPF does.

<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" />
</DataTrigger>

The only problem is the ToggleButton outside the TreeListViewItem causes tests to fail. I'm working on it

[MohammadHadi2031]

Hi. The toggle button is now automatically added to the first column. I commented out the assignment of TreeListView.View to make the tests pass.

[MohammadHadi2031]

I think we can remove this comment after merging #3875

[Keboo]

This is looking really good! thank you!

[MohammadHadi2031]

Done

[JeanPhilippeLux]

Is it possible to test this new control? I took the last version of the code but it's not in the demo app.

thnak you.

[MohammadHadi2031]

Yes you can checkout this branch and test it

[JeanPhilippeLux]

Yes you can checkout this branch and test it

strange, I download your branch and when I run the demo, I don't see the new control. Perhaps it's not integrated in the demo application?

thank you.

[MohammadHadi2031]

So you git clone .... then git checkout hadi/treedatagrid then run demo app but It's not there?

Yes you can checkout this branch and test it

strange, I download your branch and when I run the demo, I don't see the new control. Perhaps it's not integrated in the demo application?

thank you.

[JeanPhilippeLux]

So you git clone .... then git checkout hadi/treedatagrid then run demo app but It's not there?

Yes you can checkout this branch and test it

strange, I download your branch and when I run the demo, I don't see the new control. Perhaps it's not integrated in the demo application?
thank you.

Yes. I open it in Visual Studio. :(

Will make a new try.