TileLayoutControl Class

The Tile Layout Control.

Namespace: DevExpress.Xpf.LayoutControl

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

NuGet Package: DevExpress.Wpf.LayoutControl

Declaration

C#

public class TileLayoutControl :
    FlowLayoutControl,
    ITileLayoutControl,
    IFlowLayoutControl,
    ILayoutControlBase,
    IScrollControl,
    IPanel,
    IControl,
    ILayoutModelBase,
    IFlowLayoutModel,
    ITileLayoutModel

VB.NET

Public Class TileLayoutControl
    Inherits FlowLayoutControl
    Implements ITileLayoutControl,
               IFlowLayoutControl,
               ILayoutControlBase,
               IScrollControl,
               IPanel,
               IControl,
               ILayoutModelBase,
               IFlowLayoutModel,
               ITileLayoutModel

Remarks

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.

Example

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

C#

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 = "[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" }
            };
    }
}

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>

Inheritance

Show 12 items

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Panel

DevExpress.Xpf.Core.PanelBase

ScrollControl

LayoutControlBase

FlowLayoutControl

TileLayoutControl