How to use Adaptive Tiles in Windows 10 Universal Apps.

Tile Notification is something which is very specific to windows store apps where the apps can let the user know the information straight form the start screen without even opening the app. In windows 8.1 we has some predefined tile templates which we used to display the information but we never has any option of creating our own layout. In windows 10 we have the option to set the Tile layout by our self and it is called Adaptive Tiles. Where the developer chose the content in tile and update the tile. We use XML to do it.

The following steps helps in creating the Adaptive live tiles for Windows 10.

 Related Read : Adaptive screen Sizing of your Windows 10 Universal Application

Step 1: Create the XML which will be used to update the Tile. In our sample, I have used a simple template for all four tile sizes, which displays the content and image side by side in wide tile and content and image top down in Large tile.

The below code helps in doing it.

Text elements are  grouped together to form a subgroup and added to the group. So each group is like a row in the tile when there are more groups and  the tile has no space then it just doesn’t display that group.

string adaptiveTile = "<tile>"
 + "<visual>"
 + "<binding template=\"TileSmall\">"
 + "<group>" 
 + "<subgroup>"
 + "<text hint-style=\"subtitle\">daily .net tips</text>"
 + "<text hint-style=\"subtle\">tips on .net</text>"
 + "</subgroup>"
 + "</group>"
 + "</binding>"
 + "<binding template=\"TileMedium\">"
 + "<group>"
 + "<subgroup>"
 + "<text hint-style=\"subtitle\">daily .net tips</text>"
 + "<text hint-style=\"subtle\">tips on .net</text>"
 + "</subgroup>"
 + "</group>"
 + "</binding>"
 + "<binding template=\"TileLarge\">"
 + "<group>"
 + "<subgroup>"
 + "<image src=\"https://dailydotnettips.com/wp-content/uploads/2013/08/DailyDotNETTips.png\" placement=\"inline\"/>"
 + "</subgroup>"
 + "</group>"
 + "<group>"
 + "<subgroup>"
 + "<text hint-style=\"subtitle\">daily .net tips</text>"
 + "<text hint-style=\"subtle\">tips on .net</text>"
 + "</subgroup>"
 + "</group>"
 + "</binding>"
 + "<binding template=\"TileWide\">"
 + "<group>"
 + "<subgroup hint-weight=\"50\">"
 + "<image src=\"https://dailydotnettips.com/wp-content/uploads/2013/08/DailyDotNETTips.png\" placement=\"inline\"/>"
 + "</subgroup>"
 + "<subgroup>"
 + "<text hint-style=\"subtitle\">daily .net tips</text>"
 + "<text hint-style=\"subtle\">tips on .net</text>"
 + "</subgroup>"
 + "</group>"
 + "</binding>"
 + "</visual>"
 + "</tile>";

Step 2: Create a XmlDocument object which is used to load the XML created.

Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();
tileDOM.LoadXml(adaptiveTile);

Step 3: Create a tile notification object by passing the created XmlDocument object as parameter to the TileNotification class.

TileNotification tile = new TileNotification(tileDOM);

Step 4:  Update the tile with the newly created layout.

TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

Now the Tile has been updated with the layout as specified in the XML.

Hope this post might have helped in creating the Adaptive tile in windows 10.