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.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#
VB.NET

public class Tile :
    TileBase

Public Class Tile
    Inherits TileBase

Remarks

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.

Tile

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.

Tile_Selected

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

XAML

xmlns:Layout="using:DevExpress.UI.Xaml.Layout"

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

Example

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

XAML

<Page
    x:Class="TilesEx.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TilesEx"
    xmlns:Layout="using:DevExpress.UI.Xaml.Layout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:ViewModel />
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Layout:LayoutControl Orientation="Vertical" Grid.Row="1">
            <Layout:LayoutControl.Resources>
                <Style TargetType="Layout:LayoutItem">
                    <Setter Property="HeaderPosition" Value="Top" />
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                </Style>
            </Layout:LayoutControl.Resources>
            <Layout:LayoutItem Header="Tile BackContent">
                <Layout:Tile Header="Beverages" AllowCheck="True" Checked="True" Background="Orchid" CheckMode="Tap" >
                    <Layout:Tile.BackContentTemplate>
                        <DataTemplate>
                            <Image Source="Assets/Beverages.jpg" Stretch="Fill" />
                        </DataTemplate>
                    </Layout:Tile.BackContentTemplate>
                    <StackPanel>
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="FontSize" Value="24"/>
                                <Setter Property="HorizontalAlignment" Value="Center"/>
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock Text="Soft Drinks:"/>
                        <Layout:SlideDecorator ContentChangeInterval="0:0:3">
                            <x:String>Coffee</x:String>
                            <x:String>Ice Tea</x:String>
                            <x:String>Juice</x:String>
                        </Layout:SlideDecorator>
                    </StackPanel>
                </Layout:Tile>
            </Layout:LayoutItem>
            <Layout:LayoutItem Header="Slide Decorator">
                <Layout:Tile Header="Beverages" Background="Orchid" CheckMode="Tap">
                    <StackPanel>
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="FontSize" Value="24"/>
                                <Setter Property="HorizontalAlignment" Value="Center"/>
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock Text="Soft Drinks:"/>
                        <Layout:SlideDecorator ContentChangeInterval="0:0:3">
                            <x:String>Coffee</x:String>
                            <x:String>Ice Tea</x:String>
                            <x:String>Juice</x:String>
                        </Layout:SlideDecorator>
                    </StackPanel>
                </Layout:Tile>
            </Layout:LayoutItem>
            <Layout:LayoutItem Header="Swing Decorator">
                <Layout:Tile Header="Zillow" Background="#FF7CA7D1" Size="Wide" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                    <Layout:SwingDecorator>
                        <Layout:SwingDecorator.ContentTemplate>
                            <DataTemplate>
                                <Image Margin="12" Source="Assets/ZillowLogo.png" Stretch="None"/>
                            </DataTemplate>
                        </Layout:SwingDecorator.ContentTemplate>
                        <Layout:SwingDecorator.TopContentTemplate>
                            <DataTemplate>
                                <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
                            Your <Bold>Edge</Bold> in <Bold>Real Estate</Bold>
                                </TextBlock>
                            </DataTemplate>
                        </Layout:SwingDecorator.TopContentTemplate>
                    </Layout:SwingDecorator>
                </Layout:Tile>
            </Layout:LayoutItem>
            <Layout:LayoutItem Header="Mosaic Decorator">
                <Layout:Tile Header="Employees" Size="Large" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                    <Layout:MosaicDecorator ContentSource="{Binding Employees}" ImageColumnCount="3" ImageRowCount="3">
                        <Layout:MosaicDecorator.ContentTemplate>
                            <DataTemplate>
                                <Image Source="{Binding ImageSource}" Stretch="Fill"/>
                            </DataTemplate>
                        </Layout:MosaicDecorator.ContentTemplate>
                    </Layout:MosaicDecorator>
                </Layout:Tile>
            </Layout:LayoutItem>
        </Layout:LayoutControl>
    </Grid>
</Page>

C#
VB.NET

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() {
            this.InitializeComponent();

        }
    }

    [XmlRoot("Employees")]
    public class Employees : List<Employee> {
    }
    [XmlRoot("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;
        [XmlIgnore]
        public BitmapImage ImageSource
        {
            get
            {
                if (imageSource == null && ImageData != null) {
                    SetImageSource();
                }
                return imageSource;
            }
        }
        async void SetImageSource() {
            InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
            await stream.WriteAsync(ImageData.AsBuffer());
            stream.Seek(0);

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

        #region INotifyPropertyChanged Members
        PropertyChangedEventHandler propertyChanged;

        event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged
        {
            add { propertyChanged += value; }
            remove { propertyChanged -= value; }
        }
        #endregion
    }
    public class ViewModel : DevExpress.Mvvm.BindableBase {
        public Employees Employees { get { return DataStorage.Employees; } }
    }
    public static class DataStorage {
        static Employees employees;
        public static Employees Employees
        {
            get
            {
                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;
            }
        }
    }
}

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

Imports System.Xml.Serialization
Imports Windows.Storage
Imports Windows.Storage.Streams
''' <summary>
''' An empty page that can be used on its own or navigated to within a Frame.
''' </summary>
Public NotInheritable Class MainPage
    Inherits Page

End Class

<XmlRoot("Employees")>
Public Class Employees
    Inherits List(Of Employee)

End Class
<XmlRoot("Employee")>
Public Class Employee
    Implements INotifyPropertyChanged

    Public Property Id() As Integer
    Public Property ParentId() As Integer
    Public Property FirstName() As String
    Public Property LastName() As String
    Public Property JobTitle() As String
    Public Property Phone() As String
    Public Property EmailAddress() As String
    Public Property AddressLine1() As String
    Public Property City() As String
    Public Property PostalCode() As String
    Public Property CountryRegionName() As String
    Public Property GroupName() As String
    Public Property BirthDate() As Date
    Public Property HireDate() As Date
    Public Property Gender() As String
    Public Property MaritalStatus() As String
    Public Property Title() As String
    Public Property ImageData() As Byte()

    Private imageSource_Renamed As BitmapImage
    <XmlIgnore>
    Public ReadOnly Property ImageSource() As BitmapImage
        Get
            If imageSource_Renamed Is Nothing AndAlso ImageData IsNot Nothing Then
                SetImageSource()
            End If
            Return imageSource_Renamed
        End Get
    End Property
    Private Async Sub SetImageSource()
        Dim stream As New InMemoryRandomAccessStream()
        Await stream.WriteAsync(ImageData.AsBuffer())
        stream.Seek(0)

        imageSource_Renamed = New BitmapImage()
        imageSource_Renamed.SetSource(stream)
        If propertyChanged1 IsNot Nothing Then
            propertyChanged1(Me, New PropertyChangedEventArgs("ImageSource"))
        End If
    End Sub

#Region "INotifyPropertyChanged Members"
    Private propertyChanged1 As PropertyChangedEventHandler

    Private Custom Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        AddHandler(ByVal value As PropertyChangedEventHandler)
            propertyChanged1 = DirectCast(System.Delegate.Combine(propertyChanged1, value), PropertyChangedEventHandler)
        End AddHandler
        RemoveHandler(ByVal value As PropertyChangedEventHandler)
            propertyChanged1 = DirectCast(System.Delegate.Remove(propertyChanged1, value), PropertyChangedEventHandler)
        End RemoveHandler
        RaiseEvent(ByVal sender As System.Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs)
            If propertyChanged1 IsNot Nothing Then
                For Each d As PropertyChangedEventHandler In propertyChanged1.GetInvocationList()
                    d.Invoke(sender, e)
                Next d
            End If
        End RaiseEvent
    End Event
#End Region
End Class
Public Class ViewModel
    Inherits DevExpress.Mvvm.BindableBase

    Public ReadOnly Property Employees() As Employees
        Get
            Return DataStorage.Employees
        End Get
    End Property
End Class
Public NotInheritable Class DataStorage

    Private Sub New()
    End Sub


    Private Shared employees_Renamed As Employees
    Public Shared ReadOnly Property Employees() As Employees
        Get
            If employees_Renamed IsNot Nothing Then
                Return employees_Renamed
            End If
            Try
                Dim file As StorageFile = StorageFile.GetFileFromApplicationUriAsync(New Uri("ms-appx:///Data/Employees.xml")).AsTask().Result
                Dim stream As Stream = file.OpenStreamForReadAsync().Result
                Dim serializier As New XmlSerializer(GetType(Employees))
                employees_Renamed = TryCast(serializier.Deserialize(stream), Employees)
            Catch
                employees_Renamed = New Employees()
                employees_Renamed.Add(New Employee() With {.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."})
            End Try
            Return employees_Renamed
        End Get
    End Property
End Class