Creating wide tiles for your Windows Phone 7 app

I’ve recently come across an article in the Nokia Developer Wiki about creating live tiles (including wide tile) for both Windows Phone 7 and Windows Phone 8 by writing a single piece of code that works in both versions of the OS.

To do this you will need to use the MangoPollo library which you can easily get from NuGet. The library uses reflection to create your live tiles depending on the OS version the app is running in. Creating your tiles is easy:

var tile = ShellTile.ActiveTiles.FirstOrDefault();
if (tile != null)
{
    var tileData = new FlipTileData();
    tileData.Title = "Start Debugging";

    tileData.BackContent = "switch to windows phone, we've got candy";
    tileData.BackgroundImage = new Uri("Assets/tileBackground.png", UriKind.Relative);
    tileData.BackBackgroundImage = new Uri("Assets/tileBackBackground.png", UriKind.Relative);

    tileData.WideBackContent = "switch to windows phone, we've got candy";
    tileData.WideBackgroundImage = new Uri("Assets/wideTileBackground.png", UriKind.Relative);
    tileData.WideBackBackgroundImage = new Uri("Assets/wideTileBackBackground.png", UriKind.Relative);

    tile.Update(tileData);
}

That’s all you need to do. Both the normal and wide live tiles should now be available when resizing the tile of your app. Now all that’s left for you to do is to update it.

Also, one thing that wasn’t so obvious for me – you can use absolute URIs for the tile images. eaning that you can give as a source a image directly from the internet and the OS will download and cache it for you.

tileData.WideBackgroundImage = new Uri("http://cdn.marketplaceimages.windowsphone.com/v8/images/0a539106-8940-4898-99c2-744cbc7a6097?imageType=ws_icon_small", UriKind.Absolute);



4 Comments

Where exactly do we need to write this code in the application ?
I mean do we need to write the code in the class ?
If yes in which class can you be more detail on this.
since i have installed mangopollo on to my application but not understanding were to add this code.
Please help

Can you please ellaborate as in which function we should put this code so that the function gets called while the user tries switching between tile sizes 🙂
Please reply asap. Thanks 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you a human? * Time limit is exhausted. Please reload the CAPTCHA.