• Open the Assets Library (Window->Assets) in Expression Blend and start writing the name of the RadTreeView control in the search box.

 

• Drag the RadTreeView control on the artboard. The RadTreeView appears.

 

CopyXAML

<telerik:RadTreeView Margin="8" Background="#FFAD9292"/>

Tip
You might wonder where this "telerik", in front of the tag RadTreeView, came from. Well, this is the name of the namespace you give when you import the appropriate assembly into the XAML file. CopyXAML <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" ............... x:Class="CSharp.RadTreeView.Getting_Started.GettingStarted"> ............... </UserControl>

• So far there is an empty RadTreeView containing no items.

Open Expression Blend and select the treeview control to which you wish to add item(s)

• After you've selected the control, navigate to Common Properties located in the Properties pane and click the ellipses button next to Items (Collection). The Object Collection Editor dialog appears.

• The dialog is divided into two sections: the left one contains the list with the treeview items which already belong to the selected treeview control, while in the right one you can view and edit the properties of the selected treeview item. In order to add a new treeview item click the Add another item button located at the bottom under the items list. The Select Object dialog appears. If you want to remove item(s) select the target item and click the Remove Item button ().

• Since Blend does not know the exact type of the item you want to add, you have to select it from a list and confirm by clicking the OK button. The type that is needed is RadTreeViewItem and it is located in Telerik.Windows.Controls namespace.

Tip
Sometimes you will have to browse through a huge list of available types. To speed up the process of finding the type you need, just start writing its name (RadTreeViewItem) in the search box above. When you start typing, the controls’ list will be filtered automatically, thus making the selection much easier.

• When the Select Object dialog is closed, you will see the newly created item added to the list of treeview items in the Object Collection Editor. It will be selected by default, so you just have to edit its properties (such as Header, Fonts, Colors etc.) in the properties panes, located on the right.

• If you want to add child items to a specific treeview item, you need to select the item from the Items list in the Object Collection Editor dialog. After that navigate to the Common Properties located in the Properties pane and click the ellipses button next to Items (Collection).

• Again the same Object Collection Editor dialog appears.

Click Add another item three times to add three child items to the root item "Sports Categories". Set their properties as follows:

• On the first new item, set the Header property to "Football". Select the added node and add two child items. Set their properties as follows:

  • On the first new item, set the Header property to "Futsal".
  • On the second new item, set the Header property to "Soccer".
  • Click "OK" to confirm the changes and to close the dialog.
  • On the second new item, set the Header property to "Tennis".
  • On the third new item, set the Header property to "Cycling".

Click "OK" to confirm the changes and to close the dialog.

Run the demo and expand the RadTreeView. It should look like the following screen shot:

CopyXAML

<telerik:RadTreeView Margin="8">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis"/>
        <telerik:RadTreeViewItem Header="Cycling"/>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Tip
Find out hot to populate your RadTreeView with data using binding.

The Telerik RadTreeView supports drag-and-drop functionality. To enable the feature you only need to set the IsDragDropEnabled property to True.

Select the RadTreeView control, navigate to the Behavior section in the Properties pane and set the value of the IsDragDropEnabled property to True.

CopyXAML

<telerik:RadTreeView Margin="8" IsDragDropEnabled="True">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis"/>
        <telerik:RadTreeViewItem Header="Cycling"/>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Run the application and try the drag-and-drop behavior.

Tip
Find out more about the RadTreeView'sDrag and Drop support.

By default you can select only one item in the treeview. If you want to enable multiple item selection, and to select several nodes by pressing the Ctrl or Shift keys, you need to change the SelectionMode property.

Find the SelectionMode property in the Properties pane and set its value to Multiple.

CopyXAML

<telerik:RadTreeView Margin="8" IsDragDropEnabled="True" 
        SelectionMode="Multiple">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis"/>
        <telerik:RadTreeViewItem Header="Cycling"/>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Start the application and try to select more than one item at once.

Tip
Find out more about the RadGridView'sSelection support.

By enabling the IsSingleExpandPath property, the RadTreeView will automatically close all the nodes that are not on the path of the expanded node.

Select the treeview and find the IsSingleExpandPath property in the Properties pane and enable it.

CopyXAML

<telerik:RadTreeView Margin="8" IsDragDropEnabled="True" 
        SelectionMode="Multiple" IsSingleExpandPath="True">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis"/>
        <telerik:RadTreeViewItem Header="Cycling"/>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Tip
Read more about Expanding and Collapsing Items

Switch the document view to XAML View by choosing View -> Active Document View -> XAML View (or just press F11).

Find the declaration of the RadTreeView and add the following attribute:

CopyXAML

telerik:StyleManager.Theme="Vista"

Start the application.

You should see RadTreeView with Vista theme applied.

CopyXAML

<telerik:RadTreeView Margin="8" IsDragDropEnabled="True" 
        SelectionMode="Multiple" IsSingleExpandPath="True"
        telerik:StyleManager.Theme="Vista">
    <telerik:RadTreeViewItem Header="Sport Categories">
        <telerik:RadTreeViewItem Header="Football">
            <telerik:RadTreeViewItem Header="Futsal"/>
            <telerik:RadTreeViewItem Header="Soccer"/>
        </telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem Header="Tennis"/>
        <telerik:RadTreeViewItem Header="Cycling"/>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

If you need to further customize the appearance of your RadTreeView controls, check out the following topics:

• Styles and Templates - Overview
• Templates Structure

Other Resources