• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

Gérer les multiples résolutions

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Alors que Windows Phone 7.X ne supportait que des téléphones ayant la résolution 480x800, Windows Phone 8 permet maintenant de supporter 3 résolutions. Ceci est un avantage pour les utilisateurs qui peuvent ainsi avoir des téléphones avec des résolutions différentes, mais cela devient un inconvénient pour le développeur qui doit maintenant faire en sorte que son application fonctionne pour toutes les résolutions des appareils.

Voyons maintenant ce qu’il faut savoir.

Les différentes résolutions

Windows Phone 8 supporte trois résolutions :

Résolution

Taille

Format

WVGA

480x800

15/9

WXGA

768x1280

15/9

720p

720x1280

16/9

C’est aussi le cas de l’émulateur, que nous pouvons démarrer suivant plusieurs résolutions, en la changeant dans la liste déroulante, comme indiqué sur la figure suivante.

Les différentes résolutions de l'émulateur
Les différentes résolutions de l'émulateur

Voici à présent le même écran présenté dans les 3 différentes résolutions, avec de gauche à droite WVGA, WXGA et 720P (voir la figure suivante).

Le même écran dans les trois résolutions
Le même écran dans les trois résolutions

La première chose à remarquer est que le rendu est le même entre la résolution WVGA et WXGA, nonobstant la différence de résolution. En effet, le format étant le même, à savoir du 15/9 ième, Windows Phone prend automatiquement en charge la mise à l’échelle de la page et ramène finalement la résolution 768x1280 à une taille de 480x800.
Ce n’est par contre pas le cas pour la résolution 720p, qui est du 16/9 ième, et où la mise à l’échelle automatique donne du 480x853. On peut voir en effet sur la copie d’écran que nous avons un peu plus de choses qui sont affichés en bas du 720p.

Gérer plusieurs résolutions

Alors, comment gérer toutes ces belles résolutions ?

Vous aurez sûrement deviné que c’est grosso modo le même principe que pour les différentes orientations. Il y a plusieurs techniques pour gérer les résolutions :

  • Utiliser le redimensionnement automatique des contrôles, n’hésitez pas à utiliser l’étoile (*) dans les grilles ou la valeur auto, les alignements centrés, etc.

  • Faire un ajustement avec le code-behind.

  • Rediriger vers les bonnes pages ou utiliser les bons contrôles utilisateurs en fonction de la résolution.

  • Modifier l’état de la page en fonction de la résolution.

  • ...

La seule différence est qu’il ne faut pas le faire en réception à un événement de changement de taille, car en effet il est très rare qu’un téléphone puisse changer de taille d’écran en cours d’utilisation. ;) Par contre, il est possible de détecter la résolution au lancement de l’application afin de faire les ajustements adéquats.
Il suffit d’utiliser les propriétés présentes dans Application.Current.Host.Content, comme :

  • ActualHeight qui donne la hauteur de l’écran

  • ActualWidth qui donne la largeur de l’écran

  • ScaleFactor qui donne le facteur d'échelle

Et nous aurons pour chaque résolution, les valeurs suivantes :

Résolution

Hauteur

Largeur

Facteur d’échelle

WVGA

800

480

100

WXGA

800

480

160

720p

853

480

150

Ces valeurs vont donc nous permettre de détecter la résolution du téléphone.

Les images

Étant donné que nous avons différentes résolutions, il se pose la question des images. Mon image va-t-elle être jolie dans toutes les résolutions ?
La première idée tentante serait d’inclure 3 images différentes, chacune optimisée pour une résolution d’écran. Nous pourrions alors écrire un petit helper qui nous détecterait la résolution et nous permettrait de mettre la bonne image au bon moment :

public static class ResolutionHelper
{
    public static bool EstWvga
    {
        get { return Application.Current.Host.Content.ActualHeight == 800 && Application.Current.Host.Content.ScaleFactor == 100; }
    }

    public static bool EstWxga
    {
        get { return Application.Current.Host.Content.ScaleFactor == 160; }
    }

    public static bool Est720p
    {
        get { return Application.Current.Host.Content.ScaleFactor == 150; }
    }
}

Il serait ainsi facile de charger telle ou telle image en fonction de la résolution :

if (ResolutionHelper.EstWvga)
    MonImage.Source = new BitmapImage(new Uri("/Assets/Images/Wvga/fond.png", UriKind.Relative));
if (ResolutionHelper.EstWxga)
    MonImage.Source = new BitmapImage(new Uri("/Assets/Images/Wxga/fond.png", UriKind.Relative));
if (ResolutionHelper.Est720p)
    MonImage.Source = new BitmapImage(new Uri("/Assets/Images/720p/fond.png", UriKind.Relative));

C’est une bonne solution sauf que cela augmentera considérablement la taille de notre .xap et la consommation mémoire de notre application. Étant donné que le facteur est le même entre WVGA et WXGA, il est possible de n’inclure que les images optimisées pour la résolution WXGA et de laisser le système redimensionner automatiquement les images pour la résolution WVGA.
De même, si on peut faire en sorte de ne pas inclure d’images en 720p et que ce soit la mise en page qui soit légèrement différente pour cette résolution, c’est toujours une image en moins de gagnée dans le .xap final et en mémoire dans l’application. Cependant, il peut parfois être justifié d’inclure les images en différentes résolutions et d’utiliser notre petit helper.

À noter que nous pouvons utiliser notre helper pour choisir la bonne image dans le XAML également. Créons une nouvelle classe :

public class ChoisisseurImage
{
    public Uri MonImageDeFond
    {
        get
        {
            if (ResolutionHelper.EstWxga)
                return new Uri("/Assets/Images/Wxga/fond.png", UriKind.Relative);
            if (ResolutionHelper.Est720p)
                return new Uri("/Assets/Images/720p/fond.png", UriKind.Relative);
            return new Uri("/Assets/Images/Wvga/fond.png", UriKind.Relative);
        }
    }

    public Uri ImageRond
    {
        get
        {
            if (ResolutionHelper.EstWxga)
                return new Uri("/Assets/Images/Wxga/rond.png", UriKind.Relative);
            if (ResolutionHelper.Est720p)
                return new Uri("/Assets/Images/720p/rond.png", UriKind.Relative);
            return new Uri("/Assets/Images/Wvga/rond.png", UriKind.Relative);
        }
    }
}

Que nous allons déclarer en ressources de notre application :

<Application
    x:Class="DemoResolution.App"
    …
    xmlns:local="clr-namespace:DemoResolution">

    <Application.Resources>
        <local:ChoisisseurImage x:Key="ChoisisseurImageResource"/>
    </Application.Resources>

    […]
</Application>

Ainsi, nous pourrons utiliser cette ressource dans le XAML :

<Image Source="{Binding MonImageDeFond, Source={StaticResource ChoisisseurImageResource}}"/>
<Image Source="{Binding ImageRond, Source={StaticResource ChoisisseurImageResource}}"/>

L’image de l’écran d’accueil

Vous vous rappelez que nous avons vu comment ajouter une image pour notre écran d’accueil, le fameux splash screen ?
Vous pouvez également fournir des images de splash screen dans différentes résolutions, il suffit d’utiliser trois images dans les bonnes résolutions portant ces noms :

  • SplashScreenImage.Screen-WVGA.jpg

  • SplashScreenImage.Screen-WXGA.jpg

  • SplashScreenImage.Screen-720p.jpg

Vous devez quand même garder l’image SplashScreenImage.jpg qui est l’image par défaut.

  • Windows Phone 8 apporte 3 résolutions différentes que nous devons gérer en tant que développeur pour offrir la meilleure qualité d’application possible.

  • Les différentes stratégies pour gérer les résolutions multiples sont les mêmes que pour gérer les différentes orientations.

  • Il est possible d’utiliser des images de différentes résolutions dans son application mais gardez à l’esprit qu’elles occuperont de la mémoire et augmenteront la taille du .xap.

Exemple de certificat de réussite
Exemple de certificat de réussite