Tile Class

Represent a simple tile that can display a notification header, can be checked and selected.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v19.2.dll


public class Tile :
Public Class Tile
    Inherits TileBase


The Tile control represents a tile that, in addition to the header (see veHeaderedContentControl.Header), can display the notification header, check mark and selection frame. To specify the notification header, use the TileBase.NotificationHeader property. The notification header can be aligned relative to the tile using the TileBase.HorizontalNotificationHeaderAlignment and TileBase.VerticalNotificationHeaderAlignment properties.

The TileBase.NotificationHeaderStyle, TileBase.NotificationHeaderTemplate and TileBase.NotificationHeaderTemplateSelector properties provides the notification header styling and templating functionality.

The figure below shows a sample Tile control that displays a content, header and notification header.


If the TileBase.AllowCheck property is set to True, the tile can be checked when right tapped/clicked (or tapped/clicked). The TileBase.CheckMode property specifies the touch gesture used to change the tile check state. To respond to changing the check state, handle the TileBase.CheckedChanged event. The following figure shows the same tile displayed in the unchecked and checked states.

Tile_Unchecked Tile_Checked

If the TileBase.AllowSelection property is set to True, the tile displays the selection frame when the TileBase.Selected property equals True. In this state, the tile is displayed enclosed with a frame, whose color and thickness can be specified by the TileBase.SelectionFrameBrush and TileBase.SelectionFrameThickness properties. See the sample below.


The following code snippet shows how to create a simple tile with the slide animation effect.


<Layout:Tile Header="Beverages" AllowCheck="True" Checked="True" Background="Orchid" CheckMode="Tap">
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
        <TextBlock Text="Soft Drinks:"/>
        <Layout:SlideDecorator Orientation="Horizontal">
            <TextBlock Text="Coffee"/>
            <TextBlock Text="Ice Tea"/>
            <TextBlock Text="Juice"/>


This example demonstrates how to create tiles with various animation effects: flip, swing, slide and mosaic.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Xml.Serialization;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace TilesEx {
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page {
        public MainPage() {


    public class Employees : List<Employee> {
    public class Employee : INotifyPropertyChanged {
        public int Id { get; set; }
        public int ParentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string JobTitle { get; set; }
        public string Phone { get; set; }
        public string EmailAddress { get; set; }
        public string AddressLine1 { get; set; }
        public string City { get; set; }
        public string PostalCode { get; set; }
        public string CountryRegionName { get; set; }
        public string GroupName { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Gender { get; set; }
        public string MaritalStatus { get; set; }
        public string Title { get; set; }
        public byte[] ImageData { get; set; }
        BitmapImage imageSource;
        public BitmapImage ImageSource
                if (imageSource == null && ImageData != null) {
                return imageSource;
        async void SetImageSource() {
            InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
            await stream.WriteAsync(ImageData.AsBuffer());

            imageSource = new BitmapImage();
            if (propertyChanged != null)
                propertyChanged(this, new PropertyChangedEventArgs("ImageSource"));

        #region INotifyPropertyChanged Members
        PropertyChangedEventHandler propertyChanged;

        event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged
            add { propertyChanged += value; }
            remove { propertyChanged -= value; }
    public class ViewModel : DevExpress.Mvvm.BindableBase {
        public Employees Employees { get { return DataStorage.Employees; } }
    public static class DataStorage {
        static Employees employees;
        public static Employees Employees
                if (employees != null)
                    return employees;
                try {
                    StorageFile file = StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Data/Employees.xml")).AsTask().Result;
                    Stream stream = file.OpenStreamForReadAsync().Result;
                    XmlSerializer serializier = new XmlSerializer(typeof(Employees));
                    employees = serializier.Deserialize(stream) as Employees;
                catch {
                    employees = new Employees();
                    employees.Add(new Employee() {
                        Id = 109,
                        FirstName = "Bruce",
                        LastName = "Cambell",
                        JobTitle = "Chief Executive Officer",
                        Phone = "(417) 166-3268",
                        EmailAddress = "Bruce_Cambell@example.com",
                        AddressLine1 = "4228 S National Ave",
                        City = "Tokyo",
                        PostalCode = "65809",
                        CountryRegionName = "Japan",
                        GroupName = "Executive General and Administration",
                        Gender = "M",
                        Title = "Mr."
                return employees;


See Also