Flipping Telerik RadCustomHubTile in Window Store Apps Using XAML

The new RadControls for Windows 8 offers a number of controls to make your application look and perform better. One of the key features is the new set of HubTiles.

You can download Telerik RadControl from here:

http://www.telerik.com/products/windows-metro/overview.aspx

Introduction

The HubTile Control lets users experience the dynamics of navigation or browsing through Windows 8 style tiles. It is a rectangular UI element designed specifically to update itself dynamically and show the latest up-to-date information from various services or apps even when they are not running. The Telerik Windows 8 HubTiles enable the organization of apps in a unique and native Windows 8 style.

In my previous article I showed you a simple RadHubTile that can be created in a Windows Store Application. You can find it here.

But this time I will show a new type of Telerik Tile that will flip from front to back. This is called RadCustomHubTile in which we must provide their front and back content.

Now, let's start to create a Windows Store Application to use the Telerik RadCustomHubTile.

Step 1

Create a new Blank application for Windows 8 Store App using XAML.

Step 2

To add a RadCustomHubTile in a XAML page, you have to add the following namespace declaration in the XAML page:

xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"

Step 3

Here is the code for putting the RadCustomHubTile in a Windows Store application:

<telerikPrimitives:RadCustomHubTile Width="300" Height="250" Background="Green">

Since a RadCustomHubTile will flip from front to back, therefore we need to create the Front and the Back of the tile.

Front of the Tile.

<telerikPrimitives:RadCustomHubTile.FrontContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="12" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="Comments" FontSize="20.667" Margin="4,10,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.FrontContent>

Back content of the Tile.

<telerikPrimitives:RadCustomHubTile.BackContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="12" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="12 New Comments" FontSize="14.667" Margin="4,-12,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.BackContent>

Complete code of my application.

<Page

x:Class="RedTelelrikControls.radcustomtile"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:RedTelelrikControls"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"

mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid VerticalAlignment="Top" Margin="20,50">

<StackPanel Orientation="Vertical">

<StackPanel Orientation="Horizontal" >

<telerikPrimitives:RadCustomHubTile Width="300" Height="250" Background="Green">

<telerikPrimitives:RadCustomHubTile.FrontContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="12" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="Comments" FontSize="20.667" Margin="4,10,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.FrontContent>

<telerikPrimitives:RadCustomHubTile.BackContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="12" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="12 New Comments" FontSize="14.667" Margin="4,-12,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.BackContent>

</telerikPrimitives:RadCustomHubTile>

<telerikPrimitives:RadCustomHubTile Width="300" Height="250" Background="RoyalBlue">

<telerikPrimitives:RadCustomHubTile.FrontContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="9" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="Request" FontSize="20.667" Margin="4,10,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.FrontContent>

<telerikPrimitives:RadCustomHubTile.BackContent>

<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">

<TextBlock Text="9" FontSize="82.667" FontWeight="SemiLight"/>

<TextBlock Text="You have 9 Requests" FontSize="14.667" Margin="4,-12,0,0"/>

</StackPanel>

</telerikPrimitives:RadCustomHubTile.BackContent>