[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
  [Collapse]Data Grid
   [Collapse]Get Started With Data Grid and Views
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Collapse]Tile View
       Tutorial: Tile View - Basics
       Tutorial: Tile View - Element Layout and Appearance
       Tutorial: Tile View - Service Columns and Dynamic Tile Customization
     [Expand]Filter and Search
     [Expand]Split Presentation
     [Expand]Row Preview Sections
   [Expand]Data Binding
    Unbound Columns
   [Expand]Data Editing and Validation
   [Expand]Filter and Search
   [Expand]Focus and Selection Handling
    Format Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
   [Expand]Batch Modifications
    Hit Information
    Popup Menus
   [Expand]Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [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
  [Expand]Navigation Controls
  [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)

Tutorial: Tile View - Element Layout and Appearance

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.

Expanded Starting Point

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

Expanded Task

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

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

  • Adding a Bound Tile Element

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

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

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

  • Adding Other Tile Elements

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

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

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

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

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

Expanded See Also

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