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

In my last blog post I told you about Hub tiles. What they are and how you can add them to your app.

In this post I shall show you the implementation of tiles in your app using data binding. I will also talk about freezing and unfreezing tiles. It is a good practice, from performance point of view, to freeze the animation of your tiles whenever they are not visible.

So to begin we shall first create a list having Hub tiles as items in it. We will make use of data binding so as to ease our task of writing code for each separate items. At the end we shall demonstrate the freezing and unfreezing properties of tiles. The steps that need to be followed are

 

1. Create a new project Hubtiledatabinding.

2. Then open the MainPage.xaml and remove the XAML code for the StackPannel named TitlePanel and replace it with the following code so as to change the page name and application name .

 

 
 


 

3. Then Install the Windows phone toolkit into 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/


 
Then add the following namespace in Xaml window of MainPage,.xaml
 

 
4. Now add the following Xaml code in the Grid named ContentPanel so as to create a listbox in the page having the name mylistbox and bind the target properties of Hub tile with Title , Notification and Source. We also add two buttons to the page so as to freeze and unfreeze the animation of group of tiles in the listbox.

 

 

 

5. Now go to page MainPage.xaml.cs.

6. Create a public class called Tileclass in the Page having the following properties as shown in the code given below.

 

 
7. Then add the following two sample array for providing sample data to be used in the listbox.

 

 


 

8. Then add the following function code given below into the page to add the above sample items into the mylistbox .

 

 

If you face any problem while understanding the above code realted to data binding you can refer to the following blog post for help.

http://www.windowsapptutorials.com/windows-phone/how-to-bind-listbox-to-data-in-windows-phone-application-introduction/

 

9. Now add the code for the two button event handlers freeze and unfreeze buttons.

 

 


 

10. Now call the function addtheitems in the Constructor of the MainPage.

 


 

11. Now run the application on emulator. You will see the following output.

 


 

12. You can now click on the freeze tiles button to freeze the animations of the tiles in myistbox and you can unfreeze the same using unfreeze button.

13. I hope this post will be helpful to you. You can download the full project zip file from the link given below.

 

Download full project Hubtilesdatabinding.zip

 

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