In this post we will take a look on working with RadHubTile in XAML based Windows Store Application. RadHubTile gives you same immersive experience as you see on the home screen of Windows 8. You can display message, notification, title and message on flipping of tile using RadHubTiles. RadHubTile gives you experience like below image.

To start working with RadHubTile let us start with Creating Application for Windows Store. To create this choose Blank App from Windows Store project tab. After creating project you need to add reference Of Rad Control for Windows 8 in the project. To do that right click on the reference and select Add Reference. From the Reference Manager Dialog box select Rad Control for Windows8.

After adding reference in the project, you need to add namespace on the XAML page. You can do that as following,

You can create a HubTile on XAML as following ,

Since you have not set any propery of RadHubTile like Message , Title etc , so as output you will get a simple rectangular tile as below,

Some of the important properties of RadHubTiles are as following ,

Now let us go ahead and set properties of RadHubTiles ,

 <telerik:RadHubTile Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"
 Notification="100/0"
 BackContent="Score of India England first Test"
 >

 </telerik:RadHubTile>

Above we have set several properties of RadHubTiles . Now let us go ahead and run the application to see the output

Now let is go ahead and create template for BackContent. We crate template to show information in back of the RadHubTile as we want. Let us say , we want to display Image and Title in the back of the RadHubTile. We can do that by creating a DataTemplate and then setting that as value of BackContentTemplate. We can do that as following ,

You see that in above code we have created DataTemplate . There is StackPanel and one Image control along with TextBlock have put vertically in the StackPanel. When you run the application , you will get RadHubTile back content as following ,

For your reference full code with BackContent Template is given below,

 <telerik:RadHubTile Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"
 Notification="100/0"
 BackContent="Score of India England first Test"
 Margin="93,209,0,388">
 <telerik:RadHubTile.BackContentTemplate>
 <DataTemplate>
 <StackPanel Orientation="Vertical">
 <TextBlock Text="India England Test Series" />
 <Image Source="/Assets/indengmatchlogo.JPG" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.BackContentTemplate>

</telerik:RadHubTile>

As we set BackContentTemplate , we can set

• NotificationTemplate
• MessageTemplate

As well. Let us go ahead and create the NotificationTemplate. We will bind controls in NotificationTemplate with the data coming from the background. Let us say there is function returning Data. In this case I am hard coding the data value, however in real time scenario you will like to fetch data from a remote service.

 Data GetRun()
 {
 // Put code here to fetch data from remote service
 return new Data ()
 {
 Runs = 200,
 Country = "India"
 };

 }

Data class is defined as following,

namespace HubTilesXaml
{
 public class Data
 {
 public int Runs { get; set; }
 public string Country { get; set; }
 }
}

We need to set DataContext of RadHubTile as given below,

protected override void OnNavigatedTo(NavigationEventArgs e)
 {

rdRunsHubTiles.DataContext = GetRun();

}

Now let us go ahead and create NotificationTemplate . NotficationTemplate can be created as following.

We are creating a DataTemplate and setting it as value of NotificationTemplate property of RadHubTile. For your reference full code with BackContentTemplate and NotficationTemplate for RadHubTile is given below,

<telerik:RadHubTile x:Name="rdRunsHubTiles"
 Title="Score"
 Message="India/Eng Score"
 ImageSource="/Assets/indengmatchlogo.JPG"

 BackContent="Score of India England first Test"
 DataContext=""
 Margin="93,209,0,388">
 <telerik:RadHubTile.BackContentTemplate>
 <DataTemplate>
 <StackPanel Orientation="Vertical">
 <TextBlock Text="India England Test Series" />
 <Image Source="/Assets/indengmatchlogo.JPG" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.BackContentTemplate>
 <telerik:RadHubTile.NotificationTemplate>
 <DataTemplate>
 <StackPanel Orientation="Horizontal" >
 <TextBlock Text="{Binding Runs}" />
 <TextBlock Text="{Binding Country}" />
 </StackPanel>
 </DataTemplate>
 </telerik:RadHubTile.NotificationTemplate>

</telerik:RadHubTile>

At this point if you run the application you should get a RadHubTile with BackContentTemplate , NotficationTemplate , Message and Image.

We can get all the information from RadHubTile in code behind and can use them. For example let us say when user is tapping on the RadHubTile , we want to display the NotificationCount. We can do that as following,

void rdRunsHubTiles_Tapped(object sender, TappedRoutedEventArgs e)
 {

var runset = (sender as RadHubTile).Notification;
 }

In this way we can work with RadHubTile in Application for Windows Store. I hope you find this post useful. Thanks for reading.