Getting Started

This tutorial will walk you through the creation of a sample application that contains a RadNavigationView control.

Assembly References

In order to use RadNavigationView, you will need to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Navigation
  • Telerik.Windows.Data

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Defining RadNavigationView

Example 1 demonstrates how you can define a RadNavigationView in xaml.

Example 1: Defining RadNavigationView

<telerik:RadNavigationView x:Name="navigationView"  /> 

Populating with Items

The control can either be populated by adding RadNavigationViewItems to its Items collection, or by its data binding support.

Example 2: Populating with Items in xaml

<telerik:RadNavigationView x:Name="navigationView" PaneHeader="Header"> 
    <telerik:RadNavigationView.Items> 
        <telerik:RadNavigationViewItem Content="Bookmarks"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe303;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
        <telerik:RadNavigationViewItem Content="Favorites"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe301;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
        <telerik:RadNavigationViewItem Content="Files"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe901;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
    </telerik:RadNavigationView.Items> 
    <telerik:RadNavigationView.Content> 
        <TextBlock Text="Content" Foreground="Black" Margin="5"/> 
    </telerik:RadNavigationView.Content> 
</telerik:RadNavigationView> 

Figure 1: Result from Example 1 in the Office 2016 theme

RadNavigationView populated with items

Check out the Icon and IconTemplate article for more information on those properties.

To learn how to set up the control in a data binding scenario, read the DataBinding article.

DisplayMode

The RadNavigationView control dynamically changes its layout based on its size. It has three display modes: Minimal, Compact and Expanded. You can read more about them in the Display Mode article.

PaneHeader and PaneFooter

The RadNavigationView control allows you to customize its header and footer. You can set them to simple strings or add a custom control. Check out the Header and Footer article for more information.

RadNavigationView doesn't perform any navigation automatically. When a certain RadNavigationViewItem is clicked, the ItemClick event is raised. If the click results in a new item being selected, a SelectionChanged event is also raised.

Either of the above events can be handled to perform navigation related tasks or change the Content of the RadNavigationView control. Alternatively, the SelectedItem property can be used in order to change the content. This is demonstrated in the DataBinding article.

Opening/Closing the NavigationPane in code

The NavigationPane which hosts the RadNavigationViewItems is normally opened/closed by clicking the RadToggleButton. However, this can also be in code by setting the IsPaneOpen property of the RadNavigationView as demonstrated in Examples 3 and 4.

Example 3: Setting the IsPaneOpen property in xaml

 <telerik:RadNavigationView x:Name="navigationView" IsPaneOpen="True" /> 

Example 4: Setting the IsPaneOpen property in code

this.navigationView.IsPaneOpen = true; 
Me.navigationView.IsPaneOpen = True 

Changing the Width of the Navigation Pane

The width of the NavigationPane when it is opened/closed can be controlled through the CompactPaneWidth and ExpandedPaneWidth properties. Example 5 demonstrates how you can set the CompactPaneWidth property in order to increase the default width when the navigation pane is closed.

Example 5: Setting the CompactPaneWidth property

 <telerik:RadNavigationView x:Name="navigationView" PaneHeader="Header" CompactPaneWidth="150"> 
    <telerik:RadNavigationView.Items> 
        <telerik:RadNavigationViewItem Content="Bookmarks"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe303;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
        <telerik:RadNavigationViewItem Content="Favorites"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe301;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
        <telerik:RadNavigationViewItem Content="Files"> 
            <telerik:RadNavigationViewItem.Icon> 
                <telerik:RadGlyph Glyph="&#xe901;" FontSize="16"/> 
            </telerik:RadNavigationViewItem.Icon> 
        </telerik:RadNavigationViewItem> 
    </telerik:RadNavigationView.Items> 
    <telerik:RadNavigationView.Content> 
        <TextBlock Text="My Content" Foreground="Black" Margin="5"/> 
    </telerik:RadNavigationView.Content> 
</telerik:RadNavigationView> 

Figure 2: Result from Example 5 in the Office 2016 theme

RadNavigationView with CompactPaneWidth set

See Also

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