TreeView in WPF

In this article we will discuss the TreeView in WPF. Basically The TreeView Control is used to show information in a Hierarchical view.

Now we take an example in which we create a TreeView. For this, follow these steps:

Step 1: First we take a TreeView (MyFirstTreeView) In our .xaml page and write the following code in it:

<Grid>
        <TreeView Name="MyFirstTreeView" >
            <TreeViewItem Header="First Student" IsSelected="True">
                <TreeViewItem Header="Mahak Gupta"/>
                <TreeViewItem Header="Student Roll Number">
                    <TreeViewItem Header="1"/>
                </TreeViewItem>
                <TreeViewItem Header="Subject">
                    <TreeViewItem Header="Eng"/>
                    <TreeViewItem Header="Hindi"/>
                    <TreeViewItem Header="Maths"/>
                </TreeViewItem>
                <TreeViewItem Header="Marks">
                    <TreeViewItem Header="Eng:20"/>
                    <TreeViewItem Header="Hindi:50"/>
                    <TreeViewItem Header="Maths:60"/>
                </TreeViewItem>
            </TreeViewItem>

            <TreeViewItem Header="Second Student">
                <TreeViewItem Header="Pihu Jindal"/>
                <TreeViewItem Header="Student Roll Number">
                    <TreeViewItem Header="2"/>
                </TreeViewItem>

                <TreeViewItem Header="Subject">
                    <TreeViewItem Header="Eng"/>
                    <TreeViewItem Header="Hindi"/>
                    <TreeViewItem Header="Maths"/>
                </TreeViewItem>
                <TreeViewItem Header="Marks">
                    <TreeViewItem Header="Eng:90"/>
                    <TreeViewItem Header="Hindi:80"/>
                    <TreeViewItem Header="Maths:90"/>
                </TreeViewItem>
            </TreeViewItem>

            <TreeViewItem Header="Third Student">
                <TreeViewItem Header="Rahul Khanna"/>
                <TreeViewItem Header="Student Roll Number">
                    <TreeViewItem Header="3"/>
                </TreeViewItem>
 
                <TreeViewItem Header="Subject">
                    <TreeViewItem Header="Eng"/>
                    <TreeViewItem Header="Hindi"/>
                    <TreeViewItem Header="Maths"/>
                </TreeViewItem>
                <TreeViewItem Header="Marks">
                    <TreeViewItem Header="Eng:60"/>
                    <TreeViewItem Header="Hindi:80"/>
                    <TreeViewItem Header="Maths:70"/>
                </TreeViewItem>
            </TreeViewItem>

        </TreeView>

    </Grid>

Here we take the three Students data.

The Output Will be:





Now we look at the code In this TreeView we create the Hierarchial view, with the help of declaring another TreeViewItem in the TreeViewItem like this:

<TreeView Name="MyFirstTreeView" >
            <TreeViewItem Header="First Student" IsSelected="True">
                <TreeViewItem Header="Mahak Gupta"/>
                <TreeViewItem Header="Student Roll Number">
                    <TreeViewItem Header="1"/>
                </TreeViewItem>
                <TreeViewItem Header="Subject">
                    <TreeViewItem Header="Eng"/>
                    <TreeViewItem Header="Hindi"/>
                    <TreeViewItem Header="Maths"/>
                </TreeViewItem>
                <TreeViewItem Header="Marks">
                    <TreeViewItem Header="Eng:20"/>
                    <TreeViewItem Header="Hindi:50"/>
                    <TreeViewItem Header="Maths:60"/>
                </TreeViewItem>
            </TreeViewItem>

Now when we click on it, the output will be:



If we want to expand the node In the TreeView, we set the IsExpanded property to True and if we want to collapse it we set it to False:

<TreeView Name="MyFirstTreeView" >
            <TreeViewItem Header="First Student" IsExpanded="True" IsSelected="True">
                <TreeViewItem Header="Mahak Gupta"/>
                <TreeViewItem Header="Student Roll Number">
                    <TreeViewItem Header="1"/>
                </TreeViewItem>
                <TreeViewItem Header="Subject" >
                    <TreeViewItem Header="Eng"/>
                    <TreeViewItem Header="Hindi"/>
                    <TreeViewItem Header="Maths"/>
                </TreeViewItem>
                <TreeViewItem Header="Marks">
                    <TreeViewItem Header="Eng:20"/>
                    <TreeViewItem Header="Hindi:50"/>
                    <TreeViewItem Header="Maths:60"/>
                </TreeViewItem>
            </TreeViewItem>

The Output will be:



Now we add the RadioButton and TextBlock Controls in the TreeView. Here we create another Node (Grade) in the TreeView:

<TreeViewItem Header="Grade">
                    <TreeViewItem>
                        <TreeViewItem.Header>
                            <DockPanel>
                            <RadioButton/>
                            <TextBlock>
                                     A
                                </TextBlock>
                            </DockPanel>
                        </TreeViewItem.Header>
                    </TreeViewItem>
                <TreeViewItem>
                    <TreeViewItem.Header>
                        <DockPanel>
                            <RadioButton/>
                            <TextBlock>
                                     B
                                </TextBlock>
                        </DockPanel>
                    </TreeViewItem.Header>
                </TreeViewItem>
                <TreeViewItem>
                    <TreeViewItem.Header>
                        <DockPanel>
                            <RadioButton />
                            <TextBlock>
                                     C
                                </TextBlock>
                        </DockPanel>
                    </TreeViewItem.Header>
                </TreeViewItem>
            </TreeViewItem>

The Output Will Be: