Tutorial: Tile View - Element Layout and Appearance

Apr 01, 2018
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).

Task

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

Customizing Element Layout

Adding an Unbound Tile Element
Adding a Bound Tile Element
Adding Other Tile Elements
Grouping Tile Elements

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.

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

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.

Run the application to see the result.

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.

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