Display treeviewitem as grid rows in wpf

Try this xaml

  <TreeView x:Name="treeviewList"  ItemsSource="{Binding ManufacturerList}">
    <TreeView.ItemTemplate>
        <DataTemplate>
            <TreeViewItem  ItemsSource="{Binding Models}">
                <TreeViewItem.Header>
                    <Grid Width="350">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"></ColumnDefinition>
                            <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                            <ColumnDefinition ></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Task}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                        <TextBlock Text="{Binding durationTotal}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                        <TextBlock Text="{Binding HeadNote}" HorizontalAlignment="Left"  VerticalAlignment="Center"  Grid.Column="2"/>
                    </Grid>
                </TreeViewItem.Header>
                <TreeViewItem.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="-20,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"></ColumnDefinition>
                                <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding SubTask}" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0"/>
                            <TextBlock Text="{Binding Duration}" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="1"/>
                            <TextBlock Text="{Binding Notes}" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Column="2"/>
                        </Grid>
                    </DataTemplate>
                </TreeViewItem.ItemTemplate>
            </TreeViewItem>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

c# code

public class Company
{
    public string Task { get; set; }
    public string durationTotal { get; set; }
    public string HeadNote { get; set; }
    public List<Model> Models { get; set; }
}
public class Model
{
    public string SubTask { get; set; }
    public string Duration { get; set; }
    public string Notes { get; set; }      
}

   List<Company> ManufacturerList = new List<Company>();

        ManufacturerList.Add(new Company()
        {
            Task = "Coding",
            durationTotal = "4",
            HeadNote = "Coding Task",
            Models = new List<Model>()
            {new Model(){SubTask = "Write", Duration = "2", Notes ="It pays the bills" },
            new Model(){SubTask = "Compile", Duration = "1", Notes ="c# or go home" },
            new Model(){SubTask = "Test", Duration = "1", Notes ="works on my m/c" },}
        });


        ManufacturerList.Add(new Company()
        {
            Task = "Communicate",
            durationTotal = "2",
            HeadNote = "Communicate Task",
            Models = new List<Model>()
            {new Model(){SubTask = "Email", Duration = "0.5", Notes ="so much junk mail"  },
            new Model(){SubTask = "Blogs", Duration = "0.25", Notes ="blogs.msdn.com/delay" },
            new Model(){SubTask = "Twitter", Duration = "0.25", Notes ="RT:nothing to report" },}
        });

        treeviewList.ItemsSource = ManufacturerList;

Result


If the only problem with your code is that each treeview item renders with different grid column widths, you can try the "share size scope" feature to align them all. In the TreeView control, set Grid.IsSharedSizeScope to true:-

Then add a SharedSizeGroup to the ColumnDefinitions that should have the same width across all the treeview items (your first column definition has a fixed width anyway, so it's not needed on that):-

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="20" />
   <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
   <ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>

The values are just strings used to "name" the columns, and can be anything you like.


Comments

  1. Dillon

    • 2020/11/9

    <c1:C1FlexGrid x:Name="_flex" Grid.Column="1" Grid.Row="2" Notice that unlike the TreeView, the FlexGrid allows you to show multiple 

  2. Dennis

    • 2015/10/25

    Display treeviewitem as grid rows in wpf. Basically in need to achieve something like this using treeview control in wpf: (random picture) Where nodes and child nodes have same headers. I googled a lot, but my knowledge in wpf not that good. I tried using Grid but obviously it create different grids, so I can relay on column width.

  3. Landen

    • 2015/5/12

    The control uses a composite of existing controls. For example, trying to convert a TreeView or a ListView into a TreeGrid using clever control 

  4. Brody

    • 2018/5/20

    Display treeviewitem as grid rows in wpf . Ali2020 . Sep 3rd 2021, 8:9 am. Never. You are currently not logged in, this means you can not edit or delete anything you

  5. Jared

    • 2015/8/4

    You know that a TreeView is good for showing hierarchical data and a a TreeGrid -like experience using only the WPF TreeView control, 

  6. Edgar

    • 2016/3/25

    You can populate the WPF TreeView with items in one of two ways. One option is manually adding the items, in either code or XAML, and the other option is to create them via data binding. The XAML that follows shows how one can manually add some TreeViewItems to a TreeView in XAML: XML.

  7. Lyle

    • 2018/1/28

    In the sample below, we have a data template for a dog breed the displays data across three columns in a Grid. We've set the middle column up as 

  8. Tobias

    • 2016/4/15

    I Need a + symbol to apperar at the left most side of each row in the parent datagrid.,. so that when that + symbol is being clicked then only the related nested datagrid will get apperaed.. since am a fesher in WPF appliaction I am striving to find a solution for this problem.. I request anyone to plz help me out in finding the answer for this.

  9. Muhammad

    • 2017/8/3

    < TreeView Grid.Row = "0" Margin = "5". ItemsSource = "{Binding Breeds}". ItemContainerStyle = "{StaticResource TreeViewItemStyle_ExpandAll} 

  10. Robin

    • 2019/2/8

    TreeView Parts. The TreeView control does not have any named parts. When you create a ControlTemplate for an TreeView, your template might contain a ItemsPresenter within a ScrollViewer. (The ItemsPresenter displays each item in the TreeView; the ScrollViewer enables scrolling within the control). If the ItemsPresenter is not the direct child

  11. Ty

    • 2019/1/25

    To specify the text we want displayed for each node, we use theHeader property. By default, a TreeViewItem is not expanded, but to show you the structure of the 

  12. Remington

    • 2015/3/10

    Hello All, I just wanted tree view to appear like the windows form control treeview type and modified the style as shown in below code However there appears to be extra connecting vertical dotted lines on the very first node which ideally should not be present.

  13. Bowen

    • 2021/1/17

    A basic data bound TreeView. In the following example, I'll show you just how easy it is to get started with the HierarchicalDataTemplate: Download & run 

  14. Lee

    • 2017/10/17

    Windows Presentation Foundation (WPF) The TreeView control is contained within a sizable grid column. When I resize the column of the 

  15. Mason

    • 2016/11/1

    TreeViewItem Header won't stretch? This problem occurs because WPF's default template for TreeViewItem is set up as a 3-column by 2-row Grid . The first 

Comments are closed.

Recent Posts