Tile Class

A tile in a TileLayoutControl.

Namespace: DevExpress.Xpf.LayoutControl

Assembly: DevExpress.Xpf.LayoutControl.v20.1.dll

Declaration

public class Tile :
    MaximizableHeaderedContentControlBase,
    ITile,
    IMaximizableElement,
    IClickable,
    IWeakEventListener
Public Class Tile
    Inherits MaximizableHeaderedContentControlBase
    Implements ITile,
               IMaximizableElement,
               IClickable,
               IWeakEventListener

Related API Members

The following members accept/return Tile objects:

Remarks

Tiles are interactive items in a TileLayoutControl. They can display any content and 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.

tile-size

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 via 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 (e.g., the large tile shown in the top image).

  • Border

    The border's 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 provides the TileLayoutControl.TileClick event, allowing you to perform required tile actions in one place.

Examples

This example shows how to define varying content using the Tile.ContentSource property. The content change interval is set to 1 second. The Tile.AnimateContentChange option is enabled to play an animation each time the tile's content changes.

The animation below shows the result:

tile-animatecontentchange

<dxlc:TileLayoutControl Background="White" Name="tileLayoutControl1">
            <dxlc:Tile Name="tile1" Size="Small" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                       AnimateContentChange="True" ContentChangeInterval="00:00:01">
                <dxlc:Tile.ContentSource>
                    <dx:FrameworkElements>
                        <Image Source="Images/Research.png" Stretch="None" />
                        <Image Source="Images/System.png" Stretch="None" />
                        <Image Source="Images/Statistics.png" Stretch="None" />
                    </dx:FrameworkElements>
                </dxlc:Tile.ContentSource>
            </dxlc:Tile>
        </dxlc:TileLayoutControl>

Inheritance

Object
DispatcherObject
DependencyObject
Visual
UIElement
FrameworkElement
Control
DevExpress.Xpf.Core.ControlBase
DevExpress.Xpf.Core.ContentControlBase
DevExpress.Xpf.Core.HeaderedContentControlBase
DevExpress.Xpf.LayoutControl.MaximizableHeaderedContentControlBase
Tile
See Also