Create Horizontal TreeView

This tutorial will show you how to create a RadTreeView with horizontal orientation.

Here is an ordinary treeview declaration:

<telerik:RadTreeView> 
    <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="Table Tennis"/> 
        </telerik:RadTreeViewItem> 
        <telerik:RadTreeViewItem Header="Cycling"> 
            <telerik:RadTreeViewItem Header="Road Cycling"/> 
            <telerik:RadTreeViewItem Header="Indoor Cycling"/> 
            <telerik:RadTreeViewItem Header="Mountain Bike"/> 
        </telerik:RadTreeViewItem> 
    </telerik:RadTreeViewItem> 
</telerik:RadTreeView> 

Silverlight RadTreeView Sample Declaration

In order to create a horizontal treeview you need to set the ItemContainerStyle property of the RadTreeView and the RadTreeViewItem.

Declare the following style in the resources of your application. It will set the ItemsPanel to a StackPanel with Horizontal orientation:

<Style TargetType="telerik:RadTreeViewItem" x:Key="TreeViewItemStyle"> 
    <Setter Property="ItemsPanel"> 
        <Setter.Value> 
            <ItemsPanelTemplate> 
                <StackPanel HorizontalAlignment="Center" Margin="4,6" Orientation="Horizontal" /> 
            </ItemsPanelTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 

Apply this style to the ItemContainerStyle of the treeview and each treeview item.

<telerik:RadTreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}"> 
    <telerik:RadTreeViewItem Header="Sport Categories" ItemContainerStyle="{StaticResource TreeViewItemStyle}"> 
        <telerik:RadTreeViewItem Header="Football" ItemContainerStyle="{StaticResource TreeViewItemStyle}"> 
            <telerik:RadTreeViewItem Header="Futsal" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
            <telerik:RadTreeViewItem Header="Soccer" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
        </telerik:RadTreeViewItem> 
        <telerik:RadTreeViewItem Header="Tennis" ItemContainerStyle="{StaticResource TreeViewItemStyle}"> 
            <telerik:RadTreeViewItem Header="Table Tennis" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
        </telerik:RadTreeViewItem> 
        <telerik:RadTreeViewItem Header="Cycling" ItemContainerStyle="{StaticResource TreeViewItemStyle}"> 
            <telerik:RadTreeViewItem Header="Road Cycling" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
            <telerik:RadTreeViewItem Header="Indoor Cycling" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
            <telerik:RadTreeViewItem Header="Mountain Bike" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/> 
        </telerik:RadTreeViewItem> 
    </telerik:RadTreeViewItem> 
</telerik:RadTreeView> 

Here is the result: Silverlight RadTreeView Horizontal Orientation

See Also

In this article