Skip to main content

Tutorial: Tile View - Element Layout and Appearance

  • 3 minutes to read

This walkthrough is a transcript of the Tile View - Element Layout and Appearance video available on the DevExpress YouTube Channel.

In this tutorial, you will learn more about populating the tile layout with data.

Starting Point

Begin with a Tile View that displays a data-bound image and a static text element (see Tutorial: Tile View - Basics).

TileView_TilesWithPhotoAndText

Task

This is how the same View will look after you’re done with the customization.

TileView_TilesNewFontsResult

Customizing Element Layout

  • Adding an Unbound Tile Element

    Open the Tile Template page in the grid control’s Designer dialog. Add an unbound element, change its TileItemElement.Text to Location and then specify its position so that it’s displayed under the previously added element.

    TileView_UnboundTileItem2Properties

  • Adding a Bound Tile Element

    Then, select the First Name column and add a tile element bound to it.

    TileView_CreatingBoundTileItem

    Note that the preview shows a yellow icon next to this element indicating that it is bound to data.

    TileView_PreviewWithBoundItem

    Once again specify a custom position for this element, now above all other text elements.

    TileView_FirstNameItemProperties

  • Adding Other Tile Elements

    Add tile elements for other data fields and one static text element that has a comma as its display text.

    TileView_MultipleTileElements

  • Grouping Tile Elements

    If elements need to go together, such as the first and last name, consider arranging them by anchoring one to the other. Select the Last Name element and set its TileItemElement.AnchorElement and TileItemElement.AnchorAlignment properties. You can also set the TileItemElement.AnchorIndent property to specify the distance between these elements.

    TileView_AnchoringTileElements

    Using this approach anchor tile elements into multiple groups and launch the app to see the result. Tiles now display all required information.

    TileView_TilesWithMultipleElements

Customizing Element Appearance

The next step is to customize element styles. Start with font settings applied to all tile items, which are available using the View’s TileView.Appearance property under ItemNormal. Change the font to Segoe UI Semibold, 10 pt.

TileView_ChangingAppearanceAllElements

Switch to the Tile Template page in the Designer to see the result.

TileView_PreviewItemsNewFont

Individual elements have their own appearance settings that override the styles specified at the View level. Select a tile element and expand its TileItemElement.Appearance property. Modify the settings under TileItemAppearances.Normal.

TileView_ChangingElementAppearance

Run the application to see the result.

TileView_TilesNewFontsResult

Arranging Tiles in Multiple Rows

Finally, you can modify the TileViewItemOptions.RowCount property to arrange your tiles in multiple rows. Set this property to 3, meaning that the grid can display up to three rows depending on the container’s height.

TileView_RowCountProperty

Run the application and see that the current window size only allows the grid to fit two rows.

See Also