[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 at Design Time

This topic explains how to use Visual Studio's designer to create and customize a Tile Navigation Pane. The figure below shows a control created at design time.


Run the ApplicationUI demo and click Open Solution for the complete example. In Solution Explorer, find ModuleTileNavePane file and open it in the designer.

Expanded Create a Tile Navigation Pane

Drop the TileNavPane control from the Toolbox window onto the application's form.

The TileNavPane control's smart tag menu provides access to designer tasks. The figure below shows the Tile Nav Pane from the demo application.

The TileNavPane already contains the main button if you create the control in the designer. In this example, the main button caption is DevExpress CRM. We also added custom buttons to the nav bar.


If you create the control in code, you should add the main button to the TileNavPane.Buttons collection.

Expanded Populate the Main Menu with Tiles

The main button provides access to root navigation elements. Use the TileNavPane.MainButtonBehavior property to specify whether the control uses a three- or two-level hierarchy of navigation elements.

Three-level hierarchy

If you use a three-level navigation hierarchy, click Run Designer smart tag menu task to invoke TileNavPane Designer. In this designer, you can add categories, category items, and sub-items to the menu.

You can use the TileNavElement.TileText and TileNavElement.TileImage properties to specify the text block and image of the main element of the tile.


The TileNavElement.TileText and TileNavElement.TileImage properties specify the navigation element's text and image displayed in the drop-down bars, while the NavElement.Caption and NavElement.ImageOptions properties specify the caption and glyph displayed in the nav bar.

The TileNavElement.Tile property provides access to the tile that renders the navigation element in the drop-down bars. To display multiple text blocks and images in a tile, use the TileItem.Elements collection. See Tile Item Structure for more information.

Two-level hierarchy

If you want to use a two-level navigation element hierarchy, click Edit Default Category Items smart tag menu task. In this case, TileNavPane Designer omits the category level.

Expanded Create and Customize Buttons in the Nav Bar

Add Button and Add Category Button smart tag tasks add corresponding buttons directly to the nav bar. The category button's smart tag menu allows you to add items to this category and assign a tooltip.

Use the NavElement.Alignment property to align buttons relative to the nav bar. To arrange buttons at design time, you can also use drag-and-drop operations.

The NavElement.Caption and NavElement.ImageOptions properties allow you to specify the caption and glyph. To specify the glyph's alignment relative to the button, use the NavElement.GlyphAlignment property.

Expanded See Also

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