[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Expand]Dock Windows
   [Collapse]Tile and Layout
    [Expand]Layout and Data Layout Controls
     Tile Layout Control
     Dock Layout Control
     Flow Layout Control
    [Expand]Common Features
    [Expand]Examples
   [Expand]Tab Control
   [Expand]Carousel
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tile Layout Control

The TileLayoutControl allows you to change the look of your WPF applications using Windows UI design principles. It provides a tile-based interface with support for built-in animation, touch and drag-and-drop, allowing you to deliver an outstanding end-user experience.

The Tile Control's primary building blocks are Tiles - informative boxes that are, due to their size, capable of presenting much more information than simple icons. Note that tiles are not just static boxes, but they also support animation. For each tile, you can provide multiple frames that will be displayed one after another, emulating an animation effect.

For any tile, you can provide a specific functionality that an end-user can invoke by clicking the tile. The Tile Layout Control fully supports touch screens, so an end-user can drag-and-drop, activate tiles, and scroll the Tile Control using his/her fingers in addition to the mouse.

Note

Controls added dynamically to a Tile Layout Control should be registered via the RegisterName method to save/restore their layout correctly.

Expanded Tiles

Tiles (Tile objects) can be of four predefined sizes:

  • Small - A medium square tile of 150x150 pixels.
  • Large - A wide tile of 310x150 pixels.
  • Extra Small - A small square tile of 70x70 pixels.
  • Extra Large - An extra large square tile of 310x310 pixels.

To set the size of a tile, use the Tile.Size property. Any single tile can automatically stretch to fit the Tile Layout Control's available space. Use the Tile.IsMaximized property to enable this feature.

A tile consists of the following elements.

  • Header

    The header is specified by the tile's Header property. Its location within the tile is specified by the Padding, Tile.HorizontalHeaderAlignment and Tile.VerticalHeaderAlignment properties. To hide the header, set the Header property to an empty string.

  • Content

    A tile's content is specified by the Content property. You can provide varying content that is changed automatically at a specified time interval using the Tile.ContentSource property. The content change interval is specified by the Tile.ContentChangeInterval property.

    You can also define a template that displays a tile's content using the ContentTemplate property.

  • Border

    The border thickness is specified by the BorderThickness property. Its appearance is specified by the BorderBrush property.

To associate an action with a tile, define a command using the Tile.Command property or handle the Tile.Click event. The TileLayoutControl also provides the TileLayoutControl.TileClick event, allowing you to perform the required tile actions in one place.

Expanded Tile Groups

Tiles are arranged down and then across the Tile Layout Control. You can combine tiles into groups via the FlowLayoutControl.IsFlowBreak attached property. A tile marked with this property will start a new group. You can also provide a header for a group by specifying the TileLayoutControl.GroupHeader attached property for the tile. The following image shows a Tile Layout Control with two tile groups (Home and Statistics):

Expanded Examples

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