Iconic Tile template for Windows Phone 8

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

The iconic template displays a small image in the center of the Tile, and incorporates Windows Phone design principles.

This template is specific to Windows Phone 8. For more info about Tiles in Windows Phone OS 7.1, see Windows Phone OS 7.1 Tile template.

Iconic Tile properties

The following image shows the API name associated with each aspect of the iconic Tile template. The IconicTileData class is used to update any of these properties.

Iconic Tile sizing info

The following image describes sizing info for the iconic Tile template.

Designing an iconic Tile

For more info about how to design a great looking iconic Tile, see Iconic Tile template design guidelines for Windows Phone.

Creating or updating an iconic Tile

You can create or update an iconic Tile using either XML or code. There’s no way to know which Tile size your customer has pinned to Start, so you should include all elements.

Creating or updating an iconic Tile using XML

The following code example shows how to create or update an iconic Tile using XML.

<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
  <wp:Tile Id="[Tile ID]" Template="IconicTile">
    <wp:SmallIconImage [Action="Clear"]>[small Tile size URI]</wp:SmallIconImage>
    <wp:IconImage Action="Clear">[medium/wide Tile size URI]</wp:IconImage>
    <wp:WideContent1 Action="Clear">[1st row of content]</wp:WideContent1>
    <wp:WideContent2 Action="Clear">[2nd row of content]</wp:WideContent2>
    <wp:WideContent3 Action="Clear">[3rd row of content]</wp:WideContent3>
    <wp:Count Action="Clear">[count]</wp:Count>
    <wp:Title Action="Clear">[title]</wp:Title>
    <wp:BackgroundColor Action="Clear">[hex ARGB format color]</wp:BackgroundColor>
  </wp:Tile>
</wp:Notification>

When creating or updating an iconic Tile using XML, the BackgroundColor element must be set as a hex ARGB format color. For example, <wp:BackgroundColor Action="Clear">#FF524742</wp:BackgroundColor>.

Important Note:
If the BackgroundColor element's color value does not begin with #FF, such as #FF524742, your custom background color will not display and the default theme color will display instead.

Creating or updating an iconic Tile using code

The following code example shows how to create or update an iconic Tile using C# code.

IconicTileData TileData = new IconicTileData()
{
   Title = "[title]",
   Count = [count],
   WideContent1 = "[1st row of content]",
   WideContent2 = "[2nd row of content]",
   WideContent3 = "[3rd row of content]",
   SmallIconImage = [small Tile size URI],
   IconImage = [medium/wide Tile size URI],
   BackgroundColor = [.NET color type of Tile]
};

When creating or updating an iconic Tile using C# code, the BackgroundColor property must be set as a .NET color type. For example, BackgroundColor = new Color{ A = 255, R = 0, G = 148, B = 255 }.

Important Note:
If you do not set the A parameter of the BackgroundColor property to 255, your custom background color will not display, and the default theme color will display instead.

Clearing an iconic Tile

To clear a value for a property in XML, set the Action attribute to Clear for that property. To clear a value for a property in code, set the value to an empty string.

Share via