Adaptive Tile In Universal Windows Program

Tile is like an Icon; Windows OS wonderful features compared to others platform is used to the update the application status to the user without opening the application.

Example: Calendar application show the status of the event in the Tile.

Tile has been used for the following purpose:

1. Open the application from the start menu.
2. Update background status of the application in the tile, without opening the application user can see the status message.
3. Uninstall the application from start menu.

Based on the needs when the application runs in the foreground or background, we can update the status of the tile.

Tile is XML template, application give this template to the windows, windows process this template and create a tile menu & show in the start menu screen.

The different size of Tile:

1. Small
2. Medium
3. Wide
4. Large

Large: (support only Desktop version) (support only Desktop version)

Different size of the Tile is available, I need to implement all the tile size in the application? Answer is NO, why?; Because Wide and Large tile use only periodic status update for the application. If the application is not updated periodically no need to provide Wide and Large tile.

Note: Large tile is available only in the Desktop application.

Important API handling Tile

• TileUpdateManager: To get the default template or update the exiting template.
• TileNotification: Create a new notification.
• TileUpdater: Update the Notification

Basic: How to configure Tile in the application

Default Tile implemented, while creating Windows store application in VS (see: Package.appxmanifest file) each application must have the tile.

• Short Name: Display the Tile name in the windows start name.
• Show name: Specified the different size of the tile image, if not specified the size, it won’t be available in start menu and at least one size must be specified.
• Background Color: Specified background color of the tile.

Example: UWP Demo “Shot Name of the Tile” and icon display as Medium,
 


How to Change Tile notification

We can change the notification of the tile in a different way. In this example I used button click to change the tile notification.

Steps:

1. Request to the TileUpdateManager which template area you need to update like small, medium, wide.
   
   Example:
   

   var template = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150Text01);

2. Update the Notification message in the tile wide area.
   

   var childNode = template?.GetElementsByTagName("text");
   childNode[0].InnerText = “Welcome”;

3. Pass the template to the TileNotification class to create TileNotification object.
   

   TileNotification tileNotification = new TileNotification(template);

4. Update the TileNotification to the TileUpdateManager.
   

   TileUpdater updateMgr = TileUpdateManager.CreateTileUpdaterForApplication();
   updateMgr.Update(tileNotification);

   The above code handled in the button click event - please check it out in attached sample.
   
   

Adaptive Tile

Adaptive tile is a new feature in Windows 10, user(Developer) can create own template based on the device or application to display the Tile.

Two ways we can create Adaptive tile:

1. Using XML schema
2. Via programming language (C#)

Steps to create Adaptive Tile:

1. Create XML template or C# code.
2. Create a Tile Notification based on the template.
3. Update the Tile Updater

1. Create XML Schema

In XML, it should contains the <tile> <visual> <binding> tags. Remaining tag based on the template add to the XML template file.

Example: How to create the following template:



XML template

<tile>
    <visual>
        <binding template="TileWide" branding="nameAndLogo">
            <group>
                <subgroup hint-weight="26">
                    <image src="Assets/myimage.png" hint-crop="circle">
                </subgroup>
                <subgroup hint-textStacking="center">
                    <text hint-style="subtitle"> Hi C# Corner,</text>
                    <text hint-style="bodySubtle">Adaptive Tile</text>
                </subgroup>
            </group>
        </binding>
    </visual>
</tile>

private void CreateAdaptiveLayout()
{
    string xmltemplate = string.Empty;
    xmltemplate = "<tile><visual><binding template=\"TileWide\" branding=\"nameAndLogo\">";
    xmltemplate += "<group> <subgroup hint-weight = \"26\">";
    xmltemplate += "<image src=\"Assets/myimage.png\" hint-crop=\"circle\"/>";
    xmltemplate += "</subgroup> <subgroup hint-textStacking=\"center\">";
    xmltemplate += "<text hint-style=\"subtitle\"> Hi C# Corner,</text >";
    xmltemplate += "<text hint-style=\"bodySubtle\">Adaptive Tile</text> </subgroup> </group>";
    xmltemplate += "</binding></visual></tile>";
    Update(xmltemplate);
}

2. Create a Tile Notification based on the template

private void Update(string xmldocumentinfo)
{
   var xmldocument = new Windows.Data.Xml.Dom.XmlDocument();
   xmldocument.LoadXml(xmldocumentinfo);
   TileNotification tileNotification = new TileNotification(xmldocument); TileUpdater updateMgr = TileUpdateManager.CreateTileUpdaterForApplication();
   updateMgr.Update(tileNotification);
}

Programming language (C#):

Instead of XML, template can also be created via C# language.

Using C# to create template first we need to install the NotificationsExtensions in NuGet package.

NuGet install procedure: Visual studio, Tools, NuGet Package Manager, then Package Manager Console.



Command prompt type: Install-Package NotificationsExtensions.Win10



Example code: Creating Adaptive tile in C#