Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[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]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]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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tile Bar

The TileBar control allows you to implement a tile-based UI for your application. For example:

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

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

In this topic:

Expanded Create Tiles and Tile Groups

The Tile Bar control consists of tile groups (TileBarGroup objects), which in turn consist of tiles (TileBarItem objects). Before you add tiles, first a tile group(s) needs to be created.

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

Start by adding at least one tile group.

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

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

Expanded Display One Text Region and Image

If you need to display one text region and/or one image within a tile, use the properties the Tile (TileBarItem object) exposes.

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

Using the TileControl.ItemTextShowMode property, you can show text in tiles only when tiles are hovered over.

Expanded Display Multiple Text Regions and Images

You can add multiple text and image regions to tiles, by creating tile elements, each of which can display an image and text. Tile elements provide options to control text and image positions and image scaling mode. A tile element can be aligned relative to another element.

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

In code, you can add tile item elements using the TileItem.Elements property. See the Tile Item Structure to learn more.

Expanded Example

Expanded Orientation, Scrolling and Tile Layout

By default, tiles are arranged horizontally. You can also orient them vertically with the TileControl.Orientation property.

If the Tile Bar size exceeds the available bounds, scroll buttons appear. With the TileControl.ScrollMode setting you can choose how to present scroll handles. For instance, you can enable a scroll bar or disable the scroll handles at all.

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 of two sizes: Medium and Wide.

A medium tile is a square one, whose width and height are specified by the TileBar.ItemSize integer setting.

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

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

Expanded Actions on Tile Clicking

By default, tiles act as buttons and raise the following events on mouse clicking.

The Tile Bar also provides events to respond 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. A click on a tile switches it to the pressed state.

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

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

Expanded Checked Tiles

The Tile Bar control supports the item checking functionality, with which a single or multiple tiles can be checked - by right mouse clicking (on non-touch aware 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 to 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.

In this example, a TileBar control is created. Then, a TileBarGroup with one TileBarItem is added to this control. To associate a dropdown control with a tile, a TileBarDropDownContainer is created and assigned to the TileBarItem.DropDownControl property. Two controls (RichEditControl and SimpleButton) are placed into the container. The following image demonstrates the result of this code.

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 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.

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