Build an Interactive Home Screen Experience with Telerik HubTile for WP8

Introduction

Look at your app’s home screen. Does it consist of only a couple of navigation buttons thrown on the screen? If you want to delight your users from the moment they launch your app, you need to give it the look and feel of the Windows Phone home screen. Thankfully, we have RadHubTile to assist us with this. RadHubTile comes with a set of different tile types that helps developers easily implement the Windows Phone home screen experience in their apps. They consist of many different types as described below:

• RadHubTile is the most commonly used tile that displays a title, icon, notification count and an optional message. This is very similar to the Mail tile.
• RadMosaicHubTile mimics the people hub tile in WP OS. It consists of a grid of smaller tiles that flip individually showing an image.
• RadSlideHubTile is the tile you are looking for if you want to show a picture and some info related to the picture.
• RadPictureRotatorHubTile is used to randomly iterate over a collection of images. Similar to the Pictures hub tile in the WP OS.
• RadCustomHubTile is a blank tile, initially, and allows users to put any content on the front and back sides via DataTemplates.
• RadCycleHubTile is data-bound control. Once bound to a data source, it displays data items one at a time with a slide transition between the different items.

Creating a Real-World Sample App

I’m going to assume your development environment is setup and RadControls for Windows Phone 8 or 7.x is installed. If you don’t have them yet they can be downloaded from your account. When going through the initial project configuration wizard, you can leave the default references checked as RadHubTile is dependent upon Telerik.Windows.Controls.Primitives which is automatically selected.

We are going to create a “Home Screen” that contains the following information that you would find in a real-world Windows Phone app. In this instance, it is an airlines app:

• Find My Trip – Allows the user to search for upcoming flights.
• Check Flight Status – Allows the user to see if their flight is on-time, cancelled, etc.
• See Flight Schedules – See all the flights scheduled from an airport.
• Track My Bags – Allows the user to track the status of their bags.

The “Find My Trip” Tile

For the “Find my trip” Tile, we want to use the standard RadHubTile with a wide template as it will be commonly used. We could easily provide a title, image and the number of trips found with the following code snippet:

<telerikPrimitives:RadHubTile x:Name="rhtFindMyTrip" Width="420" Height="200" 

Title="find my trip" ImageSource="Images/Search.png" Count="4">

</telerikPrimitives:RadHubTile>

This would give us a wide tile that looks like the image shown in Figure 1.

Figure 1: RadHubTile displaying a static image, title and count.

Of course in a real-world scenario, you may want the title, count and even the image to dynamically update. You may use this with the following code that could also be running inside a background agent.

rhtFindMyTrip.Title = "find my trip";

rhtFindMyTrip.Count = 4;

rhtFindMyTrip.ImageSource = new BitmapImage(new Uri("Images/Search.png", UriKind.Relative));            

Additionally, RadHubTile exposes a Tap method that you may perform actions on (such as navigating to a different page, etc.). 

The “Check Flight Status” Tile

“Check Flight Status” needs a dynamic tile that has front and a back content. The front would show the title and when it flips over, it will say if your next flight is on-time, cancelled, delayed, etc. As an example of a tile that we had complete control over, we may use the RadCustomHubTile for this case. We could easily implement this with the following code snippet:

<telerikPrimitives:RadCustomHubTile Width="200" Height="200"

 Title="flight status?" 

 BackContent="On-Time"

 x:Name="customTile"

 Margin="34,205,246,202">

 <telerikPrimitives:RadCustomHubTile.FrontContentTemplate>

 <DataTemplate>

 <Grid>

 <Rectangle Fill="BlueViolet"/>

 </Grid>

 </DataTemplate>

 </telerikPrimitives:RadCustomHubTile.FrontContentTemplate>

<telerikPrimitives:RadCustomHubTile.BackContentTemplate>

 <DataTemplate>

 <Grid>

 <Rectangle Fill="BlueViolet"/>

 <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="12,8" Text="{Binding}" />

 </Grid>

 </DataTemplate>

 </telerikPrimitives:RadCustomHubTile.BackContentTemplate>

 </telerikPrimitives:RadCustomHubTile>

The only thing different that you will see in this sample, is that we are using the RadCustomHubTile to give us complete control of the tile and setting the FrontContentTemplate and BackContentTemplate to a DataTemplate that fills content with a colored rectangle. Of course, you could implement this any way you wish, but this is one way to achieve a custom tile with little effort. A sample of the Front and Back Content is shown in Figure 2 and 3 below.

Figure 2: Front Content

Figure 3: Back Content

The “See Flight Schedules” Tile

The “Check Flight Status” could benefit from using the RadSlideHubTile. This type of tile will display a title, then animate into an image and finally show half the image and the title. It can be accomplished with just a few lines of code:

<telerikPrimitives:RadSlideHubTile Width="200" Height="200" Title="flight schedules"

 Margin="239,205,41,202">

<telerikPrimitives:RadSlideHubTile.Picture>

 <Image Source="Images/Schedule.png"/>

 </telerikPrimitives:RadSlideHubTile.Picture>

/telerikPrimitives:RadSlideHubTile>

A sample of the various states can be found in Figure 4:

Figure 4: RadSlideHubTile transitioning from the various states.

The “Track My Bags” Tile

The “Track My Bags” Tile could display the number of bags you checked as well as animate the tile with several different bag types. The RadMosiacHubTile can handle up to 9 images, but we will add only two for this example.

<telerikPrimitives:RadMosaicHubTile Title="No: of Bags: 5" Width="200" Height="200" Margin="34,410,246,-3" >

 <system:String>Images\Bag1.png</system:String>

 <system:String>Images\Bag2.png</system:String> 

</telerikPrimitives:RadMosaicHubTile>

After declaring the RadMosiacHubTile, and giving it a title, we are going to use the System class and provide it 2 images. A sample of the tile can be found in Figure 5:

Figure 5: RadMosiacHubTile with a title set as well as two images.

Seeing it all in Action

Wrap-Up

We looked at 4 unique ways that you can use RadHubTile to give your users an experience similar to the Windows Phone home screen. This example, is just one of many different ways that you may use as a starting point. As a reminder, we also have design templates that will help you accomplish this even faster and can be found by reading this blog post. As always, the source code for this project can be found here. If you have any questions or comments, then please leave them below.

-Michael Crump (@mbcrump)