How to Integrate WP7.8, WP8 Live Tiles in your WP7.5 apps?

The Windows Phone SDK update for WP7.8 is already there and many people already started receiving the WP7.8 OS update in their existing WP7.5 handsets. If you are a developer, you might want to integrate the new Live Tiles in your existing application to give it a good look.

In this post, I will guide you to update your existing apps to include the new live tiles. Continue reading to find out the step-by-step process to integrate it.

The Windows Phone 7.8 OS update and SDK comes with the new tile sizes of Windows Phone 8 named “small”, “medium” and “wide”. If you are using a Windows Phone 7.5 Mango device, you can experience the same by updating your current OS version using the Zune software. If you still did not receive the update in Zune, you can try an alternate way to force the update.

Let’s come to our main topic. If you are a Windows Phone application developer and already installed the Windows Phone SDK update for WP7.8, you might want to integrate the new tiles in your existing WP7.5 applications primary tile.

First Configure your App Settings

To begin with the integration steps, first open your exiting project and open the “WMAppManifest.xml” file in XML view. To do this, first close the file (if it is already opened), right click on the file and in the context menu click “Open With…” menu item. This will open the below dialog window in the screen:

In the above dialog (as shown), select the “Source Code (Text) Editor With Encoding” option and click “OK” button. This will open the file in XML mode. Now, in the XML file, find for the “App” tag and just above that, write the following XML entry:

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

    <Extra Name="Tiles" />

</AppExtra>

The above xml entry will add the support of Windows Phone 7.8 live tiles in your application. Make sure to set the “AppPlatformVersion” property value to “8.0” in the “AppExtra” tag. This will look as below:

Update the Primary Live Tile

Once your application supports the WP7.8 Live Tile, it’s time to update the primary tile of your Windows Phone 7 app. Though there are three different live tiles available, but the primary tile supports only FlipTile. Before going to update the tile, first check whether the device supports the new tile or not. To give a check to that, compare the current OS version of the device and if it supports, we will update the tile. If the user’s device not yet updated to the WP7.8 OS version, it will use the existing tile only.

Now it’s time to get the first active tile by calling the ShellTile.ActiveTiles.First() and then create the FlipTileData with the appropriate property values and call the Update() method with the of the primary tile as shown in the below code snippet:

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

{

    var tile = ShellTile.ActiveTiles.First();

    var flipTileData = new FlipTileData

            {

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

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

            };

    tile.Update(flipTileData);

}

Here we added a background image and a wide background image to the tile. Now if you run the application in WP7.8 OS platform and pin the application to the start screen, you will notice the new tile created in the start screen. You will also be able to resize the tile to small, medium and wide tile sizes. Check out the other properties of the FlipTileData too, who knows that could be useful in your application!

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. 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.