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:
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:
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.).
“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 “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 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.
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)
Michael Crump is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile. You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.