[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Collapse]Windows Modern UI
   [Expand]Hamburger Menu
   [Expand]Content Containers
     AppBar Control
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


This topic describes the base navigation concepts implemented in the WPF WindowsUI.

Expanded Navigation and Parameters

Navigation within a WPF WindowsUI-based application allows you to navigate between different application views. To navigate through views, your application must contain the NavigationFrame control. Modify the Slide View sample created in the How To: Create a SlideView and Populate It with Data example (follow this link to download the complete sample), so that end-users can navigate to a view containing detailed employee information when they click a SlideViewItem header.

  1. Open the SlideView sample and add the following UserControls to your project: MainView.xaml and EmployeeView.xaml.
  2. Move all the static resources, data context and layout markup from the main application window to the MainView.xaml. This view's markup should appear as follows:

  3. You have now created the main application view. Add the NavigationFrame to the main application window and specify its NavigationFrame.Source property to set the default startup view.

    If you launch the application now, you will see the same result as in the How To: Create a SlideView and Populate It with Data example.

  4. Next, modify the employee details page. The first thing to do is provide the capability to navigate back from this view. To do so, a Back button must be created. Slide View and Page View controls include an embedded Back button, which is visible if an end-user navigates to this control. If your view layout is based on other controls, use the PageAdornerControl.

  5. After all required views are ready, you can build the navigation tree. Clicking a SlideViewItem header will take you to a page containing detailed information. If the SlideView content was not automatically generated from the DataSource, you can explicitly set the navigation target for each SlideViewItem from the Navigation.NavigateTo property:

    Since the SlideView receives its content from the ItemsSource property, you can use another approach - create a new style that affects SlideViewItem objects, and assign it to the ItemContainerStyle property.

  6. Optionally, you can specify the animation used when navigating through containers. To do so, use the NavigationFrame.AnimationType property.

  7. When you navigate from one view to another, you can pass required data using the Navigation.NavigationParameter property. In this example, you will pass the employee's full name to our details page. To do so, bind the NavigationParameter property of SlideViewItems to the FullName field:

  8. To receive and manage this data in our details page, implement the INavigationAware interface for your user control and use its INavigationAware.NavigatedTo method.

  9. If you do not wish to manually implement the INavigationAware interface, you can use the NavigationPage container instead of the standard UserControl. To use the data passed by the NavigationParameter, override the OnNavigatedTo and/or OnNavigatedFrom methods. In this case, the details page will appear as follows:

Expanded Navigation Buttons

Another way to navigate through application views is to use NavigationButton objects.

  1. Start Visual Studio and create a new WPF project. Add a new user control called MainView to your project. This view will serve as the application startup screen.
  2. Drop a TileLayoutControl onto your MainView and create three Tiles.

  3. Each Tile will link to a corresponding view when clicked. Specify the navigation target for all Tiles from the NavigateTo attached property.

  4. Add three UserControls to your project - View1, View2 and View3. These UserControls will represent views related to corresponding Tiles.
  5. Add a PageAdornerControl to each of the detailed views. The complete code for all views can be found at the end of this article.
  6. Customize all three PageAdornerControl headers via the DataTemplate, which is assigned to the HeaderTemplate property. Each DataTemplate should contain two NavigationButtons. The XAML mark-up for View1 is listed below.

  7. Drop a NavigationFrame onto your main application window and specify its Source property, to set up the startup screen. Optionally, you can change the view's transition animation from the NavigationFrame.AnimationType property.

  8. Launch the application to see the result.

    The complete application code is listed at the end of this topic.

Expanded Journal

Each NavigationFrame has a related Journal object. Whenever navigation within a WindowsUI application is performed, previously visited Views are written to JournalEntry objects and stored within a Journal as navigation history. This allows you and your end-users to sequentially navigate in both backward and forward directions. A Journal has two collections that store entries.

The BackStack and ForwardStack collections are closely associated. For example, each time an end-user clicks a Back button, the previous View is placed as a JournalEntry object at the end of the ForwardStack collection. If you now call the NavigationFrame.GoForward method, the ForwardStack collection's last entry will move to the BackStack collection. The View that this entry contains can now be displayed via the NavigationFrame.GoBack method. In this case, the entry will move to the ForwardStack again. To get the entry corresponding to the currently displayed View, use the Journal.Current property.

Journals also provide methods for navigation through their entries.

The Journal's BackStack and ForwardStack collections are IEnumerable objects. See the IEnumerable Interface topic in MSDN to learn how to access and modify these collections. For example, to get a View contained within the third JournalEntry of the BackStack collection, use the following code.

You can use the HamburgerMenuNavigationButtonBase<TOwner>.SaveToNavigationJournal property and the Navigation.SaveToNavigationJournal attached property to prevent information from being saved to the navigation journal.

Expanded Example

This example demonstrates how to use NavigationButtons to navigate through views in WPF WindowsUI applications.

Is this topic helpful?​​​​​​​