[CF] Développement Mobile – Gérer la résolution de l’application – Compact Framework 3.5

Après plusieurs mois d’absence, me revoilà pour vous parler de mon nouveau projet qui est le développement sur Windows Phone et son compact Framework.

Actuellement, nous disposons de plusieurs API ou Framework, nous permettant de rendre nos applications sexy mais aussi d’exploiter le plus facilement possible l’effet tactile de nos téléphones. C’est fini l’époque des applications mobiles fixes et sans effets.

upgrade_vista_vista_screen_marketplacejpg

Il est vrai que le but d’un programme mobile est de faciliter la vie de l’utilisateur, le plus simplement possible. Cependant, avec l’avènement des nouveaux téléphones, plus performants et de plus en plus tactiles, il faut s’adapter aux nouvelles technologies afin de répondre à cette demande. C’est ce qui fera la différence sur le Marketplace par exemple.

Au cours des différents articles, nous allons voir :

· L’UI Framework : comme vous l’aurez deviné, il s’agit d’un Framework très facile d’utilisation permettant de faire une interface digne de ce nom.

· La Gesture API: permet de gérer le tactile du téléphone.

Voilà le programme, il y a de quoi faire !

Avant toutes choses, l’article suivant vous expliquera certains paramètres à prendre en compte avant de commencer à développer. Il s’agit de la gestion du placement des objets sur l’écran, car chaque téléphone peut avoir une résolution différente.
Je vous montrerai également quelques événements importants à prendre en compte, comme le retour sous Windows ainsi que le passage en landscape du téléphone.

Commençons tout de suite ici par la gestion de la résolution.

Nos téléphones Windows Phone sont la plupart du temps différents au niveau de la résolution, nous pouvons cependant distinguer 2 types à prendre en compte les VGA (480×640) et QVGA (240×320). Beaucoup d’applications sont proposées en 2 versions.

Avec l’arrivée du MarketPlace, le shop d’applications pour mobile, il faut faire attention.Une validation payante et par version de notre application est effectuée.Trouver une solwindows-phone-logoution pour ne créer qu’une seul version pourra vous faire gagner du temps et de l’argent.

De plus, beaucoup de téléphones ont encore des résolutions différentes (WVGA, QWVGA, etc..).  A part si vous développer pour un téléphone spécifique, il est donc impossible de placer nos objets de façon fixe dans une fenêtre.

Il existe une méthode simple suivi de mathématique pour pouvoir remédier à ça.

Si ce n’est pas fait, ajouter le namespace : System.Windows.Forms;

using System.Windows.Forms;

Ensuite vous pouvez accéder à une variable de type rectangle :

Rectangle systemScreen = Screen.PrimaryScreen.WorkingArea;

Vous avez maintenant, au lancement du programme, la résolution de l’écran par un simple :

systemScreen.Height / systemScreen.Width

Vous pouvez également faire directement : Screen.PrimaryScreen.Bounds.Width pour la largeur ou Screen.PrimaryScreen.Bounds.Height pour la hauteur.

Une fois la résolution définie, vous pouvez maintenant placer vos objet par le biais de division, simple non ?

Prenons un papier et un stylo et coupons notre future application :clip_image001

Nous souhaitons ici placer 6 lignes d’éléments sur 4 de manière fixe, sans utiliser de ScrollBar.

Que ce soit un écran VGA, QVGA ou même Square, le placement se fera correctement.

Nous plaçons alors les deux premiers boutons :

public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
Rectangle systemScreen = Screen.PrimaryScreen.WorkingArea;
this.button1.Top = systemScreen.Height / 3;
this.button1.Left = systemScreen.Width / 2;
this.button1.Height = systemScreen.Height / 9;
this.button1.Width = systemScreen.Width / 4;

this.button2.Top = systemScreen.Height / 2;
this.button2.Left = systemScreen.Width / 3;
this.button2.Height = systemScreen.Height / 9;
this.button2.Width = systemScreen.Width / 4;

}
}

Les boutons seront où ?

clip_image002

Gagné.

La preuve en image sur différents résolutions:

clip_image004

clip_image006

 


                   VGA / QVGA                                                 
 Square

A vous ensuite de gérer la largeur / hauteur pour permettre de tout placer.

Voilà, j’espère que vous avez compris, un peu de réflexion vous permettra de placer vos objets pour n’importe quelle résolution.

Le prochain article vous exposera quelques événements à prendre en compte pour le développement.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

%d blogueurs aiment cette page :