Over a million developers have joined DZone.

Windows Phone 8 Iconic Tile Image Size Comparison

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

Topics:

Published at DZone with permission of Mikael Koskinen, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}