When Windows Phone 7 has been presented to the market, the very first aspect that taken the attention of the people were the tiles on the start screen. In those days I heard lot of comments on the argument, typically very positive or dramatically negative, but no matter if you like or hate them, there is not any doubt that tiles have been a key choice to give a remarkable differentiation from other existing platforms.
Windows 8 and the so-called metro-style interface, fully embraces and empowers the paradigm of tiles, replacing the old start menu with a start screen that make room to a wide number of tiles, especially targeted to the needs of the RT version of the operating system but equally present in the full version. One of the extension of the tile system in Windows 8 are badges, a parallel and tangent system that slightly intersects the tiles presenting special notifications on its surface, but that may also work on the main lock screen.
Understanding tiles
If tiles were only shortcuts to start an application, they does not differ a lot from a usual item in the start menu or in the main screen of another mobile platform. But tiles are strictly connected with two import concepts: notification and information. The first states that a tile is something of “connected” and is able to receive messages from the network or from background processes that change its aspect and content. On the other side a tile is also an information point that put on the start screen information the is usually handled by the target application but is important to the final user.
What is known for sure is that an application has at least a tile. This has to be declared in the app manifest and usually is a square of 150x150 pixels. Most of the times, if the tile is something more than a shortcut from the point of view of the application, it may also have a “wide” tile that is 310x150 pixels. To provide a tile to the app you have simply to fill a number of fields in the Package.appxmanifest file being very respectful of the required sizes.
The main tile is the very first entry point of the application but, after being run at least on time, it is able to spin-off a number of secondary tiles. A secondary tile has exactly the same features of the main and is able to start the application passing specific parameters that helps developers to identify a scope. A secondary tile may represents a category of news, an album of photos, a pinned location and so on. The addition of the secondary tile is ruled by the user that must confirm the action. Finally when the application is uninstalled the secondary tiles are also removed.
To add a secondary tile you may use the SecondaryTile class. A secondary tile has an id that is useful to refer to the same tile for update purposes:
1: Uri logo = new Uri("ms-appx:///Assets/square.png");
2: Uri wideLogo = new Uri("ms-appx:///Assets/wide.png");
3:
4: string args = "Argument=Silverlight";
5:
6: SecondaryTile secondaryTile = new SecondaryTile(
7: THE_TILE_ID, "XeDotNet: Silverlight", "Meetings about Silverlight", args,
8: TileOptions.ShowNameOnLogo | TileOptions.ShowNameOnWideLogo, logo, wideLogo);
9:
10: bool isPinned = await secondaryTile.RequestCreateForSelectionAsync(
11: BlankPage1.GetElementRect((FrameworkElement)sender),
12: Windows.UI.Popups.Placement.Default);
With the SecondaryTile class you can tune almost everything on the aspect of the tile. The tile asks for a title, presented on the tile surface, a description, an argument set expressed as a string and two images, one for the square aspect and the other for the wide aspect. The TileOptions enumerator let you change the appearance of the tile.
When the RequestCreateForSelectionAsync method is called the user is presented with a popup that asks a confirmation before to add the tile. If the user accept the tile is added but if he clicks outside of the popup the tile is not added.
Important to know is the use of the arguments passed to the tile constructor. This argument is received by the OnLaunched event in the App.xaml.cs file. Thanks to it you can redirect the application to specific pages answering the request of the user to navigate to the information displayed by the tile.
1: protected async override void OnLaunched(LaunchActivatedEventArgs args)
2: {
3: var rootFrame = new Frame();
4:
5: if (!string.IsNullOrEmpty(args.Arguments))
6: rootFrame.Navigate(typeof(DetailPage), args.Arguments);
7: else
8: rootFrame.Navigate(typeof(MainPage));
9:
10: Window.Current.Content = rootFrame;
11: }
Regular tiles and secondary tiles are not something of static. If the developer needs to display something of new from the running application, he can send a “message” to the tile using a well-known xml format. The xml allows to send both the tile formats at the same time but only one version for each is accepted. In the following example the xml represents an update for wide and square format at the same time:
1: <tile>
2: <visual>
3: <binding template='TileSquareText04'>
4: <text id='1'>This updates the square tile</text>
5: </binding>
6: <binding template='TileWideText03'>
7: <text id='1'>This updates the wide tile</text>
8: </binding>
9: </visual>
10: </tile>
This xml has an important parameter into it body, the “template” specified on the binding element. This parameter allows you to determine one of the predefined layouts allowed for your tile. The layouts (you can view them listed in this page http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx) allow a number of different combination of text and images, together with sizes of the tile. Here is the code to create a notification; I use a XDocument to easily generate the xml then a simple method convert it to the required XmlDocument:
1: private TileNotification CreateNotification()
2: {
3: XDocument document = new XDocument(
4: new XElement("tile",
5: new XElement("visual",
6: new XElement("binding",
7: new XAttribute("template", "TileSquareImage"),
8: new XElement("image",
9: new XAttribute("id", 1),
10: new XAttribute("src", "/Assets/boschin-square.jpg"),
11: new XAttribute("alt", "Andrea Boschin"))),
12:
13: new XElement("binding",
14: new XAttribute("template", "TileWideSmallImageAndText05"),
15: new XElement("image",
16: new XAttribute("id", 1),
17: new XAttribute("src", "/Assets/boschin-square.jpg"),
18: new XAttribute("alt", "Andrea Boschin")),
19: new XElement("text",
20: new XAttribute("id", 1),
21: new XText("Andrea Boschin")),
22: new XElement("text",
23: new XAttribute("id", 2),
24: new XText("MVP Silverlight"))))));
25:
26: XmlDocument xml = ToXmlDocument(document);
27:
28: TileNotification notification = new TileNotification(xml);
29: return notification;
30: }
Once you created the instance of TileNotification you can create a TileUpdater that is able to send the notification to the tile. The TileUpdateManager is able to create the updater whether you have to update the primary tile or a secondary. The sole difference is that with secondary tiles you have to provide a tile identifier:
1: private void bUpdatePrimary_Click(object sender, RoutedEventArgs e)
2: {
3: TileNotification notification = CreateNotification();
4: TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
5: updater.Update(notification);
6: }
7:
8: private void bUpdateSecondary_Click(object sender, RoutedEventArgs e)
9: {
10: TileNotification notification = CreateNotification();
11: TileUpdater updater = TileUpdateManager.CreateTileUpdaterForSecondaryTile(THE_TILE_ID);
12: updater.Update(notification);
13: }
If you need to dynamically generate your templates, the TileUpdateManager together with the TileTemplateType enumeration let you retrieve a template for each notification type. This way you can fill the template with your values and forget about the generation of XML. To retrieve the template you can use the following:
1: TileTemplateType tileTemplate = TileTemplateType.TileWideText03;
2: XmlDocument xml = TileUpdateManager.GetTemplateContent(tileTemplate);
When the xml has been updated you can create the notification and send it as explained before.
Using the notification queue
If you watch at the start screen, in a few you’ll understand that there is a missing scenario left. Lot of times applications are able to roll a number of messages in a single tile, and this works also if the application has not been started. What you are seeing is called “Update notification queue”. It is a scenario where tile manages a queue of up to 5 notifications that are rolled in a random order. The notification queue is a feature that usually is switched off by default and need to be activated. To activate the queue you have to send a single message to the TileUpdater as shown here:
1: TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
2: updater.EnableNotificationQueue(true);
Obviously you can send the same notification to the primary or to the secondary tiles and each one will be able to manage up to five notifications. After the queue has been enabled the notifications sent to the tile does not overwrite the previous but are enqueued. When the 5 notification limit is reached the older notification is removed and replaced by the new one. At this point the tile works rolling the notifications. Here is an example:
1: TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
2: updater.EnableNotificationQueue(true);
3:
4: TileNotification notification1 = CreateNotification("Andrea Boschin");
5: notification1.Tag = "NAME";
6: updater.Update(notification1);
7:
8: TileNotification notification2 = CreateNotification("MVP Silverlight");
9: notification2.Tag = "EXPERTISE";
10: updater.Update(notification2);
11:
12: TileNotification notification3 = CreateNotification("Metro Insider");
13: notification3.Tag = "OTHER";
14: updater.Update(notification3);
In this sample I’ve also assigned a TAG to each notification. Using the tag property enable the updating system to replace items in the queue. If you send notification with the same tag the latest will replace the previous if it is present in the queue. There is a number of ways to manage the tag. If you associate the tag to a group, you are able to manage each of the five notification in the queue separately and give to the user a better experience. A “group” may be a category of products, a topic, a location and other type of identifiers that can restrict the scope of your information.
Updating tiles in a real world
Updating a tile from inside the application running is for sure useful, but as you may understand the real advantage of tiles comes when you are able to update the tile from a background task or for something that happen on the network. Since the first scenario is still simple, given that you have a number of ways to start background tasks, the second type is much more complicated and involves the use of push notification. Both the arguments go out of the topic of the article and they will discussed in the following numbers, but be sure that these scenario are something that make metro-style application something of great.