In the blog post I will take a look at how to create a Primary Live Tile for a Windows Phone 8 based applications. Currently while creating a WP8 app I wanted to create a Primary Live Tile. But I did not have any scenario where in a user is allowed to pin the app to start screen with a button click. Most of the examples which showcase the concept of Live Tile are all based on code block where the tile is crated and updated. This blog post is my learning of how to create a primary live tile for a WP8 app.
If you are developing applications for Windows Phone 8 most probably you would have come across what is called as the Live Tile. Live Tiles bring life to the tiles in my perspective. Live Tiles are tiles which have front and back content. The tile keeps switching between the front content and back content at regular intervals in a layman terms. This draws the users attention to that tile. With WP8 there are 3 tile templates – Flip, Cycle and Iconic. The tiles are available in 3 sizes namely Small, Medium & Large.
Providing Tile Information:
In the WM App Manifest file we specify the tile template we want to use for our application. There is also an option to specify if we want to support Large tile image. Then we would have to provide the tile images for the Small, Medium and Large tiles.
After this build and deploy the application on to an emulator or to an actual device. Go to Application List, long press on your app and select “pin to start”.
Once the app is pinned to start you will get a tile of your app on the starts screen but its just a Primary Tile. Its not a Live Tile. Lets see how to make this a Live Tile now.
Providing Live Tile Information:
Note that the WM App Manifest file is a XML file. If you double click this file in the Solution Explorer, you get a nice GUI which makes it easy for you to enter information visually. So when you provide the template for your app that needs to be used and the images for the tile sizes, they are all in fact stored as XML. Here is how to figure that out. In the Solution Explorer, right click on WM App Manifest and select “Open With…” option from context menu.
We will be presented with a “Open With” dialog. Select XML (Text) Editor and click ok.
Now the WM App Manifest XML file will be opened as a text file and we can see the XML that is auto generated for us by the GUI. Pay close attention to “Tokens/PrimaryToken” node. This is what defines Primary Tile of our application.
If you look closely at the XML code we notice nodes named – BackContent, BackBackgroundImageURI, LargeBackContent and LargeBackBackgroundImageURI. As you cane see these four nodes are empty. Since these 4 nodes are empty – our application tile behaves as a Primary Tile and not as a Primary Live Tile. So if we want to make our Primary Tile a Live Tile we need to provide value to either the BackContent or BackBackgroundImageUri for the Medium Tile and either LargeBackContent or LargeBackBackgroundImageUri for the Large Tile. BackContent can be just a text we want to display in the back of the tile or set an image as the back of the tile. Go ahead and edit the nodes as per your requirements. In my case I have just provided a image as my back content for both Medium & Large tiles. Here is my XML:
Build the app and deploy to an emulator or to an device. Pin the app to start screen from the App List. Notice that when you set the tile as Small or Large, the tiles will now flip and show your back content as set in the manifest.
This post explains how to make your Primary Tile become a Primary Live Tile by editing the WM App Manifest XML file manually. If you ever have a situation where in you don’t have an explicit “pin to start” button action within your app but still want to have a Primary Tile which needs to be a Live Tile, you can follow the approach I have outlined in this post. Note that whatever we have done in the manifest file can also be done through code. I was just exploring simple way to do my requirement and I found this to be exactly what I wanted. Do let me know if you have any other ways of achieving my requirement.
Till next time – Happy Coding. Code with Passion, Decode with Patience.