In this tutorial, we’ll walk through the steps to create a basic Windows 8 Live Tile notification. Our example application will display its tile in Windows 8, and upon clicking a button, will change its tile to display a Live Tile notification. We’ll include an example of a text, image, and animated Live Tile notification in C# .NET.
A Live Tile is really just an XML file. The XML file defines the fields to be displayed on the tile and the behavior that it should follow. The complete list of tile templates and their associated XML files can be found on Microsoft’s dev center site. An example XML template for a basic text tile notification appears as follows:
Notice the XML is a basic template. This one is for TileSquareBlock and contains two elements to define the text content. The first element will be displayed in a large font, while the second element will display in a smaller font underneath. The style and appearance is defined on the Microsoft dev center page.
To begin creating a simple Windows 8 live tile notification in C# .NET, we start by creating a basic helper method for creating the tile notification. We’ll first specify which template we’d like to use. Then we’ll load the XML file. Finally, we’ll issue the notification and update our tile. Our helper method for creating the tile notification appears as follows:
In the above code, we first load the built-in Windows 8 Live Tile notification template. This returns an XmlDocument, containing the XML for the specific tile notification. We then modify the XML to insert our own text within the text elements. Finally, we issue the notification update.
For our second example Windows 8 live tile notification in C# .NET, we’ll create an image-only notification. To do this, we can create a new helper method that populates the required image element within the XML, as follows:
The only difference in the above code is that we’re using the TileSquareImage template. Since we have a new template, we’ll populate an image element instead of a text element. The image element takes an internal path, pointing to an image resource in the project. You can add images to the Assets folder within your project and then load them in a Windows 8 tile notification. For this example, the image should be 150x150 pixels.
Our final example will be an animated Windows 8 live tile notification. We’ll use the TileSquarePeekImageAndText04 template to display both an image and text block, in an animated display. the image will scroll in vertically and alternate between showing the text and the image. It’s important to note the visual effect from this type of tile notification. It should be used sparingly to avoid overwhelming (and annoying) the user. Similar to popups in earlier Windows web browsers, we’ll wait and see how the usability of this type of notification works out.
In the above code, we set two elements in the C# .NET Windows 8 live tile notification. We set the attribute value for the image element. We also set the InnerText value for the text element. The result is an animated tile that briefly shows the image, then scrolls vertically to display the text, and so-on, until the timer expires.
You’ll notice, in the above examples, that displaying a C# .NET Windows 8 live tile notification contains a lot of the same code, regardless of the type of notification. In fact, the only differing code involves the customization of the XML template. We can take advantage of this common code to refactor and create a generic Windows 8 live tile notification helper method to make our notification code easier and cleaner.
The above method takes a TileTemplateType, so we can display text, images, animated, or any other type of Windows 8 live tile notification. It also takes the number of seconds to display the notification. We also provide a custom method (ie., anonymous method), which will include customization code for populating the XML document with our text or image values.
With our common code encapsulated, we can now set a Windows 8 live tile text notification in C# .NET with the following refactored code:
The code would be the same for an image or animated notification, with the only difference within the anonymous method block, for customizing the XML document template.
You can download the project source code on GitHub by visiting the Windows 8 Live Tiles example project.