Windows Phone HubTile in depth| Part1: key concepts and API

published on: 03/01/2020

by WindowsPhoneGeek

Recently a new version of the Windows Phone Toolkit was released: Windows Phone Toolkit - August 2011 (7.1 SDK) . Previously we covered all toolkit components in our 21 WP7 Toolkit in Depth articles covering all controls so it is time to continue this series with a few more posts related to the new components that come with Windows Phone Toolkit - August 2011 (7.1 SDK) .

We'll start with two posts that cover all about the Windows Phone HubTile control in details. In Part1 I am going to talk about key properties, methods, events and the main features of the Windows Phone HubTile control.

One of the new components added in the August 2011 update of the Windows Phone Toolkitis the HubTile . Basically it 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:

Flip animation with PlaneProjection

Translate animation

Getting Started

Before we begin:

NOTE: HubTile is designed to fit in the Metro UI, so by default its size is hardcoded to be 173x173 and can not be changed simply by changing the Height/Width properties. So it is not recommended to use other sizes. However is you really want to change the size the only way to do this is by changing the whole Style with the ControlTemplate!

To begin with using the HubTile first add a reference to the Microsoft.Phone.Controls.Toolkit.dllassembly in your Windows Phone application project.

NOTE*:*** The Microsoft.Phone.Controls.Toolkit.dll assembly is installed with the toolkit and you can find it in:

For 32-bit systems:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\Microsoft.Phone.Controls.Toolkit.dll

For 64-bit systems:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\Microsoft.Phone.Controls.Toolkit.dll

Alternatively you can select it directly from the "...\Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011\Bin" if you have downloaded the "Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011.zip" instead.

You can create an instance of the HubTile control either in XAML or with C#.

Define an instance of the HubTile control in XAML: you have to add the following namespace declaration:

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

<toolkit:HubTile Title="HubTile Title" Message="This is HubTile message!" x:Name="hubTile"/>

NOTE*:** Make sure that your page declaration includes the "toolkit" namespace! You can do this by using VisualStudio Toolbox, Expression Blend Designer or just include it on your own.*

Define an instance of the HubTile control in C#/VB: just add the following using directive:

using Microsoft.Phone.Controls;

HubTile hubTile = new HubTile(); hubTile.Message = "This is HubTile message!"; hubTile.Title = "HubTile Title";

Key Properties

Title

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

Message

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

Source

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

Example:

XAML

<toolkit:HubTile x:Name="hubTile" Source="wpglogo.png" Title="HubTile Title" Message="This is HubTile message!" />

DisplayNotification

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

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:

XAML

<toolkit:HubTile Background="Green" Source="wpglogo.png" Title="HubTile Title" Notification="Notification" />

NOTE: You can also change the color of the tiles through the Background property.,

IsFrozen

IsFrozen is a dependency property of type bool. It gets or sets the corresponding flag for all images which are not animated.

NOTE: It is a good practice from a performance point of view, to freeze the animation of your tiles when they are not visible! Use either IsFrozen property, or the FreezeHubTile(HubTile tile) or FreezeGroup(string group) methods of HubTileService!

GroupTag

GroupTag is a dependency property of type string. It gets or sets the group tag of the HubTile control. Usially when you have more than one HubTile you will want to group them so that you can freeze/unfreeze the whole group later.

Example:

XAML

<toolkit:HubTile Title="London" GroupTag="Cities"/> <toolkit:HubTile Title="NewYork" GroupTag="Cities"/>

C#

HubTileService.FreezeGroup("Cities"); HubTileService.UnfreezeGroup("Cities");

HubTileService

Basically, the HubTileService allows you to control the animation of hub tiles. It exposes the following static methods:

FreezeHubTile(HubTile tile)

Freeze a hub tile.

Example:

XAML

<toolkit:HubTile x:Name="hubTile" Title="HubTile Title" Message="Message"/>

C#:

HubTileService.FreezeHubTile(this.hubTile);

UnfreezeHubTile(HubTile tile)

Unfreezes a hub tile and restarts the timer if needed.

FreezeGroup(string group)

Freezes all the hub tiles with the specified group tag that are not already frozen.

Example:

XAML

<toolkit:HubTile Title="London" GroupTag="Cities"/> <toolkit:HubTile Title="NewYork" GroupTag="Cities"/>

C#

HubTileService.FreezeGroup("Cities");

UnfreezeGroup(string group)

*** ***Unfreezes all the hub tiles with the specified group tag that are currently frozen and restarts the timer if needed.

Example:

XAML

<toolkit:HubTile Title="London" GroupTag="Cities"/> <toolkit:HubTile Title="NewYork" GroupTag="Cities"/>

C#

HubTileService.UnfreezeGroup("Cities");

That was all about the basic usage of HubTile from the Windows Phone Toolkit - August 2011 (7.1 SDK) in depth. In the next post I will talk about using the HubTile with data binding, so stay tuned.

The source code is available here:

HubTileDemo

I hope that the article was helpful.

You can also follow us on Twitter: @winphonegeek for Windows Phone; @winrtgeek for Windows 8 / WinRT

Comments

HubTile posted by: Ranhem J. on 08/23/2011 19:59:29 HubTile is a pretty cool control. I start thinking how to use it in my WP app.

Binding posted by: Ramesh on 08/23/2011 20:01:13 I am looking forward the next post: data binding. It sounds quite interesting.

Question posted by: Lee on 08/26/2011 18:31:40 Is this hub tile for within an application or the actual applications tile that appears on the main screen with other tiles? -- Lee

RE:@Question posted by: winphonegeek on 08/26/2011 19:59:32 HubTile is used within the application.

Why can't I find this control posted by: Ryan on 09/10/2011 16:54:02 I have an immediate use for this contorl, but cannot seem to find this in my toolkit. Any ideas? My toolkit was installed with nuget, as version 4.2011.8.17.

Text Backwards posted by: Ryan on 09/10/2011 18:04:18 Figured out my missing control issue, but now the text is displayed backwards when the tile flips any way to prevent / control this?

Event posted by: Ghanishth on 10/03/2011 16:15:36 How can I add an event to the Hub Tile?

RE: Text Backwards posted by: winphonegeek on 10/03/2011 22:10:37 @Ryan This defect goes away when you set an image to the hub tile.

RE: Event posted by: winphonegeek on 10/03/2011 22:13:54 @Ghanishth If by adding an event you mean display some information about an event, you can do this using the Title, Message and Notification properties of the hub tile control

Event posted by: Ghanishth on 10/04/2011 08:44:41 @winphonegeek By event I mean on click or focus on the hub tile(it should navigate to another page) is it possible?

RE: Event posted by: winphonegeek on 10/06/2011 11:25:42 Yes, the event that you probably are looking for is called Tap (there is also a DoubleTap event). See sample below: public MainPage() { InitializeComponent(); this.hubTile.Tap += new EventHandler<System.Windows.Input.GestureEventArgs>(hubTile_Tap); } void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e) { MessageBox.Show("Hub tile 1 was tapped"); }

RE: Event posted by: winphonegeek on 10/06/2011 22:19:33 take a look at this tip: http://windowsphonegeek.com/tips/Working-with-the-Windows-Phone-HubTile-Events

Using tranparent image posted by: Karsten on 11/23/2011 19:59:43 Hi. I try to use the hubtile control with an transparent image, cause i always want to have the current theme color shining through my image. Background is, that i just want to show some icon on the hubtile and not a picture. But when i'm using a transparent image as source, the text and the message will be shown upside down. How can i avoid this? Is that possible?

Using tranparent image posted by: David on 12/03/2011 02:44:50 Yes, same problem here with transparent image. Text shows backwards in the alpha areas. Not good. Is there a solution for this? -David

Using transparent image posted by: GotDibbs on 02/14/2012 04:14:25 In order to solve the transparent background image, I went into blend and edited the template of the control. I replaced the image element with this: <Grid Height="173" Width="173" Grid.Row="1" Background="{TemplateBinding Background}"> <Image x:Name="Image" Height="173" Width="173" Source="{TemplateBinding Source}" Stretch="UniformToFill" /> </Grid> ...and it completely solved my problem with the text showing upside down with the transparent image.

Dynamic HubTile posted by: Rodrigo on 03/05/2012 02:58:50 Hi, I'm adding dynamically HubTiles, there's any how in Tap event I can find it like "selectedindexchanged event"?

Tiles move down when flipping posted by: Duy on 04/17/2012 07:26:01 I notice when flipping the tile moves down a little, is there anyway to prevent that?

Backwards text? posted by: griffin on 06/05/2012 07:48:20 Did anyone besides GotDibbs get this to work? I edited the control template in Blend but that didn't do it for me - perhaps I did it incorrectly as this was my first time editing a control template in blend. I can put a plain blue image on there and avoid seeing all that ugly backwards text but it's really worse overall. Anyone?

posted by: Kiran on 06/12/2012 17:11:53 Recently i downloaded and install Silverlight toolkit for Win Phone 7.1, when i am using HubTile i got below error, how can i resolve this error??? Invalid attribute value controls:LongListSelector for property TargetType

RE:@error posted by: Peter Smith on 06/12/2012 17:38:32 Try using the official release, it should be fine there I am using it in several of my apps.

how to decrease the font size of title posted by: vivek on 01/12/2013 14:00:18 can the font size of the title property be decreased?

Hubtile posted by: Subhist on 02/27/2013 18:58:24 How to change the namespace to "toolkit"?

Wide Tile posted by: Adam on 03/25/2013 07:18:54 Is there any ideas of implementing the wider tile ???

Hubtile Show Title First posted by: Passenger on 07/07/2013 12:27:49 Hi, is there any way to show Title first instead of Image? Every time load image will appear first then only come along with text.