[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)

How to: Create and Customize the TileNavPane Control at Design Time

The following topic deals with creating and customizing the TileNavPane control at design time.

At design time, to add the TileNavPane control to your application, drag it from the toolbox and drop to the application form.

When the control is dropped on the form at design time, it contains the predefined Main Button captioned Main Menu, as you can see in the following figure. The TileNavPane's smart tag menu provides access to the list of the main actions that can be applied to the control.

To add navigation and category buttons to the nav bar, use the Add Button and Add Category Button commands. In the figure below, you can see several buttons added to the nav bar. The Create... category button's smart tag menu allows you to add items to this category and assign a hint to the category button.

When buttons are added to the nav bar, you can align them relative to the nav bar, using the NavElement.Alignment property. To arrange buttons in the nav bar at design time, you can use drag and drop operations. The NavElement.Caption and NavElement.Glyph properties allow you to specify the button. To specify the alignment of the glyph relative to the button, use the NavElement.GlyphAlignment property.

In the TileNavPane's smart tag menu, click the Run Designer menu item to invoke the TileNavPane Designer that allows you to add categories, items and sub-items to the navigation hierarchy, and to customize them. The figure below shows a sample navigation hierarchy created in the designer.

When a tile is hovered over with the mouse pointer in the designer, a flyout that contain the main tile properties appears. A tile, used to render the TileNavElement in drop-down bars, can be accessed via the TileNavElement.Tile property. You can use the TileNavElement.TileText and TileNavElement.TileImage properties to specify the text block and image of the main element of the tile. To display multiple text blocks and images in a tile, use the TileItem.Elements collection. See the Tile Item Structure topic for more details.


The TileNavElement.TileText and TileNavElement.TileImage properties specify the text and image displayed in the tile in the drop-down bars, while the NavElement.Caption and NavElement.Glyph properties specify the caption and glyph used to render the corresponding NavButton, TileNavCategory or breadcrumb link in the nav bar.

The figure below shows the resulting TileNavPane control created at design time.

Expanded See Also

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