[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Collapse]Application UI Manager
    [Expand]Widget View
    [Collapse]WindowsUI View
     [Expand]Getting Started
      Content Containers
      Navigation Bars
      WindowsUI Buttons
      Search Panel
      Application Hierarchy and Module Navigation
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[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)

Application Hierarchy and Module Navigation

To get started with WindowsUIView application hierarchy and navigation, invoke the View Designer and add multiple Documents. Handle the BaseView.QueryControl event to provide sample content for these Documents and run the application.

The start-up application page displays an automatically created Tile Containers with Tiles. Clicking a Tile shows the related Document. Invoke the designer again and switch to the "Navigation Tree" tab to see all these interconnected objects as a hierarchy.

This figure highlights two main properties required to build a WindowsUIView hierarchy and implement a simple navigation:

  • Items - stores child items for this container. For example, the Tile Control's TileContainer.Items collection stores all the Tiles this container owns. In the "Navigation Tree" Designer tab, you can drag-and-drop items in the "Items" collection to populate this container.
  • ActivationTarget - points to an object that should be activated when a user clicks a specific Tile.

Expanded Simple Navigation: Activation Target

The ActivationTarget property is available for Tiles (Tile.ActivationTarget) and TileContainers (TileContainer.ActivationTarget). In the example above, no ActivationTarget is specified and the View follows an internal logic: when a user clicks a Tile, the View dynamically creates a Page container for the Document assigned to the clicked Tile's Tile.Document property.

To see how the ActivationTarget works, go to the "Content Containers" Designer tab and create a PageGroup container. Drag-and-drop Documents in this container in the "Navigation Tree" tab, then drag the container itself to the TileContainer's ActivationTarget line.

Test the application to see that clicking any tile now opens this Page Group. The Page Group also automatically selects the Document, whose related Tile has been clicked.

Individual Tiles' ActivationTarget_s have priority over the TileContainer's target. In the figure below, clicking Tiles #1 and #2 still brings a user to the PageGroup, but Tile #3 has a _ActivationTarget - a Page container that displays the Document3.


Note that all containers you drag to an ActivationTarget property automatically receive a BaseContentContainer.Parent property value. If you build an application hierarchy manually in code, remember to specify this property as well. Otherwise, target containers do not display the "Back" header button and users are unable to return to parent containers.

Expanded Custom Navigation and Parameters

If you need to track end-user navigation and pass additional parameters, handle the WindowsUIView.NavigatedTo and WindowsUIView.NavigatedFrom events. These events receive the NavigationEventArgs type parameters that allow you to retrieve the following information:

In the example below, a start-up TileContainer holds three Tiles. The container's ActivationTarget is a Page with one Document that displays the Data Grid with vehicle records.

Tagging Tiles with vehicle category names allows you to pre-filter Data Grid records.

The How To: Pass Specific Data when Navigating Through Containers example illustrates how to pass parameters when navigating from\to containers other than the TileContainer. In this case, you need to implement the ISupportNavigation interface for your Document UserControls to ISupportNavigation.OnNavigatedTo and ISupportNavigation.OnNavigatedFrom methods, which serve the same purpose as the aforementioned NavigatedTo and NavigatedFrom events.

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