UWP Grid view, 1st: the Tile Size

Introduction

There is no documentation on how the tiles in the start menu and the start screen are rendered, we see them everyday and we create apps with tiles everywhere, but adjusting the size makes me every time doubt about what value should they have or how to find it.

Source

To make the analysis, to know if the tile has a clip, is scaled, etc. I created the following png I used as the tile of an app:

square150x150logo-scale-200

Screenshots

To analyze the values of the tile sizes, I created screenshots from several desktops with different resolutions and I analyzed png mobile screenshots from different sources. After composing you have the following (always using no compression):

tilesizes

We realize that the tile is not clipped at all, it is always scaled. Also if you watch the screen with zoom you will appreciate the differences rendering the text, images, etc.

Interesting the tile size in desktop is always 100 real pixels in any resolution when the scale of the screen is 100%, and 125 real px in 125%. The logic is really easy to understand.

Now in mobile, we have 229 real pixels, where does this value come from?

Tile size in mobile

There are some basic rules that make appear this value:

  1. In this case we suppose the grid has 3 tiles width, each tile has Xt pixels.
  2. The base width for every mobile device is 360, all the sizes are multiple of that.
  3. The space on the sides (Xo) has to be bigger or equal to the space between tiles (Xi).

Applying the rules:

mobiletilesize.png

For a 360 width, the tile size (Xt) is 114, the space between (Xi) is 4 and Xo is 5.

A mobile phone with 720 pixels width is 2 times 360, that means double sizes, at least in theory, After making some screenshots and comparing you see there are some variations.

To finish this part, Here is the table with all the values I calculated for different mobile screen sizes:

mobilegrid.png

The formula is pretty accurate and is valid to help us to calculate the tile size for the grid view I will describe in the following post, because it has some tricks than just the rule I show here.

Grab the full screen resolution PDF with all the data: Tile sizes PDF

Here is the end of the first part, now it is explained in detail, in the next post I will details the size for a tile in an app inside a GridView control and why not simply use a VariableSizedGridView, it implies performance, virtualization and more.

Enjoy the article? Tips welcome

More about the UWP world, tips and tricks soon, enjoy @juanpaexpedite

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s