Hierarchy

RadNavigationView allows you to define sub-items in order to achieve hierarchical menu visualizаtion.

Each RadNavigationViewItem element has an Items collection that can be populated with RadNavigationViewItem elements, thus allowing multiple levels of items to be defined in the hierarchy.

Example 1: Setting up hierarchical navigation view in XAML

<telerik:RadNavigationView PaneHeader="Mail"> 
    <telerik:RadNavigationView.Items> 
        <telerik:RadNavigationViewItem Content="Accounts"> 
            <telerik:RadNavigationViewItem.Items> 
                <telerik:RadNavigationViewItem Content="Martin Ivanov (mi@prgs.com)" /> 
                <telerik:RadNavigationViewItem Content="Jon Doe (jd@prgs.com)" />                        
            </telerik:RadNavigationViewItem.Items> 
        </telerik:RadNavigationViewItem> 
        <telerik:RadNavigationViewItem Content="Folders"> 
            <telerik:RadNavigationViewItem.Items> 
                <telerik:RadNavigationViewItem Content="Inbox"/> 
                <telerik:RadNavigationViewItem Content="Drafts"/> 
                <telerik:RadNavigationViewItem Content="Sent Items"/> 
                <telerik:RadNavigationViewItem Content="Deleted Items"/> 
            </telerik:RadNavigationViewItem.Items> 
        </telerik:RadNavigationViewItem>              
    </telerik:RadNavigationView.Items> 
</telerik:RadNavigationView> 
To control the current expand state of a RadNavigationViewItem, set its IsExpanded property.

Figure 1: Hierarchical RadNavigationView

Multiple Expanded Items

By default, multiple RadNavigationViewItem elements with child items can be expanded at once. To change this and allow only a single expanded item, set the AllowMultipleExpandedItems property of RadNavigationView to False.

Example 2: Disabling multiple expanded items at once

<telerik:RadNavigationView AllowMultipleExpandedItems="False" /> 

Child Items Indentation

To change the default horizontal offset (indent) of the child items relative to their parent, set the SubItemsIndentation property of RadNavigationView.

Example 3: Setting the indent of sub items

<telerik:RadNavigationView SubItemsIndentation="10" /> 

Figure 2: Sub items indentation set to 10

Expand and Collapse Icon

RadNavigationViewItem has default expand and collapse icons shown in the right part of the item when it has children. To replace the icons, set the ExpandedIcon and CollapsedIcon properties of RadNavigationViewItem. The default icon template uses RadGlyph and you can set the properties to a glyph string from the glyphs reference sheet.

Example 4: Setting the expand and collapse icons

<telerik:RadNavigationViewItem ExpandedIcon="&#xe901;" CollapsedIcon="&#xe900;"> 

Figure 3: RadNaviationViewItems with folder glyphs as expand/collapse icons

To change this behavior and use other UI for the icons like a customized RadGlyph, an Image, or any other element, set the ExpandedIconTemplate and CollapsedIconTemplate properties. The properties expect DataTemplate values.

Example 5: Setting the expand and collapse icon templates

<Window.Resources> 
    <DataTemplate x:Key="ExpandedCollapsedIconTemplate"> 
        <Image Source="{Binding}" Width="16" Height="16" /> 
    </DataTemplate> 
</Window.Resources> 
 
<telerik:RadNavigationViewItem ExpandedIcon="Images/expanded-icon.png"  
                               CollapsedIcon="Images/collapsed-icon.png"  
                               ExpandedIconTemplate="{StaticResource ExpandedCollapsedIconTemplate}" 
                               CollapsedIconTemplate="{StaticResource ExpandedCollapsedIconTemplate}" />                     

Figure 4: RadNavigationViewItems with folder images as expand/collapse icons

In data binding scenarios or when there are many items, you can use the ItemContainerStyle property to set the icon properties.

Flyout

When RadNavigationView is collapsed and its current DisplayMode Compact, you can display the nested menu items by clicking on the collapsed RadNavigationViewItems.

Figure 5: Sub menu flyout visualization

Events

The expanding and collapsing actions fire the ItemExpanded and ItemCollapsed events of RadNavigationView.

Additionally, the RadNavigationViewItem exposes Expanded and Collapsed events.

Example 6: Subscribing to ItemExpanded event

<telerik:RadNavigationView ItemExpanded="RadNavigationView_ItemExpanded" /> 

Example 7: ItemExpanded event handler

private void RadNavigationView_ItemExpanded(object sender, RoutedEventArgs e) 
{ 
    var expandedItem = (RadNavigationViewItem)e.OriginalSource; 
} 

The Expanded/Collapsed event of RadNavigationViewItem is fired before the ItemExpanded/ItemCollapsed event of RadNavigationView.

Data Binding

RadNavigationViewItem exposes ItemsSource and few other data related properties that allow setting up the hierarchy in a data binding scenario. Read more about this in the Hierarchical Data Binding article.

See Also

In this article
Not finding the help you need? Improve this article