Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • WPF TreeView : Basic Understanding

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 475
    Comment on it

    A TreeView is used to represent data in a hierarchical fashion .It is often used to show  parent child relationship where a parent node can be expanded or collapsed.

    The TreeView tag is used to create  a WPF TreeView control in XAML.

    <TreeView></TreeView>

    We can further set Name  property to uniquely identify the control. For setting the size of control we need to use Width and Height.

    <TreeView  Name="TreeView1" Width="100" Height="200" />

    A TreeView is a collection of TreeViewItems. The following markup adds a parent item and four child items to a TreeView control.

    <TreeView Margin="10,10,0,13" Name="TreeView1"  Width="100" Height="200">
        <TreeViewItem Header="Technologies">
            <TreeViewItem Header="Asp.Net"></TreeViewItem>
            <TreeViewItem Header="Java"></TreeViewItem>
            <TreeViewItem Header="PHP"></TreeViewItem>
            <TreeViewItem Header="NodeJS"></TreeViewItem>       
        </TreeViewItem>
    </TreeView>

    We can also create a treeview dynamically as follows. For each item, we set the Header, and use a string array for the sub-items.

    <TreeView Name="tView"></TreeView>
    TreeViewItem treeItem = null;
    
    // India
    treeItem = new TreeViewItem();
    treeItem.Header = "India";
    
    treeItem.Items.Add(new TreeViewItem() { Header = "Delhi" });
    treeItem.Items.Add(new TreeViewItem() { Header = "Mumbai" });
    tView.Items.Add(treeItem);


    For deleting items from TreeView we need to use the following  code:

       tView.Items.RemoveAt(tView.Items.IndexOf(tView.SelectedItem));  

    In case we need to apply styles to  TreeView we use System.Resources  wherein we set the style property. Here we have set the background and font size.

    <Window.Resources>
        <Style TargetType="{x:Type TreeViewItem}">                  
            <Setter Property="FontSize" Value="16"/
            <Setter Property="Background" Value="Blue"/> 
        </Style>
    </Window.Resources>


    The tree view control provides  lots of advanced capabilities. In this blog we have only gone through the basic concepts. Hope the article helps you in getting started on using a very important control. Do check out the official documentation for further details:

    https://msdn.microsoft.com/en-us/library/system.windows.controls.treeview(v=vs.110).aspx

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: