I’ve used a new control in my latest demo app, called HubTile which is a part of the latest Silverlight for Windows Phone toolkit (August – Mango release) In this post I will describe how to use HubTiles, including how to style them to be more appropriate for your own application.

HubTiles let you easily use tiles inside of your application. I’ve seen a numerous forum posts where people asked about creating a button that looked like a tile – large square with no borders, that responded to tapping. Well, the answer to those was almost always styling a button, but now you can use the same tiles that are all over the home screen of your Windows Phone. How to use them? Let’s create a small application. First of all, create a new Windows Phone Pivot application, targeting version 7.1. The easiest way to do it is creating a new Page project and adding a Pivot control. After that, you should have the following code as your layout in the Pivot control:

Now, make sure you add the latest Silverlight for Windows Phone toolkit to your project. The easiest way to do it is to go to

Tools -> Library Package Manager -> Package Manager Console

In the console, write:

Install-Package SilverlightToolkitWP

And press Enter. There it is, added to your References! Current version is 4.2011.8.17. Now, add it to your MainPage.xaml (one line, not two!):

Add a new folder Images to your project, and add 5 images bulding them as Content. They should be 173×173, to fill the HubTile. I added dummy images, the images from the official examples. In the first pivot item, add a grid 2*3.

You can now go ahead and add HubTiles to the Grid:

 

As you can see, a HubTile has a several important properties.

• Source – source of the image you will use for the Tile
• GroupTag – a tag for the tiles that belong to the same group – useful for freezing more tiles at a time
• Title - shown on tile in large font
• Background – background color of the tile – background for the Message text
• Message – a short note on the back of the tile, shown in small font

Results in the emulator:

Now, can we tap on the tile?

Using gestures with HubTiles

Of course we can! In order to be able to react on tapping the tile, we need to add an event handler for the Tap event

This adds the event handler in the code behind, in which you can navigate to another page, for example:

There needs to be a SeattlePage.xaml page added before, of course. And you can use any other gesture the same way!

 Styling a HubTile

In case you wanted to make a HubTile bigger than 173×173, your first try would probably be:

And that doesn’t work. You need to change the style of the HubTile. You can do it in Blend using a very nice graphical interface, or you can directly write XAML code.

I did it in Blend by clicking on one of the HubTiles then Edit Template -> Edit a copy. It creates a huge amount of code which you have to edit. Basically, you need to edit the size of the control elements, but not just that – you need to edit the code for animations too. All the code is created for you in Blend. All you need to do is change the values. So wherever it says 173, put the size YOU want (in this case, 300), and wherever it says -173, put the negative value of the size you want (in this case, -300). As simple as that. You can change the size of the text on the HubTile, too, but that depends on how big your tile actually is. :)

You can download the style for the size 300×300 here. Just add it to your page resources.

Freezing HubTiles

To improve the performance of your app, make sure that you don’t animate the HubTiles when you don’t see them – there’s no use in that. That’s what the Freeze option is for. That way, when you go to another Pivot or Panorama item, simply freeze one or more HubTiles.

To freeze one HubTile, use:

And to freeze a group of several HubTiles, use:

This is what you need to set the GroupTag value for.  To unfreeze one HubTile, use:

and to unfreeze a group of several HubTiles when you can see them again, use:

Notice that when you use a single HubTile, you pass the object as the argument to the method, and when you use a group of HubTiles, you pass the name of the group. If you want to see how it works, use the Pivot control you’ve created in the beginning, with 2 Pivot items. On pivot selection changed, do:

You’ll notice that if you let the HubTiles animate for a while, then go to the second pivot item, wait a little and then come back to the first pivot item, the tiles are just like you left them!

I hope that this post will help you in your own use of HubTiles – one of the prettiest and most useful controls in the latest release of the Silverlight toolkit for Windows Phone. Sorry for the code styling – I am still finding a way to hosting the blog myself - then I will use addons for better code styling. :)

P.S. Perica, my first application, was updated a few days ago, with a few new features. You can find more details here: http://www.windowsphoneapplist.com/perica-a26819.html