ree7

Depuis la sortie de Windows Phone 8, les terminaux peuvent avoir différentes résolutions d’écran, contrairement à l’obligatoire 800×480 sous Windows Phone 7.
Ces hautes résolutions sont encore pour l’instant réservées aux modèles haut de gamme (HTC 8X, Nokia Lumia 920), et l’on pourrait être tenté de garder nos habitudes de tester nos applis principalement en 800×480… mais ce serait dommage de priver les possesseurs d’écrans HD de l’extra-crisp pour lequel ils généralement allongé 100 ou 200€ de plus 😉

Source : MSDN

La MSDN propose un guide pour supporter les multiples résolutions ici : http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx

Je vais ajouter quelques tips pour vous permettre de tirer au mieux parti des écrans HD depuis vos applications existantes (WP7.1).
Premièrement, pour ce qui est des nouvelles tuiles (S/M/L pour WP7.8 et 8), la librairie Mangopollo de l’incontournable Rudy Huyn (disponible via NuGet) vous fera gagner un temps précieux.

Gardez à l’esprit que la taille tous les assets à changé (oui, c’est pénible mais c’est pour la bonne cause) :
– L’icône de votre application est désormais en 100×100 pixels
– La tuile taille Medium est désormais en 336×336 pixels (au lieu de 173×173). (Voir le guide concernant les http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206971(v=vs.105).aspx)

Source : MSDN

– La résolution des boutons de l’ApplicationBar augmente aussi et passe de 48×48 à 76×76. Nul besoin de garder les anciennes résolutions (si vous faites l’analogie avec les @2x des écrans rétina), l’OS fera la conversion vers les résolutions inférieures de lui même. Vous trouverez toutes les icônes classiques du système en haute résolution dans le dossier du SDK Windows Phone 8 : C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons.

Enfin, temps de parler de ce qui fait vraiment votre application : vos images !
Deux approches sont possibles :
– se baser sur la plus grande résolution possible et laisser le téléphone downsizer l’image. C’est totalement viable pour les assets de votre application embarqués dans le XAP (cela évite de dupliquer les images et par la même d’augmenter la taille de votre XAP).
– choisir dynamiquement l’image en fonction de la résolution de l’écran : c’est la meilleure approche pour les images téléchargées depuis le web, ceux qui ont un écran classique ne gâchent pas leur forfait data pour des pixels qu’ils ne verront pas tout en laissant les possesseurs d’écrans HD jouir de tous leurs pixels. Si tant est bien entendu que vous avez en face un webservice qui vous permet de télécharger vos assets dans différentes résolutions, mais ça c’est une autre histoire.

Et là problème : comment déterminer la taille d’image adéquate dans une application construite avec le SDK 7.1 ?
La reflection vient à la rescousse pour nous permettre d’accéder aux nouvelles propriétés du SDK 8.0 si tant est que l’application tourne sous Windows Phone 8. Voici une classe vous permettant de transformer des pixels logiques (800×480) en pixels réels :

	/// <remarks>
	/// This source is subject to the Microsoft Public License (Ms-PL).
	/// By Pierre Belin, @pleasereset - www.ree7.fr/blog
	/// </remarks>
	public class PhoneSDKUtils
	{
		private static readonly Version _targetedVersion8 = new Version(8, 0);
		private static readonly Version _targetedVersion78 = new Version(7, 10, 8858);

		private static int ScaleFactor = 100;

		static PhoneSDKUtils()
		{
			if (Environment.OSVersion.Version >= _targetedVersion8)
			{
				Type hostContentType = App.Current.Host.Content.GetType();
				object scaleFactorValue = hostContentType.GetProperty("ScaleFactor").GetValue(App.Current.Host.Content, null);
				ScaleFactor = (int)scaleFactorValue;
			}
		}

		/// <summary>
		/// Converts a logical pixels screen (800x480) size to real screen pixels size
		/// according to the current device's ScaleFactor
		/// </summary>
		public static int GetScreenPixelSize(int logicalSize)
		{
			return (logicalSize * ScaleFactor) / 100;
		}

		/// <summary>
		/// Converts a logical pixels screen (800x480) size to real screen pixels size
		/// according to the current device's ScaleFactor
		/// </summary>
		public static double GetScreenPixelSize(double logicalSize)
		{
			return (logicalSize * ScaleFactor) / 100.0;
		}
	}