Dynamics tiles with Windows 10

 

 

During this article, we will see in a first time what’s news with the dynamics tiles in comparison with Windows 8.1 and then we will have a look to the new formats of tiles we can create. Then we are going to see different way of creating tiles with concrete exemple.

The existing

Windows 8.1 gave us the opportunity to set up tiles that let the application notify the user with pending actions to do, like pending mail to read, new article or post, etc.

However the tiles format are mostly standard and we cannot customise then as we would like to. As we can see many of this formats are not supported by Windows Phone 8.1, which reduce possible choice when we do an application for phone and tablette.

Novelty

With the arrival of Windows 10, a brand new format of tile is offered to the developpers. The new tiles are more pleasant for the end user as they give a better view of the application. In order to help us creating those tiles, 2 tools exist today:

If we follow the information present on this page, we can create quickly our tiles.However, I am going to explain some points.

During this article I will just speak about construc tiles with XML.
So, if we look to the XML format, we can see that it has to have the following structure:

<tile>
 <visual>
  <binding />
  <binding />
 </visual>
</tile>

Tile

The node « tile » doesn’t bring any information except the fact that it defines an object of type « tile ».
The next node, carry the information « branding », which allows to display at the bottom of the tile a small text ans the logo.
In fact, « branding » is an enum which can take the following values:

  •  Auto : take the value define in the appxmanifest
  •  None : nothing to display
  •  Name : only the name will be display
  •  Logo : only the logo will be display
  •  NameAndLogo :  Name and logo of the application will be display, which implies to add the related image into the assets.

Pay attention, for mobil devices, the option Logo and NameAndLogo doesn’t exist! In the case you select this option, only the name will be display in both case.

Binding

Binding nodes are also important et bring another information which is the template of the tile. We can find all the template predefined here. The one which interest us more are the following ones:

  • TileMedium
  • TileSmall
  • TileWide
  • TileLarge

Those formats are the ones, we are mostly going to use from now.

Finally « binding » node can contains 3 kind of nodes:

<binding>
 <image />
 <text />
 <group >
  <subgroup/>
 </group>
</binding>

Image

The « image » node contains few information, but those permit to do new things!

<image src = string 
       placement? = "inline" | "background" | "peek" 
       alt? = string 
       addImageQuery? = boolean 
       hint-crop? = "none" | "circle" 
       hint-removeMargin? = boolean 
       hint-align? = "stretch" | "left" | "center" | "right" />

Among all those properties, I will only stop on « hint-crop » which allows you to put a circular mask above the image in order to get a circular picture starting from a square picture.

Text

For the « text » node, we have something more classic. In fact, only the « hint-style » property is new and can take the next values:

  • caption
  • captionSubtle
  • body
  • bodySubtle
  • base
  • baseSubtle
  • subtitle
  • subtitleSubtle
  • title
  • titleSubtle
  • titleNumeral
  • subheader
  • subheaderSubtle
  • subheaderNumeral
  • header
  • headerSubtle
  • headerNumber

Subgroup

Subgroup can contains images and text.

<subgroup hint-weight? = [0-100] 
          hint-textStacking? = "top" | "center" | "bottom" />

We can give it a height and also a method to stack the items it contains, a bit like a stackpanel in XAML.

Base Template

After this introduction, here is the base template to create your own tiles :

<tile>
 <visual>
  <binding template="TileSmall">
  </binding>
  <binding template="TileMedium">
  </binding>
  <binding template="TileWide">
  </binding>
  <binding template="TileLarge">
  </binding>
 </visual>
</tile>

Exemple

For the exemples, I choose to show the exemples from the MSDN:

<tile>
 <visual>
  <binding template="TileMedium"> ... </binding>
  <binding template="TileWide">
   <text hint-style="subtitle">Jennifer Parker</text>
   <text hint-style="captionSubtle">Photos from our trip</text>
   <text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
  </binding>
 <binding template="TileLarge"> ... </binding>
 </visual>
</tile>

And here a more complex exemple :

<tile>
 <visual displayName="Seattle" baseUri="Assets/Apps/Weather/">
  <binding template="TileSmall" hint-textStacking="center" hint-overlay="30">
   <image src="Mostly Cloudy-Background.jpg" placement="background"/>
   <text hint-style="body" hint-align="center">Mon</text>
   <text hint-style="base" hint-align="center">63°</text>
  </binding>
  <binding template="TileMedium" branding="name" hint-overlay="30">
   <image src="Mostly Cloudy-Background.jpg" placement="background"/>
   <group>
    <subgroup>
     <text hint-align="center">Mon</text>
     <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
     <text hint-align="center">63°</text>
     <text hint-style="captionSubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup>
     <text hint-align="center">Tue</text>
     <image src="Cloudy.png" hint-removeMargin="true"/>
     <text hint-align="center">57°</text>
     <text hint-style="captionSubtle" hint-align="center">38°</text>
    </subgroup>
   </group>
  </binding>
  <binding template="TileWide" branding="nameAndLogo" hint-overlay="30">
   <image src="Mostly Cloudy-Background.jpg" placement="background"/>
   <group>
    <subgroup hint-weight="1">
     <text hint-align="center">Mon</text>
     <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
     <text hint-align="center">63°</text>
     <text hint-style="captionSubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Tue</text>
     <image src="Cloudy.png" hint-removeMargin="true"/>
     <text hint-align="center">57°</text>
     <text hint-style="captionSubtle" hint-align="center">38°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Wed</text>
     <image src="Sunny.png" hint-removeMargin="true"/>
     <text hint-align="center">59°</text>
     <text hint-style="captionSubtle" hint-align="center">43°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Thu</text>
     <image src="Sunny.png" hint-removeMargin="true"/>
     <text hint-align="center">62°</text>
     <text hint-style="captionSubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Fri</text>
     <image src="Sunny.png" hint-removeMargin="true"/>
     <text hint-align="center">71°</text>
     <text hint-style="captionSubtle" hint-align="center">66°</text>
    </subgroup>
   </group>
  </binding>
  <binding template="TileLarge" branding="nameAndLogo" hint-overlay="30">
   <image src="Mostly Cloudy-Background.jpg" placement="background"/>
    <group>
     <subgroup hint-weight="30">
      <image src="Mostly Cloudy-Square.png"/>
     </subgroup>
     <subgroup>
      <text hint-style="base">Monday</text>
      <text>63° / 42°</text>
      <text hint-style="captionSubtle">20% chance of rain</text>
      <text hint-style="captionSubtle">Winds 5 mph NE</text>
     </subgroup>
    </group>
    <text/>
    <group>
    <subgroup hint-weight="1">
     <text hint-align="center">Tue</text>
     <image src="Cloudy.png"/>
     <text hint-align="center">57°</text>
     <text hint-style="captionSubtle" hint-align="center">38°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Wed</text>
     <image src="Sunny.png"/>
     <text hint-align="center">59°</text>
     <text hint-style="captionSubtle" hint-align="center">43°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Thu</text>
     <image src="Sunny.png"/>
     <text hint-align="center">62°</text>
     <text hint-style="captionSubtle" hint-align="center">42°</text>
    </subgroup>
    <subgroup hint-weight="1">
     <text hint-align="center">Fri</text>
     <image src="Sunny.png"/>
     <text hint-align="center">71°</text>
     <text hint-style="captionSubtle" hint-align="center">66°</text>
    </subgroup>
   </group>
  </binding>
 </visual>
</tile>

Which is going to give:

As we can see, it become easy to create tiles.

Using the xml

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.EnableNotificationQueue(true);
updater.Clear();
string xmlTemplate= « … »
Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();
tileDOM.LoadXml(xmlTemplate);
TileNotification tile = new TileNotification(tileDOM);
updater.Update(tile);

Doing so, you are able to create and consume you tile.

Within a backgroundTask

To be able to do this, you have to add a Windows Runtime component to your solution, and then add a new class in it. This class has to implement « IBackgroundTask »
Dans votre application, ajoutez une référence à votre backgroundTask.
In the appxmanifest, you need to add your backgroundtask in the « Declaration » tab. The type of the declaration will be « Timer ». Set up the « Entry point » corresponding to the namespace of your backgroundtask plus the name of your class.
To conclude, you have to register your task within the « app.xaml.cs », using this class for exemple :

public static class BackgroundTaskRegisterHelper
{
 public static async Task RegisterBackgroundTask(string taskName, string entryPoint)
 {
  try
  {
   BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();
   taskBuilder.Name = taskName;
   taskBuilder.TaskEntryPoint = entryPoint;
   taskBuilder.SetTrigger(new TimeTrigger(15, false));
   var registration = taskBuilder.Register();
  }
  catch(Exception ex)
  {
   throw ex;
  }
 }
 public static async Task UnregisterBackgroundTask(string taskName)
 {
  try
  {
   var backgroundAccessStatus = await BackgroundExecutionManager.RequestAccessAsync();
   if (backgroundAccessStatus == BackgroundAccessStatus.AlwaysAllowed ||
       backgroundAccessStatus == BackgroundAccessStatus.AllowedSubjectToSystemPolicy)
   {
    var task = BackgroundTaskRegistration.AllTasks.FirstOrDefault(t => t.Value.Name == taskName);
    task.Value.Unregister(true);
   }
  }
  catch(Exception ex)
  {
   throw ex;
  }
 }
}

For debugging, your backgroundTask will appears in the combobox of life cycle gestion. When you will select it, you will be able to enter your code.

Conclusion

In this article, I showed you how to create tiles only with XML. But don’t forget, it’s also possible to do this in C# using the extension. Don’t forget that tiles give more visibility to your application within the OS.

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s