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.
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.
How to add Hub tile using Xaml
There are two ways of adding a Hub tile control using Xaml.
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 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.
<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
Title is a dependency property of type string. It gets or sets the title of the HubTile control.
Message is a dependency property of type string. It gets or sets the displayed message of the HubTile control, displayed in small font.
<toolkit:HubTile Title=”HubTile” Message=”Hello everyone”/>
In this tile Title of the tile is – HubTile and Message is – Hello everyone
Source is a dependency property of type ImageSource. It gets or sets the image source of the HubTile control.
<toolkit:HubTile Title=”HubTile” Message=”Hello everyone” Source=”/logo.jpg”/>
Back image is same as the previous example.
DisplayNotification is a dependency property of type bool. It determines the flag for new notifications.
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.
<toolkit:HubTile Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />
Front image is same as that of Example 1.
One of the most important property of Hub tile with the help of which you can change the background color of your tile.
<toolkit:HubTile Background=”Blue” Title=”HubTile” DisplayNotification=”True” Notification=”2 messages” />
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.
<toolkit:HubTile Source=”/logo.jpg” Message=” ” >
<ImageBrush Stretch=”UniformToFill” ImageSource=”/logo 2.jpg”/>
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