Use of HubTile in Windows Phone App

Introduction

Have you ever wondered how tiles work in Windows Phone? How an app developer puts tiles in their app.

The answer is HubTile. I really think this is a cool thing, because it makes a Metro look.

Implementing it is not that as hard as I thought earlier.

So, let's start to put this in your Windows Phone app.

Background

We need the Windows Phone Toolkit (2013) since HubTile is part of this package. Visual Studio doesn't provide HubTiles, so add the DLL file first.

And then add the namespace to your XAML page by:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

You can download this toolkit from http://phone.codeplex.com/

Or, you can go with the Nuget Console also, as in the following:

Install-Package SilverlightToolkitWP

Procedure

Start a blank Windows Phone project, and use the following procedure.

Step 1

Choose your grid and design depending on it. It's better to have two grid columns.

 

<Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
   </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinitionWidth="auto"/>
   </Grid.ColumnDefinitions>

 

Here, we want a grid to resize itself automatically. That's why we used auto instead of a pixels value.

Step 2

Now, we will define the hub tile in our Grid.

So, add this XAML code to your XAML page:

<toolkit:HubTile
Grid.Row="0"
Grid.Column="0"
Source="Images/1.jpg"
Title="One"
Background="Red"
Message="I 'm One"
Name="OneHub"
Margin="5"
Tap="OneHub_Tap"
/>

Explanation

We start with the toolkit: that is the default way to start any Toolkit.

In the next two lines, we have provided the cordinates of the Grid.

The Source will set to the image source (path) of the hub tile. Then we have Title set to the title text of the hubTile.

Background sets the background color of it and last the Message sets the body text of the hub tile.

And, repeat this for the number of times you want.

I have done this for three hubTiles with various properties.

Further you can use the Tap property to raise a tap event.

 

private void OneHub_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//When First HubTile taps
NavigationService.Navigate(new Uri("<PAGE 2>.xaml", UriKind.Relative));
}

 

And, it looks like:

Note: Use a 300x300 pixels image for your tile's background image.

Conclusion

You can see the attached solution file for further reference.

Stay raw, stay geek and keep coding.