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>
</telerikPrimitives:RadCustomHubTile>
</StackPanel>
<StackPanel Orientation="Horizontal">
<telerikPrimitives:RadCustomHubTile Width="300" Height="250">
<telerikPrimitives:RadCustomHubTile.FrontContent>
<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">
<TextBlock Text="8" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="Notification" 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="8" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="You have 8 New Notification" FontSize="14.667" Margin="4,-12,0,0"/>
</StackPanel>
</telerikPrimitives:RadCustomHubTile.BackContent>
</telerikPrimitives:RadCustomHubTile>
<telerikPrimitives:RadCustomHubTile Width="145" Height="250" Background="Orange">
<telerikPrimitives:RadCustomHubTile.FrontContent>
<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">
<TextBlock Text="3" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="SMS" 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="3" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="3 New SMS" FontSize="14.667" Margin="4,-12,0,0"/>
</StackPanel>
</telerikPrimitives:RadCustomHubTile.BackContent>
</telerikPrimitives:RadCustomHubTile>
<telerikPrimitives:RadCustomHubTile Width="145" Height="250" Background="BurlyWood">
<telerikPrimitives:RadCustomHubTile.FrontContent>
<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">
<TextBlock Text="5" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="Like" 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="5" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="5 New Likes" FontSize="14.667" Margin="4,-12,0,0"/>
</StackPanel>
</telerikPrimitives:RadCustomHubTile.BackContent>
</telerikPrimitives:RadCustomHubTile>
</StackPanel>
<StackPanel Orientation="Horizontal">
<telerikPrimitives:RadCustomHubTile Width="600" Height="250" Background="OrangeRed">
<telerikPrimitives:RadCustomHubTile.FrontContent>
<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">
<TextBlock Text="10" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="Calls" FontSize="14.667" Margin="4,-12,0,0"/>
</StackPanel>
</telerikPrimitives:RadCustomHubTile.FrontContent>
<telerikPrimitives:RadCustomHubTile.BackContent>
<StackPanel Margin="16,0,0,0" VerticalAlignment="Center">
<TextBlock Text="10" FontSize="82.667" FontWeight="SemiLight"/>
<TextBlock Text="You have 10 New Calls" FontSize="14.667" Margin="4,-12,0,0"/>
</StackPanel>
</telerikPrimitives:RadCustomHubTile.BackContent>
</telerikPrimitives:RadCustomHubTile>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Page>
Step 4
Now run the application; see the animated tile's contents flip front to back.
Front or default.
![telerik-radcustomhubtile-In-Windows-Store-Apps.jpg]()
Flipping of Tile front to back.
![Flip-telerik-tile-in-windows-store-apps.jpg]()
After flip to back.
![Telerik-RadHubTile-In-Windows-Store-Apps.jpg]()