[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [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
   [Expand]TileNav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tile Bar

The TileBar control allows you to implement a tile-based UI in your application:

  • A row/column of static or clickable tiles
  • A simple or hierarchical tile-based menu
  • Tiles with a drop-down functionality (you can display any control in a tile's dropdown), etc.

Tiles act as regular buttons by default, but also support the pressed state and checking functionality.

This topic consists of the following sections:

Expanded Create Tiles and Tile Groups

The Tile Bar control consists of tile groups (TileBarGroup objects), which consist of tiles (TileBarItem objects).

You can add and customize tiles and tile groups at design time in the following ways: context-dependent popup menus, Smart Tags, Visual Studio Properties window and dedicated designer which allows adding multiple image and text regions to tiles.

First, add at least one tile group.

Then, you can create tiles using, for example, the context menu.

The TileBar, TileBarGroup, and TileBarItem objects are TileControl, TileGroup, and TileItem class descendants, respectively. Most of the APIs these classes expose are in effect for the TileBar control, its groups, and items.

Expanded Display One Text Region and Image

Use the properties the Tile (TileBarItem object) exposes to display one text region and/or one image within a tile.

You have quick access to these settings from the tile's Smart Tag.

You can specify that tiles only display text when the mouse pointer hovers over them using the TileControl.ItemTextShowMode property.

Expanded Display Multiple Text Regions and Images

To add multiple text and image regions to tiles, create tile elements which can display an image and text. You can use tile elements' options to control text and image positions and the image scaling mode. A tile element can be aligned relative to another element.

At design time, use the Tile Element Designer to edit tile elements.

You can add tile item elements in code using the TileItem.Elements property. See the Tile Item Structure to learn more.

Expanded Example

Expanded Orientation, Scrolling and Tile Layout

Tiles are arranged horizontally by default. To change the orientation, use the TileControl.Orientation property.

Scroll buttons appear if the Tile Bar size exceeds the available bounds. You can use the TileControl.ScrollMode setting to enable the scroll bar or disable the scroll handles.

The Tile Bar provides settings to align tiles within the control's bounds, hide group captions, and specify the distance between items and groups.

Expanded Set Item Size

Tiles in the Tile Bar can be Medium or Wide.

A medium tile is square. The TileBar.ItemSize integer setting specifies its width and height.

A wide tile is rectangular. The TileBar.ItemSize and TileBar.WideTileWidth properties specify the item's height and width.

After a tile is created, you can specify the tile's size format with the TileBarItem.ItemSize property.

Expanded Actions on Tile Clicking

Tiles act as buttons and raise the following events on a mouse click by default:

The Tile Bar also provides events for responding to other mouse actions (double-clicking, right button clicking, etc.). See the Related API list below.

Expanded Selection

The TileControl.AllowSelectedItem property enables the tile selection mode, in which tiles act as radio-buttons. Clicking on a tile switches it to the pressed state.

An end user can also select tiles by navigating between them using the Arrow keys.

Handle the TileControl.SelectedItemChanged event to respond to selection changes.

Expanded Checked Tiles

The Tile Bar control supports the item checking functionality in which single or multiple tiles can be checked by right-clicking (on non-touch screens) or dragging tiles down (on touch-input devices).

Use the TileControl.ItemCheckMode property to enable single or multiple item check mode.

Expanded Drop-Down Functionality

Each tile can be associated with a drop-down control using the TileBarItem.DropDownControl property. Drop a TileBarDropDownContainer control from the Toolbox onto the form. Add custom controls to the created TileBarDropDownContainer, and then assign the container to the TileBarItem.DropDownControl property. Tiles with associated drop-down controls automatically display drop-down buttons.

You can add any control to a TileBarDropDownContainer, including another TileBar control.

The Tile Bar allows you to associate drop-down containers with tiles dynamically by handling the TileBar.DropDownShowing event.

Expanded Example

The following code demonstrates how to create a TileBar control with one tile and associate a dropdown control with this tile.

Expanded Appearance Customization

Use the Tile Bar's TileControl.AppearanceItem property to customize tiles' default appearance settings in the normal, hovered, pressed and selected states. You can override these settings for individual tiles using their TileItem.AppearanceItem properties. The image below demonstrates using these two properties simultaneously.

Background Images and Shadows

Tiles can display background images and shadows. You can use the corresponding settings to change the background image's alignment and scaling mode.

Glyph Skinning

If tiles display gray-scale images you can enable the glyph skinning feature, which paints tile images using the tile's foreground color.

HTML Text Formatting

The Tile Bar allows you to provide contents for tile items in a simplified HTML format. When specifying the tile's Text property, you can specify font size, style, and color for the entire text or its part, and insert line breaks.

Expanded Context Buttons

Context buttons allow you to implement additional functionality for tiles. For instance, you can use a regular context button (it can display text and image) that fires a certain action on a click. A check context button allows you to implement custom tile checking logic. A rating context button displays a rating control in each tile.

Expanded Pager Navigation

The RadioGroup and WindowsUIButtonPanel can be used as a pager for the following controls:

The pager automatically splits the target control's content into pages, and provides navigation buttons to scroll to corresponding pages. The pager navigation functionality is implemented as a Behavior and can be added to your controls using the BehaviorManager component.

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