Windows-8.1

Hub tile in Windows phone app – Part 1: Introduction

Hub tiles is a control that enables you to add animated and informative tiles to your application. A HubTile can have Image, Title, Message and Notification. HubTiles can be grouped using the GroupTag property. They are animated randomly using the following effects:

1. Flip animation with PlaneProjection

2. Translate animation

In this first article related to Hub tile I will show you how can you add Hub tile to your app and what are the key concepts and API associated with it.

 

Getting Started

Hub tile is a component that is present in the Windows phone toolkit assembly. To use the Hub tile in your app you first need to add the following toolkit into your project.

You can add the Windows phone toolkit to your project with the help of NuGet Package Manager.

 

 

If you don’t know how to integrate a toolkit with your project you can refer to the following blog post.

http://www.windowsapptutorials.com/windows-phone/how-to-integrate-a-toolkit-or-third-party-sdk-with-windows-phone-app-using-nuget-package-manager-2/

 

How to add Hub tile using Xaml

There are two ways of adding a Hub tile control using Xaml.

First way:

First one is to directly add it through the toolbox containing different Windows phone controls. You can simply Drag and drop the Hub tile control from the toolbox into the phone page.

If the Hub tile control is not present in toolbox you can follow the steps given below to add the Hub tile control into your toolbox.

 

1. Go to Toolbox in your Visual studio and right click on general category and select Choose Items.

 


 

2. Select the Windows phone component tab or Windows phone Silverlight control tab from choose items dialog box.

3. The tick the Hub tile control and click ok to include it in your toolbox.

 


 

4. Hub tile control will be included in the general category of your toolbox.

 

Second way:

Second way is to directly add the Xaml code. To directly add the Xaml code of Hub tile you need to add the following namespace given below in Xaml window.

Namesapace

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

 
add
 
Hub tile example

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone” x:Name=”hubTile” Margin=”142,217,141,333″/>


How to add Hub tile dynamically using C#

You can also add Hub tile dynamically into your application using C#. An example is given below.

Consider the following code

We can see that in above function a new hub tile is being created and is being added into the Content panel grid of the page.

 

Different properties of Hub tile

1. Title

Title is a dependency property of type string. It gets or sets the title of the HubTile control.

 

2. Message

Message is a dependency property of type string. It gets or sets the displayed message of the HubTile control, displayed in small font.

Example 1:

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone”/>

Front image


Back image


In this tile Title of the tile is – HubTile and Message is – Hello everyone

 

3. Source

Source is a dependency property of type ImageSource. It gets or sets the image source of the HubTile control.

Example 2:

<toolkit:HubTile Title=”HubTile” Message=”Hello everyone” Source=”/logo.jpg”/>

Front image


Back image is same as the previous example.

 

4. DisplayNotification

DisplayNotification is a dependency property of type bool. It determines the flag for new notifications.

 

5. Notification

Title is a dependency property of type string. It gets or sets the notification alert of the HubTile control displayed in large font at the back of the tile.

Example 3:

<toolkit:HubTile Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />

Back image


Front image is same as that of Example 1.

 

6. Background

One of the most important property of Hub tile with the help of which you can change the background color of your tile.

Example 4:

<toolkit:HubTile Background=”Blue” Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />

Back image


Front image will be same as that of previous example but background color will change to blue.

Another interesting thing that you can do with the help of background property is that you can set the background to image source rather than setting it to any color.

Example 5:

<toolkit:HubTile Source=”/logo.jpg” Message=” ” >

<toolkit:HubTile.Background>

<ImageBrush Stretch=”UniformToFill” ImageSource=”/logo 2.jpg”/>

</toolkit:HubTile.Background>

</toolkit:HubTile>

 

Front image

Back image


 

The above example will create a Hub tile which will have the following front and back images.

Note: Remember to add message property into the code otherwise the tile will not flip and the tile will remain frozen.

 
For more information about Data binding in Hubtiles and Freezing of tiles you can refer to the following blog post

 
Hub tile in Windows phone app – Part 2: Data binding and Freezing of tiles
 

Chetan Gulati

Currently am doing B TECH in IT from Delhi Technological University. App development is my passion. Believe in quality rather than quantity.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close