TileLayoutControl Class

In This Article

Declaration

The Tile Layout Control.

Namespace: DevExpress.Xpf.LayoutControl

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

#Declaration

C#
VB.NET

[DXToolboxBrowsable]
[StyleTypedProperty(Property = "GroupHeaderStyle", StyleTargetType = typeof(TileGroupHeader))]
public class TileLayoutControl :
    FlowLayoutControl,
    ITileLayoutControl,
    IFlowLayoutControl,
    ILayoutControlBase,
    IScrollControl,
    IPanel,
    IControl,
    IFlowLayoutModel,
    ILayoutModelBase

<DXToolboxBrowsable>
<StyleTypedProperty(Property:="GroupHeaderStyle", StyleTargetType:=GetType(TileGroupHeader))>
Public Class TileLayoutControl
    Inherits FlowLayoutControl
    Implements ITileLayoutControl,
               IFlowLayoutControl,
               ILayoutControlBase,
               IScrollControl,
               IPanel,
               IControl,
               IFlowLayoutModel,
               ILayoutModelBase

#Remarks

The Tile Layout Control for Silverlight allows you to bring a radical new look to your Web applications powered by Silverlight with the Microsoft Metro design principles. A tile-based interface, with built-in animation, touch and drag-and-drop support, it delivers an outstanding end user experience.

TileLayoutControl-overview

#Examples

This example shows how to create a Tile Layout Control. The animation below shows the result:

tilelayoutcontrol-exampleresult

C#
XAML

using System;
using System.Collections.Generic;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace SilverlightApplication1 {

    public partial class MainPage : UserControl {
        public MainPage() {
            InitializeComponent();
        }

        public List<Agent> Agents { get { return SilverlightApplication1.Agents.DataSource; } }
    }

    public class Agent {
        public string AgentName { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public ImageSource PhotoSource {
            get {
                return string.IsNullOrEmpty(Photo) ? null : new BitmapImage(new Uri("/SilverlightApplication1;component" + Photo, UriKind.Relative));
            }
        }
    }

    public static class Agents {
        public static readonly List<Agent> DataSource =
            new List<Agent> {
                new Agent { AgentName = "Anthony Peterson", Phone = "(555) 444-0782", Photo = "/Images/1.jpg" },
                new Agent { AgentName = "Rachel Scott", Phone = "(555) 249-1614", Photo = "/Images/2.jpg" },
                new Agent { AgentName = "Albert Walker", Phone = "(555) 232-2303", Photo = "/Images/3.jpg" }
            };
    }
}

<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="603" d:DesignWidth="926"
             xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
             xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
             DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Grid x:Name="LayoutRoot" Background="White">
        <dxlc:TileLayoutControl Background="{x:Null}" Name="tileLayoutControl1">
            <dxlc:Tile Header="System Information" Name="tile1">
                <Image Name="image1" Stretch="None" Source="/SilverlightApplication1;component/Images/System.png" />
            </dxlc:Tile>
            <dxlc:Tile Header="Research" Name="tile2" Size="Small" Background="#FFC14AAF">
                <Image Name="image2" Stretch="None" Source="/SilverlightApplication1;component/Images/Research.png" />
            </dxlc:Tile>
            <dxlc:Tile Header="Statistics" Name="tile3" Size="Small" Background="#FF5CA332">
                <Image Name="image3" Stretch="None" Source="/SilverlightApplication1;component/Images/Statistics.png" />
            </dxlc:Tile>
            <dxlc:Tile Header="Rates" Name="tile4" Size="Large" dxlc:FlowLayoutControl.IsFlowBreak="True"
                       HorizontalHeaderAlignment="Center">
                <Image Name="image4" Stretch="None" Source="/SilverlightApplication1;component/Images/Rates.png" />
            </dxlc:Tile>
            <dxlc:Tile Name="tile5" Size="Large"
                       HorizontalHeaderAlignment="Center" Background="#FF666666"
                       ContentSource="{Binding Agents}" ContentChangeInterval="00:00:03" AnimateContentChange="True">
                <dxlc:Tile.ContentTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock Text="{Binding AgentName}" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
                            <Image Source="{Binding PhotoSource}" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Top" />
                        </Grid>
                    </DataTemplate>
                </dxlc:Tile.ContentTemplate>
            </dxlc:Tile>
        </dxlc:TileLayoutControl>
    </Grid>
</UserControl>