The IconWithBadge template displays a small image in the center of the Tile, and incorporates Windows Phone design principles. And now in Windows 10, it is supported on both phone and desktop.
This documentation has been updated for Version 1511 of Windows 10. You can view the archived documentation here.
Quickstart: How to create an iconic Tile
The following steps will walk you through everything needed to create an iconic Tile for Windows 10. Essentially, you first need your iconic image asset, and then you need to send a notification to the tile using the iconic template, and finally you send a badge notification providing the number to be displayed.
Step 1: Create your image assets
Create icon assets for your iconic tile, and place it in your project resources like your other assets. Read the section below for more info about the image resolution sizes. At the least, create a 200×300 icon, which will work for both your Small and Medium tile.
The following image describes sizing info for the iconic image assets in Windows 10.
Note: In the first version of Windows 10 (10240), Desktop only supported square assets (200×200).
Note: Mobile displays all non-transparent pixels as white. Thus, use a transparent PNG and keep in mind that any color in your image will be stripped out and simply displayed as white.
Step 2: Create your base Tile
You can use the iconic template on both primary and secondary Tiles. If you’re using it on a secondary Tile, you’ll first have to create the secondary Tile or use an already pinned secondary Tile. Primary tiles are implicitly pinned and can always be sent notifications.
Step 3: Send a Tile notification to your Tile
Depending on whether you’re sending the notification locally or via push, these steps may vary. However, the XML payload you send is identical in either case.
To send a local Tile notification, create a TileUpdater for your tile (either primary or secondary), and then send a notification to the tile that uses the iconic tile template as seen below (ideally you should also include bindings for wide and large tile sizes, using adaptive Tile templates).
<tile> <visual> <binding template="TileSquare150x150IconWithBadge"> <image id="1" src="Iconic.png" alt="alt text"/> </binding> <binding template="TileSquare71x71IconWithBadge"> <image id="1" src="Iconic.png" alt="alt text"/> </binding> </visual> </tile>
This iconic tile template XML payload uses an image element that points to the image you originally created in Step 1.
Now your tile is ready to display the badge next to your icon! All that’s left is sending badge notifications.
Step 4: Send a Badge notification to your Tile
This step also depends on how you are sending your badge notifications. You can send badge notifications from your server via push, or locally from your app. Regardless, the XML payload you send is identical.
To send a local badge notification, create a BadgeUpdater for your tile (either primary or secondary), and then send a badge notification with your desired value (or clear the badge).
Your tile’s badge will update accordingly.
Putting it all together
The following image shows how the various API’s and payloads are associated with each aspect of the iconic Tile template. A tile notification (which contains those <binding> elements) is used to specify the iconic template and the image asset, a badge notification specifies the number value, and your tile’s display name, color, and more are controlled by the tile properties.