[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
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Collapse]Tile Control
    [Expand]Groups and Items
    [Expand]Adaptive Layout Mode
    [Collapse]Working with the Tile Control
      Design-Time Customization
  [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)

Design-Time Customization

There are two approaches to customizing a TileControl at design time. One way is to use the TileControl Designer, which lets you add, remove, reorder elements of the TileControl (TileGroups and TileItems) and access their settings. The TileControl also provides on-form access and customization without the need to invoke the Designer.

Expanded On-Form Customization

To customize a TileControl directly on the form, you can use the context menu, smart tags, drag and drop and the Properties grid.

  • Adding and Deleting TileGroups

    There are two approaches to creating a TileGroup and adding it to the TileControl.Groups collection.

    • Right-clicking the TileControl and selecting Add Group from the context menu.

    • Clicking the TileControl smart tag and selecting the Add Group link.

    Deleting a group from the TileControl can be done in the following ways.

    • Select the TileGroup and press the Delete key.
    • Right-click the TileGroup and select Remove Group from the context menu.
    • Click the TileGroup smart tag and select the Remove Group link.
  • Adding and Deleting TileItems

    You can create a TileItem and add it to the TileGroup.Items collection using two methods.

    • Right-click the selected group or any item residing within it and select one of the menu commands: Add Medium Item, Add Wide Item, Add Small Item or Add Large Item.

    • Click the TileGroup smart tag and select one of the item creation links.

    To delete an item from the TileGroup, use one of the following ways.

    • Select the TileItem and press the Delete key.
    • Right-click the TileItem and select Remove Item from the context menu.
    • Click the TileItem smart tag and select the Remove Item link.
  • Customizing TileControl, TileGroups and TileItems Properties

    To access the settings of a TileControl, TileGroups and TileItems in the Properties grid, select them in the designer. Note that you can simultaneously customize the settings for multiple groups and items. Hold down the SHIFT or CTRL key while clicking elements of the same type to select multiple elements.

    The main properties of a TileControl, TileGroup or TileItem can be accessed in the TileControl Tasks pane, invoked on clicking an object's smart tag.

    The TileControl supports a drag and drop functionality, which allows you to reorder existing TileItems and move TileItems from one TileGroup to another.

  • TileItem Elements

    It is possible to add multiple images and text blocks to a TileItem if required. This can be accomplished by adding an element to the TileItem.Elements collection. See the Tile Item Structure document to learn more. The Tile Item Element Collection Editor allows you to add, remove, reorder TileItem elements and access the settings of the selected element at design time. You can click the item's smart tag and select the Edit TileItem Elements link or select Edit TileItem Elements in the context menu to open this Editor.

  • TileItem Animation

    You can provide an animation effect for each TileItem. Animation is built as a sequence of multiple frames, which will be displayed one after another in a cycle. The Edit Frame Collection menu command in the context menu and the Edit Frame Collection link (accessible on clicking a TileItem smart tag) invoke the Tile Frame Collection Editor, allowing you to add, remove and customize frames. See the Tile Animation document for more information.

  • TileItem Templates

    A TileControl provides the TileItem Template Gallery, which allows you to apply predefined templates to TileItems. Each template defines a set of text blocks and/or images, their arrangements and specifies a TileItem size. Some of templates contain multiple frames to provide animation. To open the Gallery, click the item's smart tag and choose the Select TileItem Template link or choose Select TileItem Template in the context menu.

    Select one of the templates that meets your requirements and click on the Apply button.


    Before applying a template, all existing TileItem elements are removed. The TileItem size will be changed according to the template.

Expanded TileControl Designer

The TileControl Designer is an integrated visual editing tool, providing you with the ability to quickly and easily customize a TileControl. It contains all the necessary instruments needed for editing the TileControl and its elements (TileGroups and TileItems). To open the Designer, utilize one of the two following ways.

  • Using a Smart Tag

  • Using the Context Menu

The following image illustrates the TileControl Designer.

The Designer allows you to customize groups and items, and provides access to the currently selected element's settings by the Properties grid. Note that you can simultaneously customize the settings for multiple items residing within the same group. Hold down the SHIFT or CTRL key while clicking item names to select multiple items. To reorder existing groups and items, and move items from one group to another, use drag and drop in the TileControl hierarchy.

The buttons at the top allow you to manage TileControl elements.

Creates a TileGroup and adds it to the TileControl.Groups collection.

Creates a TileItem in one of the four sizes (Medium, Wide, Small or Large), and adds it to the selected group's TileGroup.Items collection; by default, a medium item is created, but you can select an item size by clicking the dropdown button.

Moves the selected group or item up in the group/item collection.

Moves the selected group or item down in the group/item collection.

Removes selected groups or items; if the selected group is removed, all items residing within the group are removed as well.

Expanded See Also

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