[Expand]General Information
[Collapse]WinForms Controls
 [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
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Collapse]TileNav Pane
     TileNavPane Overview
     TileNavPane Bars
     How to: Create and Customize the TileNavPane Control in Code
     How to: Create and Customize the TileNavPane Control at Design Time
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [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)

TileNavPane Overview

The Tile Navigation Pane is a touch enabled control that provides navigation functionality similar to that found in Microsoft Dynamics®. The following topic deals with the main features and settings of this control.


This topic consists of the following sections.

Expanded Overview

The TileNavPane control, which is designed to be displayed at the top of the application window, provides a three-level hierarchy of nested elements that allow an end user to navigate through the application structure in a touch friendly manner. The TileNavPane consists of the nav bar, which is always visible in the application window, and the drop-down tile bars, which appear when an end-user selects a navigation element. The drop-down bars contain corresponding sub-elements. The TileNavPane's nav bar provides the Main Button that, with a click, invokes the primary drop-down bar that contains root-level navigation elements. If a navigation element is selected in a drop-down bar, the nav bar displays breadcrumbs.These allow an end-user to track the current location in the navigation hierarchy. In the nav bar, it is also possible to display custom navigation buttons, which perform an action on a click, and category buttons, which provide access to the corresponding category items without the need to invoke the main navigation hierarchy.

The figure below demonstrates a sample TileNavPane.

To learn more about bars and visual elements of the TileNavPane, see the TileNavPane Bars topic.

Expanded The Main Button, Navigation and Category Buttons in the Nav Bar

The TileNavPane control allows end-users to navigate through the application using the navigation elements (NavElement objects). Navigation elements are buttons in the nav bar and tiles (see below) in the drop-down bars. You can respond to a click on a navigation element in a centralized way by handling the TileNavPane.ElementClick event.

The nav bar can display the Main Button, navigation buttons (which are the NavButton objects) and category buttons (the TileNavCategory objects rendered as buttons). A category button, when clicked, invokes the drop-down bar displaying corresponding category items. To add custom navigation and category buttons to the nav bar, use the TileNavPane.Buttons collection. The figure below show a sample nav bar displaying the Main Button, navigation and category buttons.

The Main Button is the NavButton object whose NavButton.IsMain property is set to true. Only one NavButton in the TileNavPane.Buttons collection can be specified as the Main Button. The TileNavPane.MainButtonBehavior property specifies the content of the drop-down invoked on a Main Button click.


When the TileNavPane is created at design time, the Main Button is automatically added to the nav bar. If the TileNavPane control is created in code, the Main Button should be created manually. See the How to: Create and Customize the TileNavPane Control in Code topic for a sample code.

The alignment of a NavElement relative to the nav bar can be specified with the NavElement.Alignment property. You can also specify the padding around buttons in the nav bar using the TileNavPane.ButtonPadding property.

Expanded Hierarchy of Tile Navigation Elements

Navigation elements that are rendered as tiles in the drop-downs (TileNavElement objects) are organized into a three-level hierarchy:

Categories (TileNavCategory objects) — root-level navigation elements. These elements are displayed in the primary drop-down invoked on a Main Button click. See the figure below.

To add categories to the navigation hierarchy, use the TileNavPane.Categories collection. End-users can select categories with a click on a category tile in the drop-down. When a category is selected, it is displayed as a breadcrumb link next to the Main Button. The navigation element that is currently selected in the TileNavPane control can be returned using the TileNavPane.SelectedElement property.


You can also use one default category on the root-level and display its items on a Main Button click. See the TileNavPane.DefaultCategory property for details.

Category items (TileNavItem objects) — middle-level navigation elements that can be contained in a category. To add items to a category, use the TileNavCategory.Items collection. Category items are displayed in the primary drop-down. This drop-down is invoked with a click on a category breadcrumb link in the nav bar. See the following figure.

Sub-items (TileNavSubItem objects) — bottom-level navigation elements that can be contained in a category item. Use the TileNavItem.SubItems collection to add sub-items to a category item. If a category item contains sub-items, its tile is rendered with a drop-down button. When an end-user clicks the drop-down button, the secondary drop-down is invoked. Sub-items are displayed as tiles in this drop-down. See the figure below.

An end-user can also select a category item by clicking its tile. In this case, the selected item is displayed as the last breadcrumb link in the nav bar. With a click on this link, an end-user can invoke the primary drop-down displaying sub-items. See the following figure.

To learn how to create the TileNavPane control at design time and populate it with navigation elements, see the How to: Create and Customize the TileNavPane Control at Design Time topic.

Expanded Groups of Tile Navigation Elments

Tile navigation elements on the same navigation level can be combined into groups. By default, element tiles are displayed in the drop-down bars in the order they are added to the corresponding collection, but elements that belong to a certain group are displayed together. The group name is displayed above the first tile of the group. To specify the group to which an element belongs, use the TileNavElement.GroupName property. The following picture shows an example of grouped elements in the secondary drop-down bar.

To specify the appearance settings used to paint group names, use the TileNavPaneDropDownOptions.AppearanceGroupText property.

Expanded See Also

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