Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Tutorial: Tile View - Basics

  • 2 minutes to read

This walkthrough is a transcript of the Tile View - Basics video available on the DevExpress YouTube Channel.

In this tutorial, you will see how to switch the usual GridView data layout to Tile View, which displays information using Windows 10 style tiles. You will learn the basics of tile template configuration, such as adding data bound and unbound elements and positioning them within the template.

#Starting Point

Start with an existing project that already has a grid control bound to a data source. The database contains employee information including their first and last names, location, title and photo.

TileView_InitialGridLayout

#Switching to the Tile View Format

Display the same data using the Windows 10 style tiles. Use the GridControl’s Level Designer to change the View to Tile View.

TileView_SwitchingToTileViewFormat

If you launch the application right away, you will see empty tiles. A tile for each data row has been generated automatically, but no field values are displayed in them.

TileView_EmptyTileView

#Changing Tile Size

Return to design time and before adding data to tiles, change their size using the TileViewItemOptions.ItemSize property.

TileView_ItemSizeProperty

#Customizing Tile Template

Run the grid control’s Designer and switch to the Tile Template page. The list on the left hand side displays all the columns that you had in the GridView before conversion.

In the next tutorial, you will continue working on this template by adding more fields and customizing appearance settings.

See Also