{"id":3239,"date":"2012-10-30T11:02:29","date_gmt":"2012-10-30T09:02:29","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=3239"},"modified":"2020-01-25T19:43:21","modified_gmt":"2020-01-25T18:43:21","slug":"from-windows-to-tiles-a-tutorial-on-live-tiles-and-badges","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/from-windows-to-tiles-a-tutorial-on-live-tiles-and-badges\/","title":{"rendered":"From windows to tiles: A tutorial on live tiles & badges"},"content":{"rendered":"

<\/p>\n

This blog post seeks to demonstrate the capabilities of Windows 8 \u201clive tiles\u201d and \u201cbadges\u201d as initially introduced in Microsoft\u00b4s design language Modern UI (also referred to as Metro UI). Being one of the most defining UI elements in Modern UI style, the concept of (live) tiles should be worth looking at a bit closer.
\n<\/p>\n

Introduction<\/h3>\n

Already introduced in Windows Phone 7, the concept of \u201c(live) tiles\u201d has also been adopted in Windows 8 and thus applies regardless of whether our target platform is a mobile device (such as a Windows 8 phone or a corresponding tablet like the Microsoft Surface) or a Personal Computer. The term \u201ctile\u201d defines a rectangular button capable of displaying images, textual content and so-called \u201cbadges\u201d. In this context, a badge may be either a small icon or a numeric value that is displayed in the bottom-right corner of a tile. The term \u201clive\u201d tile implies that the contents displayed by a tile may be updated dynamically during runtime. Taking into account both badges and a tile\u00b4s capability to change its appearance dynamically, Microsoft provides a mighty new feature enabling developers to keep the user updated about an application\u2019s status even if the application itself is terminated or suspended.<\/p>\n

\"\"<\/a>

A tile displaying its application\u00b4s name (bottom-left corner), two dynamically set strings (lines at the top) and a badge notification (bottom-right corner)<\/p><\/div>\n

Tutorial<\/h3>\n

Microsoft allows us to provide tile images for three purposes:<\/p>\n

    \n
  1. a square logo (150×150 px recommended by Microsoft) that will be displayed on the start screen<\/li>\n
  2. a wide logo (310×150 px recommended by Microsoft) that will be displayed on the start screen when switched to wide view mode and<\/li>\n
  3. a small logo (30×30 px recommended by Microsoft) that will be displayed while being zoomed out.<\/li>\n<\/ol>\n

    \"\"<\/a>
    \n <\/p>\n

    \"\"<\/a>
    \n <\/p>\n

    \"\"<\/a>
    \n <\/p>\n

     <\/p>\n

     <\/p>\n

    So as a first step, let\u00b4s create a new Windows Store Application (blank) and subsequently open the auto-created Package.appxmanifest. You may find that there is no image specified for the \u201cwide\u201d logo \u2013 so let\u00b4s define which image to display here.<\/p>\n

    If you run your application now and switch back to the Start screen, you might notice that your application\u00b4s tile is still being displayed in a square format. Switching to the wide view may be done by right-clicking on your tile and selecting the respective layout.<\/p>\n

    The possibility to provide a wide tile becomes more interesting when we consider a customization of our application\u00b4s tile: so now, let\u00b4s add some functionality to update our tile\u00b4s appearance from within our program. Therefore, we will add a TextBox to our MainPage and add a custom TextChanged Event Handler.<\/p>\n

    <<\/span>TextBox<\/span> TextChanged<\/span>=\"UpdateTile\"<\/span> Width<\/span>=\"300\"<\/span> Height<\/span>=\"30\"<\/span> \/><\/span><\/pre>\n
    Please note, that declaring an event handler in a view\u00b4s code-behind is a bad practice and is only applied here for showcasing purposes. Particularly with regard to serious software development, the actual handling functionality would rather be defined in a view model instead. If you are interested in reading more about the appliance of MVVM on Windows RT, we recommend you to have a look at our porting case study<\/a>.<\/p>\n
    Our aim is to implement a TextBox that auto-updates the application\u00b4s tile with the current content of its Text Property. Therefore, we are going to implement the respective handler as follows:<\/p>\n
    private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   String txtContent = ((TextBox)sender).Text;\r\n}\r\n<\/pre>\n
    Primarily, we will obtain an XML-formatted template to enrich with our value afterwards. Please note, that Microsoft provides a limited set of possible template types<\/a> . As we want to display one line of text on a wide tile, we will choose TileWideText01 which allows us to display one header line followed by 4 smaller ones.<\/p>\n
    private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   String txtContent = ((TextBox)sender).Text;\r\n   var<\/span> xmlTemplate = TileUpdateManager.GetTemplateContent(\r\n      TileTemplateType.TileWideText01);\r\n}\r\n<\/pre>\n
    The method call above will return some XML in the following format:<\/p>\n
    <<\/span>tile<\/span>><\/span>\r\n    <<\/span>visual<\/span>><\/span>\r\n        <<\/span>binding<\/span> template<\/span>=\"TileWideText01\"<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"1\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"2\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"3\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"4\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"5\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n        <\/<\/span>binding<\/span>><\/span>\r\n    <\/<\/span>visual<\/span>><\/span>\r\n<\/<\/span>tile<\/span>><\/span><\/pre>\n
    That being said, it becomes clear that we need to set the values of the \u201ctext\u201d nodes. Therefore, we will firstly obtain references to all such nodes and consequently append our TextBox\u00b4 content to the first one:<\/p>\n
    private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   String txtContent = ((TextBox)sender).Text;\r\n   var<\/span> xmlTemplate = TileUpdateManager.GetTemplateContent(\r\n      TileTemplateType.TileWideText01);\r\n   var<\/span> textNodes = xmlTemplate.GetElementsByTagName(\"text\"<\/span>);\r\n   textNodes[0].AppendChild(xmlTemplate.CreateTextNode(txtContent));\r\n}<\/pre>\n
    As a result, we now have enriched the previously received XML\u00b4s DOM with our desired content. Assuming that our Text Boxes content would be \u201chello world\u201d, the resulting XML would look like the following:<\/p>\n
    <<\/span>tile<\/span>><\/span>\r\n    <<\/span>visual<\/span>><\/span>\r\n        <<\/span>binding<\/span> template<\/span>=\"TileWideText01\"<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"1\"<\/span>><\/span>hello world<\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"2\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"3\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"4\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n            <<\/span>text<\/span> id<\/span>=\"5\"<\/span>><\/<\/span>text<\/span>><\/span>\r\n        <\/<\/span>binding<\/span>><\/span>\r\n    <\/<\/span>visual<\/span>><\/span>\r\n<\/<\/span>tile<\/span>><\/span>\r\n<\/pre>\n
    The only thing left to do is sending this (modified ) XML data to the appropriate Tile Update Manager which triggers the update on our application\u00b4s tile:<\/p>\n
    private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   String txtContent = ((TextBox)sender).Text;\r\n   var<\/span> xmlTemplate = TileUpdateManager.GetTemplateContent(\r\n      TileTemplateType.TileWideText01);\r\n   var<\/span> textNodes = xmlTemplate.GetElementsByTagName(\"text\"<\/span>);\r\n   textNodes[0].AppendChild(xmlTemplate.CreateTextNode(txtContent));\r\n   var<\/span> tileNotification = new<\/span> TileNotification(xmlTemplate);\r\n   TileUpdateManager.CreateTileUpdaterForApplication().Update(\r\n      tileNotification);\r\n}\r\n<\/pre>\n
    Although starting a new instance of our application will demonstrate that our code is working, you may notice that there is still a certain issue: In our tile\u00b4s bottom-left corner our application\u00b4s name had been replaced by our application\u00b4s logo. Please note, that this is the standard setting when triggering tile updates. If we don\u00b4t want to display our logo at this position (for whatever reasons), we have two further options: we may display our application\u00b4s name (like before our update notification) or simply nothing. Taking into account a tile\u00b4s XML schema<\/a> it becomes apparent that we need to set the \u201cvisual\u201d node\u00b4s \u201cbranding\u201d attribute to an appropriate value to resist this default setting. Therefore, the respective \u201cbranding\u201d attribute expects either<\/p>\n
      \n
    1. \u201cnone\u201d,<\/li>\n
    2. \u201clogo\u201d or<\/li>\n
    3. \u201cname\u201d<\/li>\n<\/ol>\n
      as a value \u2013 attempts to trigger a tile update with different values will fail. The abovementioned default behavior applies only, if no \u201cbranding\u201d attribute had been specified. In our case, we want to display our application\u00b4s title instead of a logo, thus we require adding the following code:<\/p>\n
      private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   String txtContent = ((TextBox)sender).Text;\r\n   var<\/span> xmlTemplate = TileUpdateManager.GetTemplateContent(\r\n      TileTemplateType.TileWideText01);\r\n   var<\/span> textNodes = xmlTemplate.GetElementsByTagName(\"text\"<\/span>);\r\n   textNodes[0].AppendChild(xmlTemplate.CreateTextNode(txtContent));\r\n   var<\/span> brandingAttribute = xmlTemplate.CreateAttribute(\"branding\"<\/span>);\r\n   brandingAttribute.NodeValue = \"name\"<\/span>;\r\n   xmlTemplate.GetElementsByTagName(\"visual\"<\/span>)[0]\r\n      .Attributes\r\n      .SetNamedItem(brandingAttribute);\r\n   var<\/span> tileNotification = new<\/span> TileNotification(xmlTemplate);\r\n   TileUpdateManager.CreateTileUpdaterForApplication().Update(\r\n      tileNotification);\r\n}<\/pre>\n
      Applying such dynamic notifications on tiles may turn out to be a great feature to keep the user informed without having to open the actual application. For instance, we could imagine an application that synchronizes with a social media platform and thus provides information about friends\u00b4 status updates on its tile. Given this example, we may assume that social platforms generally not only allow posting one\u00b4s status, but also provide messaging functionality. Updating the entire tile not only on status updates but also on each received message would lead to a sensory overload and consequently confusion on behalf of the user. At the same time, it would be very convenient to be informed about new messages without having to actually launch the application itself. To facilitate notifying the user of events in a different way than updating the whole tile\u00b4s content, Microsoft introduced \u201dbadges\u201d. A badge is either a numeric value ranging from 1 to 99 or a so-called glyph, a tiny symbol. For the latter one Microsoft also provides a limited set of predefined images<\/a>.<\/p>\n
      First of all we should decide which badge type we want to use: in our case we want to notify our user of new messages, so let\u00b4s simply choose a glyph. Furthermore, we need to use an appropriate XML template once more:<\/p>\n
      private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   \u2026\r\n \r\n   var<\/span> badgeTemplate = BadgeUpdateManager\r\n      .GetTemplateContent(BadgeTemplateType.BadgeGlyph); \r\n}\r\n<\/pre>\n
      The obtained template\u00b4s structure will look like the following:<\/p>\n
      <<\/span>badge<\/span> value<\/span>=\"\"<\/span> \/><\/span><\/pre>\n
      Consequently, we just need to set the \u201cbadge\u201d node\u00b4s \u201cvalue\u201d attribute. As we want to inform our user about new items in his inbox, we will choose a simple envelope symbol:<\/p>\n
      private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   \u2026\r\n \r\n   var<\/span> badgeTemplate = BadgeUpdateManager\r\n      .GetTemplateContent(BadgeTemplateType.BadgeGlyph); \r\n   badgeTemplate.GetElementsByTagName(\"badge\"<\/span>)[0]\r\n      .Attributes\r\n      .GetNamedItem(\"value\"<\/span>)\r\n      .NodeValue = \"newMessage\"<\/span>;\r\n}<\/pre>\n
      Finally, we can submit our XML-formatted content to the respective Badge Update Manager which triggers the update on our application\u00b4s tile:<\/p>\n
      private<\/span> void<\/span> UpdateTile(object<\/span> sender, TextChangedEventArgs)\r\n{\r\n   \u2026\r\n \r\n   var<\/span> badgeTemplate = BadgeUpdateManager\r\n      .GetTemplateContent(BadgeTemplateType.BadgeGlyph); \r\n   badgeTemplate.GetElementsByTagName(\"badge\"<\/span>)[0]\r\n      .Attributes\r\n      .GetNamedItem(\"value\"<\/span>)\r\n      .NodeValue = \"newMessage\"<\/span>;\r\n   var<\/span> badgeNotification = new<\/span> BadgeNotification(badgeTemplate);\r\n   BadgeUpdateManager.CreateBadgeUpdaterForApplication()\r\n      .Update(badgeNotification);\r\n}<\/pre>\n
      Conclusion<\/h3>\n
      At the bottom-line, by introducing live tiles, Microsoft provides a great tool to make applications more usable. We may provide information to users without having to interrupt other applications (like popup messages and others) and without requiring users to actually launch the application itself. In a nutshell, the smart phone or tablet\u2019s start screen evolves to a dashboard that may help the user to stay informed without any interactions necessary.<\/p>\n
      On the flipside, developers should consider the negative impacts of tile notifications as well. I\u00b4m sure we all know about websites making extensive use of marquees, flashing buttons and other elements begging for attention. You don\u00b4t have to be a UI expert to know that this is a desperately wrong approach (see \u201cbanner blindness<\/a>\u201d). Similarly, developers should recapture the actual purpose of tile notifications and<\/p>\n
        \n
      1. only implement them when really needed and, if so,<\/li>\n
      2. implement them cautiously (how frequently must the tile be updated?).<\/li>\n<\/ol>\n
        Obviously, a Start screen consisting of 15 applications each updating its tile on a 5 second basis would rather remind of a slot machine than to represent a usable Start screen.<\/p>\n
        All trademarks or registered trademarks are properties of their respective owners.<\/span><\/p>\n","protected":false},"author":29,"featured_media":0,"template":"","tags":[195,460,194,35,197,196,189,208,210],"class_list":["post-3239","blog","type-blog","status-publish","hentry","tag-badge","tag-lab","tag-live-tile","tag-surface","tag-tile","tag-tutorial","tag-windows-8","tag-windows-rt","tag-winrt"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/3239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/29"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/3239\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=3239"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=3239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}