Platinum Partner
architects,mobile,tool,.net & windows,windows phone,windows phone 8

Windows Phone 8 Iconic Tile Image Size Comparison

Based on the discussion on StackOverflow, I decided to test out the different IconicTileTemplate sizes. The idea was to try to find out:

  1. What are the correct dimensions for images used in the IconicTileTemplate
  2. What image is used when the iconic tile is in wide mode

The test images

I used the free Syncfusion Metro Studio to create the following images (the actual images have a transparent background):

110x110 pixels

image

202x202 pixels

image

132x202 pixels:

image

72x110 pixels:

image

72x72 pixels:

image

The emulator

I used the 720p emulator to run the tests.

Test run #1

image

  • Small tile: 110x110
  • Medium tile: 202x202
  • Support for large tiles enabled

Results:

The medium tile image is used when the tile is in default size:

image

The small tile image is used when the tile is in small size:

image

The medium tile image is used when the tile is in wide mode:

image

When the tile is in wide mode and it has large content set, the small tile image is used:

image

Test run #2

image

  • Small tile: 72x110
  • Medium tile: 132x202
  • Support for large tiles enabled

Results:

The medium tile image is used when the tile is in default size:

image

The small tile image is used when the tile is in small size:

image

The medium tile image is used when the tile is in wide mode:

image

When the tile is in wide mode and it has large content set, the small tile image is used:

image

Test run #3

image

  • Small tile: 72x72
  • Medium tile: 132x202
  • Support for large tiles enabled

Results:

Tile in wide mode, large content set:

image

Conclusion

The first question was: What are the correct dimensions for images used in the IconicTileTemplate?

As the answer on StackOverflow points out, the images used in IconicTileTemplate should have the following sizes:

  • Small: 72x110
  • Medium: 132x202

When we compare the 132x202 and 202x202 images, the difference is quite minimal: The latter one looks maybe more natural (more like the 1st party apps) and it’s smaller, but both the tiles have the correct aspect ratios:

image

The largest difference can be found when the tile is in wide mode and the tile has content. In these situations the Small image is used. Here’s a screenshot again with 110x110 image:

image

And here’s the one with 72x110:

image

And for comparison, this is the one with 72x72:

image

Only the 72x110 looks correct.

The second question was: What image is used when the iconic tile is in wide mode?

The answer depends on whether your tile has content set or not:

  • Without content: The medium tile image is displayed.
  • With content: The small tile image is displayed.

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}