Create beautiful and dynamic Live Tiles with Telerik LiveTileHelper

by Valentin Stoychev | Comments 5

Download the sample project here.

In the quest of making Windows Phone developers life easier we decided to add a little addition to Telerik Windows Phone toolkit with the Service Pack that was announced today. One of the coolest things that were added in the Mango update of the Windows Phone OS was the support of secondary live tiles. With secondary live tiles you can add a link on the home screen of the device which can point to any Page inside your application.

Live Tiles Generator

With the default support for live tiles that comes from the Silverlight framework you get a fixed template for the live tile which consist of:
- a Number
- Title
- And a Background image, which should be a static image from your application, or from an external url.
You have also an option to specify the back content of the tile, which if you do the live tile will get a nice fluid animation when make a transition between the front and the back tile content.

The API created by Microsoft is very intuitive and really easy for use and at a first glance it seemed like there is nothing we could add in order to ease an enhance the developer experience. However we got a lot of feedback from our customers that there is a common scenario when developers want to create dynamic tiles with custom design and content based on the context of their applications. A very common scenario is that you want to pin a page that has a dynamic (or user generated) content. In this case you can’t use a static image from your application or even a dynamic image from a web server because the content is very often created on the fly.

As a real world example you can see how the live tiles are created in our Tasks application – we allow end users to create custom tasks, projects and categories, on which they can specify a custom title, color and icon.

In the light of all this, we decided to add a new component in our suite called LiveTileHelper. It is extending the standard data you can add to the live tiles with two additional properties – VisualElement and BackVisualElement which are of type UIElement. So now in order to have a custom designed and dynamic live tile for your application you just need to have a visual which you want to be displayed on the live tile.

The API is pretty straightforward:

 

LiveTileHelper.CreateOrUpdateTile(
new RadExtendedTileData()
{
     Title = "My Title",
     VisualElement = new WindowsPhoneControl1(),
     BackContent = "Back Content",
     BackVisualElement = new WindowsPhoneControl2(),
     BackTitle = "My Back Title 2"
},
new Uri("/MainPage.xaml?x=2", UriKind.RelativeOrAbsolute)
 );

As you can see you just need to pass the (Back)VisualElement properties and to call one method – with a single line of code you are ready. The method itself will take care for creating the tile, cleaning up the resources and pinning the tile to the phone home screen.

Please download the attached sample project and please let us know if you have any feedback for this feature!

,
Team Leader,
Windows Phone Team

 

5 Comments

Levente Mihaly
Great helper! One thing i couldn't figure out though, is how to give the tile the accent color background? If I set to my control (VisualElement's) background to transparent, then the back color is black, not the accent color.
Valentin Stoychev
Yes - by default the background is transparent and thus - you see it black on the dark theme and white in the light theme.
You should set the background manualy if you want to have the accent color.
Steven
Can I call a method CreateOrUpdateTile without exiting the application?
Valentin Stoychev
No, it is a requirement by the OS. We can not workaround it. It is done in order to protect the user home screen from fluding with tiles.
Hujer
It's (somehow) possible to use LiveTileHelper from within BackgroundAgent eg. inside Periodic task dll? Or is there som another control to use it in this case?
I think it's common (in WP7.5) to update the Tile in the background.

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by Valentin Stoychev - or - read latest articles in Developer Tools