Rotator Tile Control In UWP With XAML And C#

Before reading this article, please go through the articles, given below-

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
  2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

The Rotator Tile Control is an Item Control which rotates through a set of items, one-by-one. It enables you to show multiple items of data in a live-tile like way.

Reading this article, you can learn how to use UWP Tool Kit Control - Rotator Tile Control in Universal Windows apps development with XAML and Visual C#.

The important tools required to develop UWP are-

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1- Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPRotatorTile)->OK.

UWPRotatorTile

Step 2 - Choose the target and minimum platform version for your Windows app. Afterwards, the project creates App.xaml and MainPage.xaml.

UWPRotatorTile

To add UWPToolKit Control, please refer the link, given below-

Step 3 - Add TextBlock control and change the name and text property for title, as given below-

UWPRotatorTile

Step 4 - Add images in the Assets folder, images for Rotator Tile Control, as given below-

UWPRotatorTile

Step 5 - Add the Xaml code, given below to create the data template for UWP RotatorTile Control.
  1. <Page.Resources>  
  2.     <DataTemplate x:Key="photos">  
  3.         <Grid Background="White">  
  4.             <Image Source="{Binding IName}" Width="250" Height="150" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill" />  
  5.         </Grid>  
  6.     </DataTemplate>  
  7. </Page.Resources>  

<Page.Resources /> <datatemplate x:key= ">

Step 6 - Add UWP Tool Kit Name Space in Mainpage.xaml.

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add RotatorTile Control from Tool Kit and set the Name, ItemTemplate properties. 


<Page.Resources /> <datatemplate x:key= ">

Note- Automatically, the code, given below, will be generated in XAML code view, while we are done in the design view. 
  1. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPRotatorTile" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPRotatorTile.MainPage" mc:Ignorable="d">  
  2.     <Page.Resources>  
  3.         <DataTemplate x:Key="photos">  
  4.             <Grid Background="White">  
  5.                 <Image Source="{Binding IName}" Width="250" Height="150" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="UniformToFill" />  
  6.             </Grid>  
  7.         </DataTemplate>  
  8.     </Page.Resources>  
  9.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  10.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="202,57,0,0" TextWrapping="Wrap" Text="Rotator Tile Control Test" VerticalAlignment="Top" Height="29" Width="239" FontWeight="Bold" FontSize="20" />  
  11.         <Controls:RotatorTile x:Name="ROTtest" HorizontalAlignment="Left" Margin="186,139,0,0" VerticalAlignment="Top" Width="250" Height="150" ItemTemplate="{StaticResource photos}" />  
  12.     </Grid>  
  13. </Page>  
Step 7- Add namespace and the code, given below, in MainPage.xaml.cs,
  1. using System.Collections.ObjectModel;  
  2. public class MenuItem {  
  3.     public string IName {  
  4.         get;  
  5.         set;  
  6.     }  
  7. }  
  8. public sealed partial class MainPage: Page {  
  9.     public MainPage() {  
  10.         this.InitializeComponent();  
  11.         ObservableCollection < MenuItem > items = new ObservableCollection < MenuItem > ();  
  12.         items.Add(new MenuItem() {  
  13.             IName = "ms-appx:///Assets//01.jpg"  
  14.         });  
  15.         items.Add(new MenuItem() {  
  16.             IName = "ms-appx:///Assets//02.jpg"  
  17.         });  
  18.         items.Add(new MenuItem() {  
  19.             IName = "ms-appx:///Assets//03.jpg"  
  20.         });  
  21.         items.Add(new MenuItem() {  
  22.             IName = "ms-appx:///Assets//04.jpg"  
  23.         });  
  24.         items.Add(new MenuItem() {  
  25.             IName = "ms-appx:///Assets//05.jpg"  
  26.         });  
  27.         items.Add(new MenuItem() {  
  28.             IName = "ms-appx:///Assets//06.jpg"  
  29.         });  
  30.         ROTtest.ItemsSource = items;  
  31.     }  
  32. }  
UWPRotatorTile

Step 8- Deploy your app in Local Machine and the output of UWPRotatorTile app is-

First Tile Item Display in RotatorTile

UWPRotatorTile

Other Item in RotatorTile after the rotation

UWPRotatorTile

Summary - Now, you have successfully tested UWP Tool Kit – RotatorTile Control in Visual C# - UWP environment.