Iconic Tile template for Windows 10


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 200x300 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 (200x200).

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

XML Payload

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

XML Payload

<badge value="2"/>

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.

Comments (8)

  1. Benjamin says:

    Why are the two OS tiles different? What's the point of the universal app design if a Dev has to create two different tile icons for their universal apps? This really should be rectified. And I'd tend toward the design of the WP tile. It makes better use of the space available. The square asset of the Windows 10 tile is not a good use of the space available.

  2. andrewbares7 says:

    Hey Benjamin, thanks for the feedback.

    We are aware that we still haven't reached full unification. However, the fact that Desktop even supports this template is a step towards unification. Back on Windows 8.1, Desktop didn't even support this template at all.

    As for the slight visual difference (I agree the square aspect ratio on Desktop is less than optimal) - The square aspect ratio was simply all we could implement on Desktop in the given time. So it wasn't implemented perfectly. If more people actually use this template on Desktop, and complain about the square aspect ratio, then we might have incentive to fix it up. But right now, it's really only used on mobile (Messaging and Phone).

    As for providing two different tile icons for their universal apps - I would recommend simply providing the square 200x200 image as I said in the blog, since that'll work for both. Like I said, if desktop app devs start using this template, I'll be able to provide incentive that the shell team should fix this template on Desktop! Otherwise, we have bigger fish to fry.

    And also, this template is a rare special template. In general, we recommend using Adaptive Tile Templates, which you can read about on our blog in a previous post. Those are identical on phone and desktop.

  3. Onur says:

    Looking at these examples, you were also able to customize how bilge looks like. As you know badges by default are smaller and they are on the corner. I wonder if we can customize badges without using iconic templates. Is this documented?

  4. andrewbares7 says:

    @Onur - This template simply "customizes" where the badge is placed. It is the only template like that. You can't customize badges other than what you see here. The template is designed for this specific use case. Tell us what scenario you're trying to achieve and we might be able to help you, or we might be able to use it as motive to implement a feature to customize badge placement!

  5. Onur says:

    @Andrew: The default behavior of badges is just good. However if all you want to emphasize the badge data or all you have is the badge data itself, then you end up with a relatively empty tile and emphasis is on this very tiny badge number on the corner.

    The alternative is not to use badge but using a custom text and that is a good solution unless you decide to put the tile on the lock screen. Since in the lock screen all you can show is the badge itself, you can't avoid the badge.

    The other alternative is to use iconic templates you mention. However one of the main selling points of UWP is now we have adaptive tiles. Using iconic templates just for the sake of styling the badge, feels like going backwards.

    Finally, I asked in the other post, if we could use the badge only in the lock screen but not on the live tile, that would also present a solution for me. Since on the live tile I can show the number as text with the badge being invisible, and on the lock screen I show the badge. However I am not sure if this scenario is supported or not.

  6. andrewbares7 says:

    What do you want your tile to look like? Show us an example. I agree that using the old "150x150" templates is not optimal, but that's not a good reason to change something that works perfectly fine and really isn't that much of an inconvenience. We have bigger things to tackle. Plus, if you use our NotificationsExtensions.Win10 library, it'll automatically hide the template nonsense behind the scenes, and you don't even need to think about it. You don't even need to touch XML or know how it's constructed.

    And unfortunately no, if there's a badge, it'll be displayed on the tile. We don't provide a way to hide the badge from the tile.

  7. Alek says:

    Cannot use tile updater to update this tile:

    get this error:

    Cant convert NotificationExtensions.Tiles.TileContent to Windows.Data.xml.dom.xmldocument

    please provide samples on how to use the XMLpayload

  8. andrewbares7 says:

    @Alek - The documentation on NotificationsExtensions tells you how to use NotificationsExtensions: github.com/.../Tile-Notifications

    You have to use the GetXml() method on TileContent to retrieve the content as an XmlDocument, and then pass that to the TileNotification constructor.

Skip to main content