I’m in the process of unveiling a new app on the marketplace (it’s actually ready to publish right now, but I’m waiting to publish a blog post on it later). During the process of creating this app (really it’s a framework), I needed/wanted to enable a Live Tile. While the whole Live Tile thing is not all that complex, I decided to make it even simpler with a single class.
I had been told Live Tiles can be created in 6 lines of code; with my helper I have reduced that number by 66% (so 2 lines of code). I also used this code to produce a new version of my comic reader that let’s you pin a single comic to the desktop (and of course it shows a portion of the cover/first page in the Live Tile).
The Code
I created a class that is called LiveTileTempate. It’s all you need in your projects. All you need to do is create a LiveTileTemplate Instance with the proper values set and then call the UpdateApplicationTile, or CreateSecondaryTile methods. So here’s some example code for updating the application’s pinned/Live Tile:
LiveTileTemplate tileCreate = new LiveTileTemplate
{
FrontSideTileTitle = "Live Tile Demo",
FrontSideTileCountContent = (new Random()).Next(100),
BackSideTileTitle = "Back Side",
BackSideTileContent = "My Content on back of tile"
};
tileCreate.UpdateApplicationTile();So let me explain all this, we create a LiveTileTemplate and then simply call the instance’s UpdateApplicationTile method. Most of this is pretty self-explanatory. We set both the front and back titles that appear under the tile, we set a number which appears on the front, and we set the back to have a message on the tile (we go through all the properties further down this post).
This same code could be used to produce a Secondary tile with 2 changes:
- We have to set the NavigationUri property of the LiveTileTemplate instance
- The last line would need to call CreateSecondaryTile instead of UpdateApplicationTitle
Let’s see an example of a Secondary Tile:
LiveTileTemplate tileCreate = new LiveTileTemplate
{
FrontSideTileTitle = "2nd Live Tile",
FrontSideTileCountContent = (new Random()).Next(100),
FrontSideBackgroundImage = "/Koala.jpg", // this would never fly in the Marketplace process (icon needs to reflect app)
BackSideTileTitle = "2nd Back Side",
BackSideTileContent = "This is the backside of the second tile",
NavigationUri = "/Page2.xaml?value1=content+in+uri&randomNumber=" + randomNumber.ToString()
};
tileCreate.CreateSecondaryTile();
So this example has a few more elements in it. We are now setting the NavigationUri to a relative path to a xaml page in our app and can include a querystring. We also set the Front’s image using content inside the XAP. This can also be a URI pointing to an image on the Internet (and can even come from IsolatedStorage, but more on that in a later blog post).
Finally we call CreateSecondaryLiveTile(). The naming of that method is not 100% accurate. It actually will detect changes and apply an update to your tile instead. The big thing is that when updating a secondary tile you have to provide all the information (not just changes), because we aren’t given the ability to reload the content that was previously entered, so we don’t really know, for instance, what was originally the Content of the back of the tile. We can only really detect that there was a tile there before pointing at a specific URI in our XAP.
Additional Functions/Methods
Speaking of existing tiles there are a couple additional static methods that are exposed. You can call LiveTileTemplate.GetExists(“/path/to/aPage.xaml?querystring=somevalue&qs2=someValue&etc”) and it will return to you whether a SecondaryTile already exists for that Uri. This is useful because when you create a secondary tile the OS automatically takes the user to the start screen. If the Tile already exists then they stay in the app. You want to be able to let the user know that the tile was updated instead of created in this second instance and now you can know what is going to happen next before proceeding with the action. My comic reader throws up mock toast notifications in the case where the tile has been updated instead of created.
Finally there is one more static method that you might be interested in. LiveTileTemplate.DeleteSecondaryTile(“/path/to/aPage.xaml?querystring=somevalue&qs2=someValue&etc”) deletes a previously created tile using the Navigation Uri.
There are also one more additional method and a constant that are pertinent to using an image from IsolatedStorage, but that will wait for another post.
LiveTileTemplate Properties
Here’s the properties (and their meaning and additional info) that you can set in the LiveTileTemplate Class:
- FrontSideTileTitle – The title that appears on the front side of a tile (If this value is null then class will try to infer the name of your app from the Assembly’s name)
- FrontSideBackgroundImage – Set’s the image for the front side of the tile (the default is to use the Background.png file that is part of your XAP. Also, I’m not sure if you are allowed to radically change this and get accepted into the marketplace, so change this with caution would be my advice)
- FrontSideUriType – sets whether FrontSideUri is a relative or an absolute Uri. (We default to relative, but if we detect an isolated storage Uri we switch to an absolute Uri).
- FrontSideTileCountContent – (optionally) sets the number that will appear on the front side of the tile. (We default to null which means no number)
- BackSideTileTitle - The title that appears on the back side of a tile (If this value is null then we grab the title of the front side of the tile or if that is null we use the name of the Assembly)
- BackSideTileContent – This is the text that will appear on the back side of your tile.
- BackSideBackgroundImage – Set’s the image for the back side of the tile (leaving this blank will use the user’s accent color)
- BackSideUriType – sets whether BackSideUri is a relative or an absolute Uri. (We default to relative, but if we detect an isolated storage Uri we switch to an absolute Uri).
- NavigationUri – sets the Navigation Uri that is used when the user clicks the live tile. (this should be a deep link into your app and may even be a link that in a place in your app that is inaccessible in other ways; it’s pretty cool that you can do this)
Download
You can get the class and a sample project from my source code repo for this. I have a couple more things I will be doing with this (and another article.. hopefully soon).