[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
  [Expand]Application UI Manager
  [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
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Collapse]Tile Nav Pane
     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)

How to: Create and Customize the TileNavPane Control in Code

This topic shows how to create the TileNavPane control in code, populate it with navigation elements, and customize its appearance and behavior.

Expanded Create and Customize Buttons in the Nav Bar

In this example, we add the following navigation elements to the nav bar:

  • Main Menu button - a NavButton object. If you create the TileNavPane control in code, you should also create the main button. Set the button's NavButton.IsMain property to true.

  • Home and Help buttons that are aligned at the left and right in the nav bar.

  • Create category - a TileNavCategory object.

  • New customer and New manager category items - TileNavItem objects.

Use the TileNavPane.Buttons collection to add navigation elements to the nav bar.

Expanded Populate the Main Menu with Tiles

In this example, we create the following navigation elements in the main menu:

  • Service and Help categories. Use the TileNavPane.Categories collection to add categories to the main menu. Categories are divided into My Work and Clients groups using the TileNavElement.GroupName property.
  • In Service, we create Dashboards, Activities and Accounts category items. Use the category's TileNavCategory.Items collection to add items to a category.
  • In Dashboards, we create Sales pipeline and Estimated revenue sub-items - TileNavSubItem objects. Use the item's TileNavItem.SubItems collection to add sub-items to a category item.

To specify a navigation element's caption and image, use the following properties:

Expanded Implementation

The code below implements the described Tile Navigation Pane.


The following libraries should be added the project references:

  • DevExpress.XtraBars.v19.2.dll
  • DevExpress.XtraEditors.v19.2.dll
  • DevExpress.Utils.v19.2.dll
  • DevExpress.Data.v19.2.dll

It is also assumed that the project resources contain the required images.

Expanded See Also

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