Windows-8.1

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

 

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