How to: Create a Tile Layout Control

• Jun 07, 2019
• 3 minutes to read

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

View Example

MainWindow.xaml

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="502" Width="625"
        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>
        <dxlc:TileLayoutControl Background="{x:Null}" Name="tileLayoutControl1">
            <dxlc:Tile Header="System Information" Name="tile1">
                <Image Name="image1" Stretch="None" Source="Images/System.png" />
            </dxlc:Tile>
            <dxlc:Tile Header="Research" Name="tile2" Size="Small" Background="#FFC14AAF">
                <Image Name="image2" Stretch="None" Source="Images/Research.png" />
            </dxlc:Tile>
            <dxlc:Tile Header="Statistics" Name="tile3" Size="Small" Background="#FF5CA332">
                <Image Name="image3" Stretch="None" Source="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="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>
</Window>

MainWindow.xaml.cs

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

namespace WpfApplication2 {

    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        public List<Agent> Agents { get { return WpfApplication2.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(Photo, UriKind.Relative));
            }
        }
    }

    public static class Agents {
        public static readonly List<Agent> DataSource =
            new List<Agent> {
                new Agent { AgentName = "Anthony Peterson", Phone = "[phone]", Photo = "Images/1.jpg" },
                new Agent { AgentName = "Rachel Scott", Phone = "[phone]", Photo = "Images/2.jpg" },
                new Agent { AgentName = "Albert Walker", Phone = "[phone]", Photo = "Images/3.jpg" }
            };
    }
}

MainWindow.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Windows
Imports System.Windows.Media
Imports System.Windows.Media.Imaging

Namespace WpfApplication2

    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Public ReadOnly Property Agents() As List(Of Agent)
            Get
                Return WpfApplication2.Agents.DataSource
            End Get
        End Property
    End Class

    Public Class Agent
        Public Property AgentName() As String
        Public Property Phone() As String
        Public Property Photo() As String
        Public ReadOnly Property PhotoSource() As ImageSource
            Get
                Return If(String.IsNullOrEmpty(Photo), Nothing, New BitmapImage(New Uri(Photo, UriKind.Relative)))
            End Get
        End Property
    End Class

    Public NotInheritable Class Agents

        Private Sub New()
        End Sub

        Public Shared ReadOnly DataSource As New List(Of Agent)() From { _
            New Agent With {.AgentName = "Anthony Peterson", .Phone = "[phone]", .Photo = "Images/1.jpg"}, _
            New Agent With {.AgentName = "Rachel Scott", .Phone = "[phone]", .Photo = "Images/2.jpg"}, _
            New Agent With {.AgentName = "Albert Walker", .Phone = "[phone]", .Photo = "Images/3.jpg"} _
        }
    End Class
End Namespace