How to create a WP Primary Live Tile using Telerik’s LiveTileHelper?

Last day we learnt “How to Integrate WP7.8, WP8 Live Tiles in your WP7.5 apps?” which was using the default APIs provided by Windows Phone SDK. That does not provide additional APIs like transparency, front and back content etc. to control the live tiles of your application.

In this post, we will learn how to customize the primary live tile of your Windows Phone 7.8 or 8.0 applications easily using the Telerik libraries.

If you are going to integrate it in your Windows Phone 7 application, make sure that you installed the Windows Phone SDK update for WP7.8 as this is needed to implement the three sizes of tiles in the application start screen. Then you need to configure your project to support the Windows Phone 7.8 live tile for your application by modifying the “WMAppManifest.xml” file with the following three lines of xml entries:

<AppExtra xmlns="" AppPlatformVersion="8.0">

  <Extra Name="Tiles" />

</AppExtra>

A detailed steps to configure the project to target WP7.8 is mentioned in this post: “How to Integrate WP7.8, WP8 Live Tiles in your WP7.5 apps?”.

Update the Primary Live Tile with Telerik Library

Once your application supports the WP7.8 Live Tile, it’s time to update the primary tile of your Windows Phone 7 app. We will go with the Telerik library this time. Telerik.Windows.Controls.LiveTileHelper exposes a property named “AreNewTilesSupported” which returns true if it is a WP7.8 or WP8.0 device, which internally does the same check that we used in our previous discussion as below:

(Environment.OSVersion.Version >= new Version(7, 10, 8858))

After that you will need to get the instance of the current live tile of the application, so that, you can modify and update the same. Use ShellTile.ActiveTiles.First() to get the current live tile.

Now create an instance of “RadFlipTileData” and set various properties to it. If you are building a primary live tile, you must have to use RadFlipTileData or any other class that inherits FlipTileData from the Windows Phone SDK. RadFlipTileData present in Telerik.Windows.Controls namespace provides additional APIs to control the tile. It supports transparency, front and back tile data etc. for you to customize your tile according to your brand.

Here is the complete code snippet for your reference:

if (LiveTileHelper.AreNewTilesSupported)

{

    var tile = ShellTile.ActiveTiles.First();

    var flipTileData = new RadFlipTileData

            {

                IsTransparencySupported = true,

                Title = Constants.ApplicationTitle,

                BackTitle = Constants.BackTitle,

                BackgroundImage = new Uri("/Icons/MediumLogo.png", UriKind.RelativeOrAbsolute),

                WideBackgroundImage = new Uri("/Icons/WideLogo.png", UriKind.RelativeOrAbsolute),

            };

    LiveTileHelper.UpdateTile(tile,flipTileData);

}

Now build your application and run it in the emulator or device. Tap on the application icon from the application list and pin it to the start screen. You will see the new medium sized tile in the screen. Tap and hold it to customize the size. You will now be able to change the size according to your mood as shown below:

I hope that, it will help you to integrate the new tile in your Windows Phone 7 application to give a new user experience to your end user. Again, keep in mind that the small flip icon supports 159 × 159 pixels image, the medium flip icon supports 336 × 336 pixels image and the wide flip icon supports 691 × 336 pixels image.

If you are facing any issues upgrading to the new live tile, let me know below and I will try to help you as soon as I can. For immediate technical discussion, updates, follow me on Twitter, Facebook and Google+. Also, subscribe to my blog’s RSS feed and email newsletter to get the article updates delivered directly to your inbox.