Windows 8 and the future of XAML Part 6: Tiles, toasts and badges

Welcome to part 6 already in this Windows 8 series. Since the goal of this articles is bringing you in touch with all the important aspects of Windows 8 development, we need to dive into tiles.

The concepts of tiles

In Windows 8, due to the new way application lifetime management, only one application can be running at any point in time (except when the user has two applications side-by-side using snap view; in that case, two applications are running at the same time).

If an application wants to inform the user about an event or any update really, by default, it can only do so while it’s running in the foreground. Because this wouldn’t lead to a great user experience, Microsoft invented tiles. Tiles are the little blocks, pinned to the start screen. The image below shows some tiles.

While a tile is a way to launch an application, it can be much more. Users will pin applications they use most to their start screen. A tile can be made a live tile. A live tile is being updated with new information while the application is or isn’t running. Therefore, the tile can be seen as an extension of the application, allowing the developer to convey information while the application is not the foreground application (read: when it’s not running).

Like in Windows Phone 7, the start screen is a means of giving the user access to his most important info. Using a live tile, this becomes possible. The tile can be a way of engaging the user back in the application: imagine you’ve written an RSS application. Using a live tile, you can update the information shown in the start screen. When the user notices the article showing, it can result in a launch of the application.

Looking at the live tiles (and frankly, screenshots don’t do them justice), they may seem a bit complicated for developers to create at first sight. All the animations and different types that exist however, are all based on templates which are pure XML. Indeed, there’s no need to create tiles from scratch, Microsoft did the hard part. For developers, it’s just using these templates and Windows 8 will handle the rest. We’ll see these templates in a minute.

Tiles: basic ones and live ones

Let’s now look at how we can create these tiles. Up first, basic tiles.

Basic tiles

In Visual Studio, we can as a bare minimum, include the default tile, which is a square. When installing the application, the tile that’s shown by default is the square tile. It’s the user who can select that your application gets a wide tile. However, it’s up to the developer on the other hand to include a wide tile in Visual Studio as well. In the screenshot below, you can see the package manifest editor where we are selecting images. Notice that Visual Studio hints at what the sizes of these should be.

At this point, our application has a basic tile, which isn’t doing anything at all. It’s acting like an icon on the desktop basically. Below is the wide tile.

And here’s the square tile.

Both wide and square tiles can get updates. When receiving updates, tiles become live tiles.

Live tiles

Live tiles are where the fun begins. A live tile can display updates to the user. Below you can see a tile displaying different statuses.

It’s easy to understand that this way of displaying information extends the way the application works: in many apps, the information on the tile is some summary of the most important information of the application. Apart from text, tiles can also display images or a combination of the two.

To make a tile become a live tile, we need to send it a message. This message consists of XML in the form of a predefined template. Microsoft has included quite a few templates for both the square and the wide templates; below we can see a sample of this XML:

<tile>

  <visual version='1' lang='en-US'>

    <binding template='TileWideText03'>

      <text id='1'>Hello World! My very own tile notification

      </text>

    </binding>

    <binding template='TileSquareText04'>

      <text id='1'>Hello World! My very own tile notification

      </text>

    </binding>

  </visual>

</tile>

The template takes complete care of the display of the tile: rendering of the tile as well as all animations are done entirely based on the XML. We as developers don’t need to worry about these; the only thing we need to do is sending the tile updated XML. In a tile, we can include text (in some predefined fields in the XML) as well as images. Images can be *.png or *.jpg files (we’ve seen these in the above screenshots).

Let’s see how we can create a live tile. In this article, we are working with an application called “WorkingWithTiles”. The UI is very simple, it contains a few buttons which will trigger the execution of a tile update.

We can work with the raw XML (shown above) where we modify the XML and send that XML directly to the tile.

void UpdateTileWithText(string text)

{

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

}

In the code above, we first retrieve the content using the TileUpdateManager.GetTemplateContent. TileTemplateType is an enumeration that contains all templates. In the following lines, we replace the contents of the text field. Finally, we create a TileNotification instance, which in the next line is sent to the TileUpdateManager.

Below you can see the updated tile.

Now we’ll take a look at updating both text and an image. The code is similar although a bit longer since we are adding an image and text. Notice that we are also including the contents of the square tile here, since we don’t know if the user has a wide tile or a square tile pinned from our app.

void UpdateTileWithImage(string text, string imageSrc)

{

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    XmlNodeList imageElements = tileXml.GetElementsByTagName("image");

    XmlElement imageElement = (XmlElement)imageElements.Item(0);

    imageElement.SetAttribute("src", imageSrc);

    imageElement.SetAttribute("alt", "Image description");

    XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

    XmlNodeList squareImageElements = squareTileXml.GetElementsByTagName("image");

    XmlElement squareImageElement = (XmlElement)squareImageElements.Item(0);

    squareImageElement.SetAttribute("src", imageSrc);

    squareImageElement.SetAttribute("alt", "Image description");

    IXmlNode subnode = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);

    tileXml.GetElementsByTagName("visual").Item(0).AppendChild(subnode);

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

}

When we look at the start screen now, we’ll see the following tile.

Using the XML directly is maybe a bit cumbersome. In the SDK samples, a handy library is included called NotificationExtensions. This wraps the XML editing and gives us types to work with. The XML editing is abstracted away. Below you can see the code for the text -only tile update.

void UpdateTileWithTextExtensions(string text)

{

    ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();

    tileContent.TextHeadingWrap.Text = text;

    ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();

    squareContent.TextBodyWrap.Text = text;

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

}

And below is the tile update containing an image and text.

void UpdateTextAndImageExtensions(string text, string imageSrc)

{

    ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

    tileContent.TextCaptionWrap.Text = text;

    tileContent.Image.Src = imageSrc;

    tileContent.Image.Alt = "Web image";

    ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

    squareContent.Image.Src = imageSrc;

    squareContent.Image.Alt = "Web image";

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

}

As you can see, it’s much easier to work with these instead of directly editing the XML. The result is of course exactly the same.

Secondary tiles

By default, an app can only have a single tile. There are quite a few scenarios however where the user may want more than one tile of your application pinned to his start screen. Imagine you’re building a weather application. The user may want to pin to his start screen his current location but also the cities he’s to visit in the coming time. Or imagine you have again that RSS application. In such an app, a user may want to pin one or more RSS feeds so he gets notified about their updates on the start screen.

To cover this, we have secondary tiles. Such a tile works in the same way as a regular live tile, but it can be added to the start screen by the user from within the application. To be able to pin content, the developer however has to build in this option in the application (for example adding a Pin to Start button in the App Bar on the detail page of the weather for a city). Let’s look at this in some code.

private async void CreateSecondaryTile_Click_1(object sender, RoutedEventArgs e)

{

    Uri logo = new Uri("ms-appx:///assets/small.png");

    Uri smallLogo = new Uri("ms-appx:///assets/secondary.png");

    string tileActivationArguments = "timeTileWasPinned=" + DateTime.Now.ToLocalTime().ToString();

    // Create a 1x1 Secondary tile

    SecondaryTile secondaryTile = new SecondaryTile("AppSecondaryTile",

                                                    "Next webinar",

                                                    "",

                                                    tileActivationArguments,

                                                    TileOptions.ShowNameOnLogo,

                                                    smallLogo);

    secondaryTile.ForegroundText = ForegroundText.Light;

    bool isPinned = await secondaryTile.RequestCreateForSelectionAsync

        (GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Right);

}

Notice that it’s also possible to pass contextual information from the tile. It wouldn’t be a good experience if the user clicks the tile and arrives on the default landing page of the application. Creating a secondary tile is done by using asynchronous code, hence the use of the await/async pattern.

The user has to approve the secondary tile. This is done using the RequestCreateForSelectionAsync. The result of this is shown below.

If we run this code now, we get the following secondary tile.

Badges

Finally, as developers, we have the ability to display badges on the tile. A badge consists of a number between 0 and 99 or a glyph. The badge is an overlay on top of the tile. Adding a badge is done again using XML templates: by sending some XML to the tile (or to the secondary tile), the badge gets added to the tile. Let’s take a look at adding the badge from code. In here, we are updating the tile with a number.

void UpdateBadgeWithNumber(int number)

{

    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

}

The tile now looks as follows.

Now that we’ve seen tiles and their options, let’s look at notifications.

Notifications

A tile update isn’t guaranteed to be seen by the user. If our application has an important update to convey to the user, it might not be a good idea to just update the tile. In this case, it might be better to send a notification that the user will see on top of the running application. If you’ve been doing Windows Phone 7 development, you’ll probably recognize this pattern.

Like a tile, notifications are also built using XML templates. Because of the fact they are displayed over the running application, they are bound to get the user’s attention more quickly. Notifications aren’t permanent (they disappear automatically) and only 4 are shown at the same time. Just like with secondary tiles, it’s possible to pass context so that the user is brought automatically to the correct location within the application.

Notifications shouldn’t be used to spam the user though. Ultimately, the user remains in control: he can decide to turn off notifications for your app or for the entire system altogether. Therefore, don’t count on the fact that the user has seen the update!

Let’s add a notification message to the code now.

private void CreateToast()

{

    IToastNotificationContent toastContent = null;

    IToastText01 templateContent = ToastContentFactory.CreateToastText01();

    templateContent.TextBodyWrap.Text = "SilverlightShow webinar starts now!";

    toastContent = templateContent;

    ToastNotification toast = toastContent.CreateNotification();

    ToastNotificationManager.CreateToastNotifier().Show(toast);

}

Below you can see the notification being shown to the user.

If your toasts aren’t displaying, check that in the manifest declaration, this has been set to enabled.

Summary

In this article, we’ve looked at the different types of updates applications can send to the user. In the next article, we’ll focus on lifetime of Windows 8 applications.

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill is the author of “Silverlight 4 Data and Services Cookbook”. In 2012, the second edition, “Silverlight 5 Data and Services Cookbook” is released.

You can find his blog at www.snowball.be.

Twitter: @gillcleeren