wpf-10996-controls-and-libraries-layout-management-tile-and-layout-examples-how-to-create-a-tile-layout-control.md
This example shows how to create a Tile Layout Control. The animation below shows the result:
<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>
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 = "(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" }
};
}
}
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 = "(555) 444-0782", .Photo = "Images/1.jpg"}, _
New Agent With {.AgentName = "Rachel Scott", .Phone = "(555) 249-1614", .Photo = "Images/2.jpg"}, _
New Agent With {.AgentName = "Albert Walker", .Phone = "(555) 232-2303", .Photo = "Images/3.jpg"} _
}
End Class
End Namespace