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!


About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Comments