Live Tiles in Universal Windows Apps

Hello All,

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 URI in manifest and update your server code so that URI will get updated content from server,which displayed on tile in a scheduled time or you can just write a scheduled notification and provide some bunch of strings/images that you want to update on tile.



Periodic : Pull from URL 30m,60m,6h,12h,24h, accordingly you have to write logic to pull content from an url.

Local: Update from (foreground/background) app.

Push : Use push services and update tile badge.

• Sample code to update badge count:

void UpdateBageCount(int count)

{

     //make badge schema for tile

     var tileUpdateType = Windows.UI.Notifications.BadgeTemplateType.BadgeNumber;

     var xml = Windows.UI.Notifications.BadgeUpdateManager.GetTemplateContent(tileUpdateType);

     //Update element

     var tileElements = xml.GetElementsByTagName("badge");

     var tileElement = tileElements[0] as Windows.Data.Xml.Dom.XmlElement;

     tileElement.SetAttribute("value", count.ToString());

     //Send update to lock screen      var updateManager = Windows.UI.Notifications.BadgeUpdateManager.CreateBadgeUpdaterForApplication();

     var lockNotification = new Windows.UI.Notifications.BadgeNotification(xml);

     updateManager.Update(lockNotification);

 }

• Secondary Tile : You can define tiles within your application, and user can also do pin it to start screen.And on tapping this tile from start screen,app opens and user redirects to the page which is associated with this tile as per the code logic.Sample code below :)

           

async void CreateSecondaryTile(string tileId,string displayName,string arguments)

{

  var isPinned = Windows.UI.StartScreen.SecondaryTile.Exists(tileId);

  if (!isPinned)

  {

    var secTile = new Windows.UI.StartScreen.SecondaryTile(tileId)

    {

        DisplayName = displayName,

        Arguments = arguments

    };

    var success = await secTile.RequestCreateAsync();

  }

}

• Tile Templates : There are over 80 templates available you can choose from.
• Adaptive Templates : 

Size (TileSmall,TileMedium,TileWide,TileLarge (only for desktop))


<tile> <visual>

    <binding template="TileMedium">

      ...

    </binding>

    <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>

    <binding template="TileLarge">

      ...

    </binding>

  </visual>

</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.

...

<binding template="TileMedium" displayName="Pictures" branding="name">

  <group>

    <subgroup>

      <text hint-align="center">Mon</text>

      <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>

    <subgroup>

      <text hint-align="center">Tue</text>

      <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>

  </group>

</binding>

...

Background Image: You can change background image for the tile.
Peek Image : an image with moving animation over the tile title,move from top to bottom of the tile  and displays text information over it(also use hint-overlay on 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 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 clicked it. There is new property(arguments) in tile notification payload to pass.That can be captured via argument parameter of OnLaunchedEvent() of the app.