Discussion :

[rolandl]

Bonjour,

Je développe actuellement une application pour Windows Phone 8 et j'ai quelques questions par rapport à la programmation multi-résolution que j'ai du mal à comprendre sur Windows Phone.

J'ai bien compris qu'il existe 3 résolutions d'écran pour Windows Phone 8 :

• 720p
• WVGA
• WXGA

J'ai cependant du mal à comprendre l'intérêt de ces 3 résolutions puisqu'au final, les applications semblent toujours exécutées en 480x800 ou 480x853 comme en témoigne le blog de Nokia dans cet article : http://www.developer.nokia.com/Commu...lti_resolution

J'ai du mal à comprendre l'intérêt d'embarquer plusieurs images (par exemple logo_720p.png qui a une largeur de 720px et logo_wvga.png qui a une largeur de 480px) si au final, l'affichage de la dite image avec un Strech à None sur un téléphone 720p sort de l'écran. Pour avoir le bon affichage, je suis obligé de préciser la largeur à 480px.

Pourquoi ne pas alors embarquer directement une image de haute qualité et indiquer sa largeur puisque si j'ai bien compris, la largeur de mon application sera au final toujours la même à savoir 480px ?

Merci d'avance pour vos illuminations.

[GuruuMeditation]

Ce n'est pas que la résolution est la même. Une application WP7 va avoir un scaline de 1.5 ou 1.6 pour que ça prenne tout la largeur de l'écran.

Si tu n'as qu'une seule résolution d'image, WP va faire le scaling de lui-même. Mais si tu as des versions 720,768 et 480, il n'y aura pas de scaling, donc meilleure qualité d'image (normalement)

[rolandl]

Bonsoir,

Tout d'abord merci pour la réponse. Mon problème est que dans la pratique, je n'ai pas le comportement que tu cites.

Je vais tenter d'expliquer le comportement que j'obtiens.

Tout d'abord, j'ai écrit quelques classes qui me permettent à l'aide d'un converter et de ses paramètres, de binder une image portant le nom "image.png". Le fichier "image-720p.png", "image-wxga.png" ou "image-wvga.png" est alors chargé suivant la résolution du téléphone.

A priori ça fonctionne bien. Dans l'éditeur qui visiblement est en 480x800, j'ai bien "image-wvga.png" qui s'affiche et sur un HTC 8.x qui est 720x1280, j'ai bien "image-720p.png" qui s'affiche.

Dans mon fichier xaml, la hauteur et la largeur de mon composant Image est en Auto, et je définis la propriété Strech à None.

Lorque je compile sur le téléphone, comme je le disais, c'est bien "image-720p.png" qui est s'affiche. Le problème c'est qu'elle ne s'affiche pas en entier. Elle est tronquée de chaque côté. L'image de 720 pixels de large semble donc trop grande.

Si cependant je précise la largeur de l'image à 480px, c'est bien "image-720p.png" qui est affichée et grâce à la propriété Strech à Fill, mon image s'affiche bien en entier.

Mais dans ce 2ème cas, c'est bien moi qui redimensionne mon image dans le designer et non le téléphone, ce qui revient finalement à mettre une seule image dont on fixe la taille comme en windows phone 7, bien qu'après l'image chargée ne soit pas exactement la même. Autant embarquer uniquement la meilleure image dans ce cas là.

Je pense donc que j'ai dû rater une étape. Comment alors afficher une image de 720px de large sans toucher aux propriétés largeur, hauteur et en indiquant un Strech à None ? Ou est-ce que j'ai faux ?

Merci d'avance pour votre aide !

[GuruuMeditation]

Bizarre. J'ai fais une mini app qui affiche une image différente suivant la résolution. Sur l'émulateur et mon Nokia 920, il choisi bien la bonne résolution, et toute l'image est visible :

http://www.guruumeditation.net/Media.../PhoneApp1.zip

[rolandl]

Bonjour,

Encore merci pour l'aide.

Je viens d'appliquer mon code sur votre projet. Effectivement, ça fonctionne si le Stretch est à Uniform. Dès lors qu'il est à None, l'image 720p est tronquée sur un HTC 8x.

Ça règle en partie mon problème. En effet, pour les images qui doivent prendre la largeur de mon écran, je peux donc mettre la propriété Strech à Uniform, ce qui me permet de ne pas indiquer de largeur.

Mais comment faire pour une image qui ne dois pas faire la largeur de l'écran ?

Prenons par exemple le morceau de code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<Grid x:Name="LayoutRoot" Background="" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
 
        <Grid Grid.Row="0">
            <Grid.Background>
                <ImageBrush ImageSource="/Assets/Background.png" Stretch="Uniform" />
            </Grid.Background>
            <Image Source="/Assets/Image.png" Stretch="Uniform" Margin="0,0,0,4" />
        </Grid>
 
        <!-- ... -->
</Grid>

J'ai simplifié le code, normalement, mon composant, via le binding dans les sources d'image est capable de récupérer la bonne image.

Avec le morceau de code suivant, le background du Grid fonctionne sans problème. En effet, l'image fait la largeur de l'écran (480, 720 ou 768) et grâce au Stretch uniform, elle s'adapte correctement.

Pour contre pour mon Image qui est placée dans le Grid, j'ai quelques problème. Pour la plus petite résolution, l'image fait 230px de large. Pour les résolution supérieure, mon image a une largeur de 415px et 443px.

Le problème est que je n'arrive pas à avoir sur un téléphone 720p le même résultat que sur le phone editor qui est en 480x800. En effet, peut importe le Strech (None, Fill ou Uniform), mon image est trop grande. Pour avoir le résultat souhaité, je suis obligé de préciser dans ma balise la largeur (dans mon cas 230) et de mettre le stretch à Uniform.

Dans ce cas précis, suis-je obligé de préciser la taille ou il y a-t-il un moyen de faire sans et d'avoir le même affichage partout avec différentes images ?

[GuruuMeditation]

J'ai peut-être capté le bazar...

Enlève le Height="Auto" à ton RowDefinition.

Le problème est que si c'est Auto, l'OS ne va jamais dire "hé, là, tu débordes alors arrête de faire un stretch" en hauteur. Il va bien stretcher la largeur, mais sans tenir compte si la hauteur est trop grande.

[rolandl]

Encore une fois, merci pour le temps passé à m'aider.

Parfois, le code parle un peu mieux que la description. Je vais tenter d'illustrer mon problème.

J'ai dans mon projet 6 images :

• back_720.png (720*372)
• back_WXGA.png (768*397)
• back_WVGA.png (480*207)
• img_720.png (415*370)
• img_WXGA.png (443*395)
• img_WVGA.png (230*205)

J'ai crée un converter qui me permet de binder l'image suivant la bonne dimension directement dans le XAML. Je ne vais pas détailler ici le fonctionnement, mais les classes sont disponibles dans le projet joint à ce message.

Voici alors mon fichier MainPage.xaml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <Grid Grid.Row="0" DataContext="object">
            <Grid.Background>
                <ImageBrush ImageSource="{Binding ConverterParameter=/Assets/back.png, Converter={StaticResource MultiResolutionImageConverter}}" Stretch="None"/>
            </Grid.Background>
            <Image Source="{Binding ConverterParameter=/Assets/img.png, Converter={StaticResource MultiResolutionImageConverter}}" DataContext="object" Margin="0,0,0,2" Stretch="None"/>
        </Grid>
    </Grid>

A aucun moment je ne précise la largeur ou la hauteur de mes images. Voici alors quelques captures d'écran. A chaque fois, je change le Strech aussi bien pour l'image que pour le background :



Finalement, ce que j'aimerais obtenir, c'est l'équivalent de la première image pour toutes les résolutions sans "hard coder" les hauteurs ou les largeurs comme préconisé dans la doc MSDN (http://msdn.microsoft.com/en-us/libr...vs.105%29.aspx), il est marqué :

To make a page render correctly on phones with WVGA, WXGA, and 720p resolutions, don’t hard-code the height and width or the margins of the controls. After you drag and drop controls from the Toolbox, delete or carefully test the Margins that were added automatically.

Voici un lien vers le projet si tu veux faire des tests avec mes images. J'ai vraiment du mal à comprendre comment faire sans "hard coder" les largeurs dans certains cas.

http://documents.rolandl.fr/forums/M...lutionTest.zip

[GuruuMeditation]

OK, je pense que je vois maintenant...

Je ne suis pas sûr qu'il y ait une solution simple.

Une piste à creuser, c'est de charger les images en asynchrone. Quand l'image est chargée et qu'on peut avoir la résolution, calculer la taille à afficher (en divisant la taille de l’image par le scaling factor) et binder l'image + propriétés Width et Height.

Si il y a un moyen plus simple je suis preneur. Pas encore eu ce problème mais ça risque d'arriver.

[DotNET74]

Si tu veux que ton image soit vraiment à 720 px il fatu la mettre dans un Canvas.

C'est ce que j'ai fini par faire pour mon application car comme toi la philosophie mise en place par MS me dépasse complètement sur ce sujet.

Après si tu utilises la pattern MVVM le canvas c'est un peu compliqué voir impossible !

C'est toujours afficher en 480x800 donc ça ne sert à rien d'avoir des résolutions supérieures ...

[GuruuMeditation]

Ce n'est pas affiché en 480*800. L'OS essaye de rendre le tout transparent pour le développeur. L'avantage est que le développeur ne doit rien faire de spécial pour gérer le multi-résolution. L'OS simule un 480*800 dans n'importe quelle résolution. Mais en coulisse, il y a un scaling qui se fait. Il y a donc une différence entre les pixels "logiques" qui sont de 480*800 et physiques qui peuvent être de 1024*768, par exemple

Pour les images, l'OS va dire que la taille est de 200px sous WVGA ou WXGA. Mais, en en fait, il va faire un scaling de 160% de l'image sur WXGA. Ce qui fait que parfois on voit des artéfacts.
(Soit dite en passant si ne veut mettre qu'une image, il vaut mieux mettre la plus haute résolution. Un downscaling est meilleur qu'un upscaling)

C'est bien quand tu as des templates fixes (style là il y a une image de 200px, la tu as une marge de 10px,etc....) car alors les proportions sont respectées automatiquement. Mais si tu veux du dynamique, comme ici, alors c'est galère.

Je pense que les apps sont plus souvent dans une optique template fixe (comme ça c'est consistant sur les différents devices) donc c'est un choix qui simplifie la vie en général. Mais complique dans les autres.

[rolandl]

Merci à toi pour ces réponses !

Ça m'a permis d'un peu mieux comprendre le principe