wpf-devexpress-dot-xpf-dot-layoutcontrol-6cd8e42c.md
The Tile Layout Control.
Namespace : DevExpress.Xpf.LayoutControl
Assembly : DevExpress.Xpf.LayoutControl.v25.2.dll
NuGet Package : DevExpress.Wpf.LayoutControl
[DXLicenseWpf]
public class TileLayoutControl :
FlowLayoutControl,
ITileLayoutControl,
IFlowLayoutControl,
ILayoutControlBase,
IScrollControl,
IPanel,
IControl,
ILayoutModelBase,
IFlowLayoutModel,
ITileLayoutModel
<DXLicenseWpf>
Public Class TileLayoutControl
Inherits FlowLayoutControl
Implements ITileLayoutControl,
IFlowLayoutControl,
ILayoutControlBase,
IScrollControl,
IPanel,
IControl,
ILayoutModelBase,
IFlowLayoutModel,
ITileLayoutModel
The Tile Layout Control allows you to bring a radical new look to your WPF applications with the Windows UI design principles. A neatly tile-based interface, with built-in animation, touch and drag-and-drop support, it delivers an outstanding end-user experience.
Note
Controls dynamically added to a TileLayoutControl should be registered via the RegisterName method to save/restore their layout correctly.
See Tile Layout Control to learn more.
This example shows how to create a Tile Layout Control. The animation below shows the result:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace WpfApplication2 {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
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" }
};
}
}
<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>
Show 12 items
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Panel DevExpress.Xpf.Core.PanelBase ScrollControl LayoutControlBase FlowLayoutControl TileLayoutControl
See Also