Live Tiles In Universal Windows Apps

Here I'm sharing some information on Live tiles in Windows Universal apps.

• Tile would be in 3 states
  
  Basic State : Contains a plate(container), app logo and short name (text).
  Semi-Live State : Contains plate, app logo, short name and badge.
  Live state : Contains plate, content(live text information),app logo, short name and badge.
  
  
• Updating tiles
  
  Scheduled
  Set template and tile with "ScheduledTileNotification". Either you define URL in manifest and update your Server code so that URL will get updated content from the Server, which is displayed on a tile in a scheduled time or you can just write a scheduled notification and provide some bunch of strings/images, which you want to update on the tile.
  
  
  
  Periodic : Pull from URL 30m, 60m, 6h, 12h, 24h and accordingly you have to write the logic to pull the content from a URL.
  Local: Update from (foreground/background) app.
  Push : Use Push Services and update the tile badge.
  
  
• Sample code to update the badge count:
  
  1. void UpdateBageCount(int count)
  2. {
  3. //make badge schema for tile
  4. var tileUpdateType = Windows.UI.Notifications.BadgeTemplateType.BadgeNumber;
  5. var xml = Windows.UI.Notifications.BadgeUpdateManager.GetTemplateContent(tileUpdateType);
  6. //Update element
  7. var tileElements = xml.GetElementsByTagName("badge");
  8. var tileElement = tileElements[0] as Windows.Data.Xml.Dom.XmlElement;
  9. tileElement.SetAttribute("value", count.ToString());
  10. //Send update to lock screen var updateManager = Windows.UI.Notifications.BadgeUpdateManager.CreateBadgeUpdaterForApplication();
  11. var lockNotification = new Windows.UI.Notifications.BadgeNotification(xml);
  12. updateManager.Update(lockNotification);
  13. }
• Secondary Tile
  You can define the tiles within your Application and user can also pin it to start the screen. On tapping this tile from the start screen, app opens and user is redirected to the page, which is associated with this tile, as per the code logic. Sample code is given below:
  
  1. async void CreateSecondaryTile(string tileId, string displayName, string arguments)
  2. {
  3. var isPinned = Windows.UI.StartScreen.SecondaryTile.Exists(tileId);
  4. if (!isPinned) {
  5. var secTile = new Windows.UI.StartScreen.SecondaryTile(tileId) {
  6. DisplayName = displayName,
  7. Arguments = arguments
  8. };
  9. var success = await secTile.RequestCreateAsync();
  10. }
  11. }
• Tile Templates : There are over 80 templates, available to you, from which you can choose.
  
  
• Adaptive Templates
  
  Size (TileSmall,TileMedium,TileWide,TileLarge (only for desktop))
  
  1. <tile>
  2. <visual>
  3. <binding template="TileMedium"> ... </binding>
  4. <binding template="TileWide"> <text hint-style="subtitle">Ravindra Singh</text> <text hint-style="captionSubtle">Article on Technet</text> <text hint-style="captionSubtle">Check out my article on Technet Wiki</text> </binding>
  5. <binding template="TileLarge"> ... </binding>
  6. </visual>
  7. </tile>
  You can control the branding on the bottom of a live tile (the display name and corner logo) by using the branding attribute on the notification payload. You can choose to display "none," only the "name," only the "logo," or both with "nameAndLogo." Windows Phone doesn't support the corner logo, so "logo" and "nameAndLogo" default to "name" on phone. Groups and Subgroups:
  
  
  
  Images: You can do alignment, marging, cropping of the image on a tile.
  
  1. <binding template="TileMedium" displayName="Pictures" branding="name">
  2. <group>
  3. <subgroup> <text hint-align="center">Mon</text>
  4. <image src="Assets\Apps\MyPics\FrontPic.png" hint-removeMargin="true" /> <text hint-align="center">60px</text> <text hint-style="captionsubtle" hint-align="center">90px</text> </subgroup>
  5. <subgroup> <text hint-align="center">Tue</text>
  6. <image src="Assets\Apps\MyPics\face.png" hint-removeMargin="true" /> <text hint-align="center">66px</text> <text hint-style="captionSubtle" hint-align="center">90px</text> </subgroup>
  7. </group>
  8. </binding>
  Background Image: You can change the background image for the tile.
  
  Peek Image : An image with the moving animation over the tile title. Move from top to bottom of the tile and display the text information over it(also use hint-overlay on the peek image).
  
  
• XAMLRenderingBackgroundTask
  This special background task used to be phone-specific, but now it is supported on desktop too. XamlRenderingBackgroundTask allows you to render XAML trees as a bitmap from a background task, often to generate the custom tiles. If adaptive can’t achieve what you want on a tile, this is an option.
  
  
• Chaseable Live Tiles
  Apps can now know what tile notifications were displayed on their tile, when the user clicks it. There is a new property (arguments) in tile notification payload to pass. It can be captured via argument parameter of OnLaunchedEvent() of the app.