getting-started.md

title	page_title	description	slug	tags	position
Getting Started	Getting Started	This article will walk you through the creation of a sample application that contains a RadNavigationView control.	radnavigationview-getting-started	getting,started,navigationviewitem	2

Getting Started with {{ site.framework_name }} NavigationView

This tutorial walks you through the creation of a sample application that contains a RadNavigationView control. We also demonstrate a few optional features.

Adding Telerik Assemblies Using NuGet

To use RadNavigationView when working with NuGet packages, install the Telerik.Windows.Controls.Navigation.for.Wpf.Xaml package. The [package name may vary]({%slug nuget-available-packages%}) slightly based on the Telerik dlls set - [Xaml or NoXaml]({%slug xaml-vs-noxaml%})

Read more about NuGet installation in the [Installing UI for WPF from NuGet Package]({%slug nuget-installation%}) article.

tip With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it [here]({%slug installing-license-key%}).

Adding Assembly References Manually

If you are not using NuGet packages, you can add a reference to the following assemblies:

• Telerik.Licensing.Runtime
• Telerik.Windows.Controls
• Telerik.Windows.Controls.Navigation
• Telerik.Windows.Data

tip To find the required assemblies for each control, see the [Controls Dependencies]({%slug installation-installing-controls-dependencies-wpf%}) article.

Defining RadNavigationView

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

[XAML] Example 1: Defining RadNavigationView

{{region xaml-radnavigationview-getting-started-0}} <telerik:RadNavigationView x:Name="navigationView" /> {{endregion}}

Populating with Items

Populate the control with items by adding RadNavigationViewItems to its Items collection:

[XAML] Example 2: Populating with Items in xaml

{{region xaml-radnavigationview-getting-started-1}} <telerik:RadNavigationView x:Name="navigationView" PaneHeader="Header"> telerik:RadNavigationView.Items <telerik:RadNavigationViewItem Content="Bookmarks"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> <telerik:RadNavigationViewItem Content="Favorites"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> <telerik:RadNavigationViewItem Content="Files"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> </telerik:RadNavigationView.Items> telerik:RadNavigationView.Content </telerik:RadNavigationView.Content> </telerik:RadNavigationView> {{endregion}}

Another way to populate RadNavigationView with items is to use data binding. See the [DataBinding]({%slug radnavigationview-populating-with-data-databinding%}) article for details.

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

Check out the [Icon and IconTemplate]({%slug common-styling-appearance-radglyph%}) article for more information on those properties.

Opening/Closing the NavigationPane in code

By default, users can open or close the NavigationPane that hosts the RadNavigationViewItems by clicking the RadToggleButton. You can manage the state of the control programmatically by setting the IsPaneOpen property of the RadNavigationView. This is demonstrated in Examples 3 and 4:

[XAML] Example 3: Setting the IsPaneOpen property in xaml

{{region cs-radnavigationview-getting-started-2}} <telerik:RadNavigationView x:Name="navigationView" IsPaneOpen="True" /> {{endregion}}

[C#] Example 4: Setting the IsPaneOpen property in code

{{region cs-radnavigationview-getting-started-3}} this.navigationView.IsPaneOpen = true; {{endregion}}

[VB.NET] Example 4: Setting the IsPaneOpen property in code

{{region cs-radnavigationview-getting-started-4}} Me.navigationView.IsPaneOpen = True {{endregion}}

Changing the Width of the Navigation Pane

• To control the width of the NavigationPane when it's opened, use the ExpandedPaneWidth property.

• To control the width of the NavigationPane when it's closed, use the CompactPaneWidth property.

Example 5 demonstrates how you can set the property in order to increase the default width when the navigation pane is closed.

[XAML] Example 5: Setting the CompactPaneWidth property

{{region xaml-radnavigationview-getting-started-5}} <telerik:RadNavigationView x:Name="navigationView" PaneHeader="Header" CompactPaneWidth="150"> telerik:RadNavigationView.Items <telerik:RadNavigationViewItem Content="Bookmarks"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> <telerik:RadNavigationViewItem Content="Favorites"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> <telerik:RadNavigationViewItem Content="Files"> telerik:RadNavigationViewItem.Icon <telerik:RadGlyph Glyph="" FontSize="16"/> </telerik:RadNavigationViewItem.Icon> </telerik:RadNavigationViewItem> </telerik:RadNavigationView.Items> telerik:RadNavigationView.Content </telerik:RadNavigationView.Content> </telerik:RadNavigationView> {{endregion}}

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

Navigation

RadNavigationView doesn't perform any navigation automatically. To perform navigation-related tasks or change the content of the RadNavigationView control, you must handle either of the following events:

• The ItemClick event that is raised when a user clicks a RadNavigationViewItem.

• The SelectionChanged event that is raised when a user clicks a RadNavigationViewItem and this results in the selection of a new item.

Alternatively, you can use the SelectedItem property to change the content. This is demonstrated in the [DataBinding]({%slug radnavigationview-populating-with-data-databinding%}) article.

More Features

To further customize RadNavigationView, you can also control:

• The 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]({%slug radnavigationview-display-mode%}) article.

• The 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]({%slug radnavigationview-header-and-footer%}) article for more information.

Setting a Theme

The controls from our suite support different themes. You can see how to apply a theme different than the default one in the [Setting a Theme]({%slug styling-apperance-implicit-styles-overview%}) help article.

important Changing the theme using implicit styles will affect all controls that have styles defined in the merged resource dictionaries. This is applicable only for the controls in the scope in which the resources are merged.

To change the theme, you can follow the steps below:

• Choose between the themes and add reference to the corresponding theme assembly (ex: Telerik.Windows.Themes.Windows8.dll). You can see the different themes applied in the Theming examples from our WPF Controls Examples application.

• Merge the ResourceDictionaries with the namespace required for the controls that you are using from the theme assembly. For the RadNavigationView, you will need to merge the following resources:

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

Example 3 demonstrates how to merge the ResourceDictionaries so that they are applied globally for the entire application.

[XAML] Example 3: Merge the ResourceDictionaries

{{region radnavigationview-getting-started_6}} <Application.Resources> <ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries> </Application.Resources> {{endregion}}

Alternatively, you can use the theme of the control via the {% if site.site_name == 'WPF' %}StyleManager{% else %}StyleManager{% endif %}.

Figure 3 shows a RadNavigationView with the Windows8 theme applied.

Figure 3: RadNavigationView with the Windows8 theme

{% if site.site_name == 'WPF' %}

Telerik UI for WPF Learning Resources

• Telerik UI for WPF NavigationView Component
• [Getting Started with Telerik UI for WPF Components]({%slug getting-started-first-steps%})
• [Telerik UI for WPF Installation]({%slug installation-installing-which-file-do-i-need%})
• [Telerik UI for WPF and WinForms Integration]({%slug winforms-integration%})
• [Telerik UI for WPF Visual Studio Templates]({%slug visual-studio-templates%})
• [Setting a Theme with Telerik UI for WPF]({%slug styling-apperance-implicit-styles-overview%})
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement {% endif %}

See Also

• [DataBinding]({%slug radnavigationview-populating-with-data-databinding%})
• [Display Mode]({%slug radnavigationview-display-mode%})
• [Icon and IconTemplate]({%slug radnavigationview-icon-and-icontemplate%})