WP8 Tip: Creating Live Tiles with Dynamic Images

On a recent project we came to an issue with the Windows Phone application’s Live Tile. The application is used as a product’s specific interactive mobile experience. One of the requirements, is to be able to update the content to match a product, so when the app is installed, it displays only the desired product’s information.

In terms of app content, this is a common scenario and it can be approached by consuming local or external content, whether using the application’s isolated storage or web services.

However, Live Tiles are a different matter, in particular if you need to create the app’s Live Tile with images loaded dynamically. Today I spent some time looking for a way to solve the issue, and I want to share it with you.

In this sample, I’ll create a simple example which will use images stored in isolated storage. The first time the application runs, it will create the Live Tile using one of the tile templates using the loaded images. This approach allows you to change the tile images according to the desired content.

To start, create a new Windows Phone 8 application in Visual Studio. Remove the UI code that you won’t use, to keep the sample clean.

By default, the application will be created with a few default images for the tile. Notice the default images for the FlipCycle and the Iconic tile templates. If you check the windows phone application’s manifest (WMAppManifest.xml), you will notice the application’s default tile template and default images defined here.

Then, open the App.xaml.cs class and add the following method, which will be responsible for creating the actual Live Tile.

  1: /// <summary>
  2: /// create live tile if it was not created
  3: /// </summary>
  4: private void CreateLiveTile()
  5: {
  6:     // Assumes we are getting the image file names from either 
  7:     // a web service or local isolated storage
  8:     string smallImage = "FlipCycleTileSmall.png";
  9:     string mediumImageFront = "FlipCycleTileMedium.png";
 10:     string mediumImageBack = "FlipCycleTileMediumBack.png";
 11:     string title = "PRODUCT XYZ";
 12: 
 13:     // The way to load the tile images from isolated storage is to use the
 14:     // isostorage URI format. Images need to exist in the /Shared/ShellContent/ location.
 15:     // Assumes there is a data/asseet download and store mechanism making sure of this.
 16:     string baseIsoUri = "/Shared/ShellContent/";
 17: 
 18:     FlipTileData appTile = new FlipTileData();
 19:     appTile.Title = title;
 20:     appTile.Count = 9;
 21:     appTile.SmallBackgroundImage = new Uri("isostore:" + baseIsoUri + smallImage, UriKind.Absolute);
 22:     appTile.BackgroundImage = new Uri("isostore:" + baseIsoUri + mediumImageFront, UriKind.Absolute);
 23:     appTile.BackBackgroundImage = new Uri("isostore:" + baseIsoUri + mediumImageBack, UriKind.Absolute);
 24:     appTile.BackContent = "Dynamic Images";
 25: 
 26:     // find the tile object for the application tile that use the string used in the title contains string in it.
 27:     ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(title.ToString()));
 28: 
 29:     if (TileToFind == null)
 30:     {
 31:         ShellTile.Create(new Uri(string.Format("/MainPage.xaml?id={0}", title), UriKind.Relative), appTile, true);
 32:     }
 33: }

Then, you need to call the method from your application initialization. You can add the call at the end of the InitializePhoneApplication() method in the App.xaml.cs file.

Before we give it a try, lets create a copy of the default tile images and change them using a tool like Photoshop to differentiate them.


Go back to Visual Studio and put a breakpoint on the CreateLiveTile method we created.


Select the emulator as the target device, and run the application.


Visual Studio will launch the WP8 emulator (the first time it will take a while, so keep the emulator open so following runs load faster)


You can debug step by step and make sure your Tile template is created correctly with all the data and images we want.


The first time the app runs, it will create the application’s Live Tile. Stop the debugger and check the emulator’s start screen. You should be see the tile, working and flipping between the front and back views.

     

you will notice that the tile is created, but no images are shown. This is because the app didn’t find the images in the location we specified. We are assuming that another mechanism will make sure to store the images in the right location before hand. For now, we just need to copy the assets to the app’s isolated storage location.

You can do this by using the Windows Phone Power Tools utility. The tool allows you to connect to a connected device or emulator and copy or delete files from the installed application’s isolated storage.


Click on the Isolated Storage section, and expand the Shared folder of your newly installed application.


Let’s add the files we created for the Tile.



Now, go to the emulator, and remove the tile from the home screen. Then run it again from Visual Studio.

     

Now, you should see the app’s tile created again, but this time using the modified images, which were loaded dynamically.

     

There you go. You are now able to create the Tile with images that were loaded dynamically. I’ll be soon publishing more tips about how to update existing main Live Tiles and how to work with Isolated Storage. You can download the sample project from my Github repo.

There’s already lots of people sharing information about it, so hopefully you will be able to find answers and different approaches. Check some of the following articles for more information:

WP Dev Center Tiles Overview
Live Tiles Templates Tutorial
Nokia Dev Live Tiles Guide