On me pose souvent des questions concernant les différentes marges applicables à l’univers Windows Phone. En l’occurrence, j’en suis toujours un peu étonné puisque les contrôles sont la plupart du temps responsifs et s’adaptent proportionnellement à l’écran qui les accueillent, ou alors fortement défini par les designers et développeurs. Quoiqu’il en soit, voici sous forme de petit rappel, les différentes résolutions possibles, ainsi que les marges associées à chaque profil d’affichage. Rappelons toutefois que les marges de l’écran d’accueil de Windows Phone sont définies par une multiplication par deux de la largeur de la gouttière (espace entre deux vignettes). Ainsi, pour une gouttière de 12 px, les marges seront de… 24 pixels. Ceci étant dit, il est rare que les templates de Visual Studio respectent dans le contexte applicatif ces marges là, comme nous allons le voir.

Par ailleurs, pour bénéficier des émulateurs en 1080p, le mieux est encore d’installer Visual Studio 2013 (avec le SDK pour Windows Phone) plus son update 2, vous permettant de pouvoir disposer des différents patrons d’affichage directement dans Blend pour Visual Studio.

Edit : Suite à un petit entretien avec Rudy Huyn, il apparaît que du côté du dev, ces marges sont toujours considérées comme fixes, mais qu’elles sont transformées par des multiplicateurs pour faire correspondre cette taille fixe aux différents plateaux de résolutions. C’est à prendre en compte lors du design de vos layouts, obligatoirement.  De plus, les mesures faites et présentées ici l’ont été avec la police Segoe, qui dispose d’une imprécision relative à cause de l’écart des caractères. Je présenterai donc aussi une estimation visuelle et une version précise des marges pour les différentes résolutions.

 

Pour mon 1520, en 1080p,

Donc en 1920x1080 pixel, le plateau vaut 225% la gouttière vaut 21 px. La marge native vaut donc 54 pixels, mais la marge dans le Template par défaut vaut 56 px. Le premier élément du header est positionné à 150 px du bord haut, avec une police en Segoe WP 13, 6 points. Le label du pivot est placé à 328 px du bord haut.

1080p

 

Pour un Lumia 1320, le HD720,

Ou, pour être précis en 1280x720 pixel, plateau de 150%,  la gouttière vaut 18 px. La marge native vaut donc 24 px x 150%= 36 pixels, mais la marge dans le Template par défaut vaut 37 px (donc assez proche, dans l’épaisseur du trait). Le premier élément du header est positionné à 110 px du bord haut, avec une police en Segoe WP 13, 6 points. Le label du pivot est placé à 228 px du bord haut.

720p

 

Si on adresse un Nokia 1020 ?

On change de format et on passe en 15:9eme sur du WXGA, bref du 1280x768 px. plateau de 160 %, la gouttière vaut 19 px. La marge exacte vaut donc 36 pixels, 38  mais la marge réelle en vaut 39 Le premier élément du header est positionné à 117 px du bord haut, avec une police en Segoe WP toujours en13, 6 points. Le label du pivot est placé à 242 px du bord haut.

WXGA

 

Et dans le cas d’un Nokia d’entrée de gamme…

…comme le Nokia 520, on est sur du WVGA, en 800x400 px. plateau de 100%, la gouttière vaut 12 px. La marge native vaut donc 24 pixels, mais la marge estimée dans le Template par défaut vaut 26 px ). Le premier élément du header est positionné à 73 px du bord haut, avec une police en Segoe WP. Le label du pivot est placé à 152 px du bord haut.

WVGA

 

Il en reste ?

Oui, on peut aussi trouver des résolutions moins courantes, comme le qHD, portant une résolution de 960x540 pixels, vraiment peu utilisé, ou encore le FWVGA, en 854x480 pixels, comme sur le Nokia 630. Mais pour cette résolution spécifique, issu de l’intégration des boutons physiques,même l’émulateur de Visual Studio ne propose aucun Template pour tester. le mieux est donc ici de reprendre le layout  800x480 ou WVGA.