The latest release of the Silverlight Toolkit for Windows Phone, available download in here, has given developers a brilliant new control called the HubTile. This control allows you your own tiles to your application, similar  to the groups on the People Hub

Creating a tile is really easy, just add the following code to your application:

<toolkit:HubTile
    Margin="12,12,0,0"
    Source="/Images/Pretzel.jpg"
    Title="Pretzel"
    Notification="w/fixings"
    DisplayNotification="True"
    GroupTag="Food"/>

The HubTile supports two types of messages that can be applied to the back of a tile, Message and Notification. With a Message, text is displayed  in a small font on the back of the tile. This can be done using the following code:

<toolkit:HubTile
    Margin="12,12,0,0"
    Source="/Images/Pretzel.jpg"
    Title="Pretzel"
    Message="This is a test message"
    GroupTag="Food"/>

With a Notification, text is displayed in a larger font on the back of the tile. This can be done using the following code:

<toolkit:HubTile
    Margin="12,12,0,0"
    Source="/Images/Pretzel.jpg"
    Title="Pretzel"
    Notification="New Notification"
    DisplayNotification="True"
    GroupTag="Food"/>

There’s also a central coordination system that allows tiles to animate in a defined but random way; you can also freeze/unfreeze the tiles to improve performance in pivot scenarios, etc. This is done using the “GroupTag” property of the control. Imagine that you have a pivot control with two tabs of HubTiles, when you change tabs, the HubTile animations would still occur in the background even thought their not being displayed to the user eating into processing power.

To solve this we user the HubTileService to freeze and unfreeze the groups of tiles based on the selected pivot tab. In the previous examples, the HubTile “GroupTag” was set to “Food”. To stop and start the animations, we would use the following code:

 private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if ((sender as Pivot).SelectedIndex == 1)
            {
                HubTileService.FreezeGroup("Food");
            }
            else
            {
                HubTileService.UnfreezeGroup("Food");
            }
        }

I’m loving this control at the moment. With a little bit of work you can create Menus that come to life and really engage with the user and give your apps a metro style your users will love to look at.

Popularity: unranked