I am trying to create an editable TreeView of List:

    public class CollectionType
    {
        public string Name {get; set;}

        public Dictionary<string, List<Size>> SizeGuide { get; set; }
    }

    public class Size
    {
        public string Name { get; set; }

        public string Weight { get; set; }
    }

This is what I have come up with until now:

<TreeView Name="CollectionTypesSizes">
           <TreeView.Resources>
               <HierarchicalDataTemplate DataType="{x:Type self:CollectionType}" ItemsSource="{Binding SizeGuide}">
                   <StackPanel Orientation="Horizontal">
                       <TreeViewItem>
                           <TreeViewItem.Header>
                               <StackPanel Orientation="Horizontal">
                                   <TextBlock Text="{Binding Path=Name}"/>
                                   <TextBlock Text=": "/>
                                   <TextBlock Text="{Binding Path=SizeGuide.Count}" Foreground="CadetBlue"/>
                               </StackPanel>
                           </TreeViewItem.Header>                            
                       </TreeViewItem>
                   </StackPanel>
               </HierarchicalDataTemplate>                
           </TreeView.Resources>
       </TreeView>

But I don't know how to drill down to Size object to present it properly:

TreeView result

I have tried different approaches before but it gets complex when trying to make it editable.

CodePudding user response：

you can make nested HierarchicalDataTemplates:

<HierarchicalDataTemplate DataType="{x:Type local:CollectionType}" 
                          ItemsSource="{Binding SizeGuide}">

    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Path=Name}"/>
        <TextBlock Text=": "/>
        <TextBlock Text="{Binding Path=SizeGuide.Count}" Foreground="CadetBlue"/>
    </StackPanel>

    <HierarchicalDataTemplate.ItemTemplate>
        <!--template for KeyValuePair<string, List<Size>> -->
        <HierarchicalDataTemplate ItemsSource="{Binding Path=Value}">
            <TextBlock Text="{Binding Path=Key}"/>

            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate DataType="{x:Type local:Size}">
                    <StackPanel Orientation="Horizontal">
                        <TextBox Width="50" Text="{Binding Path=Name}"/>
                        <TextBlock Text=": "/>
                        <TextBox Width="50"  Text="{Binding Path=Weight}"/>
                    </StackPanel>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </HierarchicalDataTemplate.ItemTemplate>

</HierarchicalDataTemplate>