Tile Class

In This Article

Declaration

The tile in a TileLayoutControl.

Namespace: DevExpress.Xpf.LayoutControl

Assembly: DevExpress.Xpf.LayoutControl.v14.2.dll

#Declaration

C#
VB.NET

[TemplatePart(Name = "ContentChangeStoryboard", Type = typeof(Storyboard))]
[DXToolboxBrowsable]
public class Tile :
    MaximizableHeaderedContentControlBase,
    ITile,
    IMaximizableElement,
    IClickable

<TemplatePart(Name:="ContentChangeStoryboard", Type:=GetType(Storyboard))>
<DXToolboxBrowsable>
Public Class Tile
    Inherits MaximizableHeaderedContentControlBase
    Implements ITile,
               IMaximizableElement,
               IClickable

#Returned By

The TileClickEventArgs.Tile property returns an instance of Tile.

#Remarks

The TileLayoutControl can display small (by default, 150x150 pixels) or large (by default, 310x150 pixels) tiles. A tile's size (small or large) is specified by the Tile.Size property. Tiles can be maximized by setting the Tile.IsMaximized property to true (e.g. System Information tile in the image below).

Tile-size tile-ismiximized

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 the 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 at 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

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="436" d:DesignWidth="626"
             xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
             xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">

    <Grid x:Name="LayoutRoot" Background="White">
        <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="/SilverlightApplication1;component/Images/Research.png" Stretch="None" />
                        <Image Source="/SilverlightApplication1;component/Images/System.png" Stretch="None" />
                        <Image Source="/SilverlightApplication1;component/Images/Statistics.png" Stretch="None" />
                    </dx:FrameworkElements>
                </dxlc:Tile.ContentSource>
            </dxlc:Tile>
        </dxlc:TileLayoutControl>
    </Grid>
</UserControl>