[WP7] Panorama : du designer au développeur

Bonjour, et bienvenue sur notre blog pour ces premiers articles

Ça y est la RTM pour les développeurs est sortie et téléchargée! Elle apporte son lot de nouveautés, notamment l’intégration du système de pivot et de panorama.
Tout le monde commence à connaître le principe de panorama qui permet d’afficher les menus les uns à la suite des autres de manière horizontale. La page suivante apparaissant légèrement sur la droite du téléphone. Le tout formant une boucle permettant de passer rapidement du dernier écran au premier.
Ce nouveau style de présentation permet à Microsoft de se démarquer de la concurrence et de la navigation comme celle de l’iPhone, qui fonctionne sur le système de création de nouvelle page.

Voilà le petit rappel de fait, passons à la création.

Du côté designer :
Le principe de panorama facilite grandement, à mon avis, le travail du designer. Tout se fait à plat, les écrans les uns à la suite des autres

Le panorama se compose de 3 parties distinctes, le titre de l’application, le titre des sections, et le contenu des sections.
La police employée est Segoe WP, avec des variations suivants les parties :
– pour le titre, Segoe WP Light, 140 pt
– pour les titres de sections, Segoe WP Semilight 54pt
– pour le contenu, Segoe WP Semilight 24pt.

Pour ce qui est du background du panorama, il est conseillé d’opter pour une taille entre 800×480 et 800×1024. Le but étant d’assurer un temps de chargement minimal. Pensez à la lisibilité de votre texte, jouez sur les contrastes, préférez des tons proches et évitez les fonds surchargés de détails.

Veillez à respecter les proportions et les marges décrites dans le UI Design & Interaction Guide, elles prennent en compte l’utilisation des doigts (touche, double touche…), à faire des contrôles trop près les uns des autres, vous risquez de gêner l’utilisateur.

Le style panorama est pratique pour faire des présentations, il permet d’avoir un visuel global sur son projet.

Je vous ai concocté un fichier .psd (Photoshop) reprenant un exemple de template et sa découpe.
Et un autre reprenant tous les contrôles existants sur un seul fichier (slider, bouton, list view…) avec une archive contenant les polices : télécharger
WP7 GUI
Avec l’aide de ses deux fichiers vous serez capable de réaliser des designs de panorama assez rapidement.

Du côté développeur :
Tout aussi simple que pour le designer. Microsoft a vraiment facilité le développement en Silverlight pour son nouveau téléphone. Pas besoin d’être un cador du C# pour réaliser une application sympa.

Comment ça se passe ?
Tout d’abord ouvrez Microsoft Visual Studio 2010 Express for Windows Phone, la nouvelle version depuis la RTM.
Cliquez sur « New Project… », on s’aperçoit que la liste des choix s’est agrandie, avec notamment l’apparition de « Windows Phone Panorama Application, et Pivot Application ».
Pour le moment intéressons-nous  à l’application Panorama. Choisissez le nom de votre solution, et c’est partie !
De base VS se présente sous la forme de deux fenêtres, à gauche le designer avec le téléphone et à droite votre code. Avec cet exemple d’application on nous montre deux types de contenu possible : une liste d’item classique ou alors une liste agrémentée d’image devant chaque item. Pour visualiser vos différentes sections dans le designer, cliquez simplement sur la partie de code correspondante.
Un jeu d’enfant à partir de là de concevoir des applications simples. Le style, les marges sont déjà créées et ne demandent qu’à être utilisées.

Vous pouvez tester votre application dans l’émulateur du téléphone en appuyant sur F5, le premier lancement prend un peu de temps.
Dans votre application vous pouvez naviguer verticalement sur la première page pour visualiser tous les items, ou naviguer horizontalement pour passer à la page suivante.

Voilà pour le premier aperçu de votre application. Maintenant si vous désirez personnaliser votre application, commencez par changer le background. Demandez à votre designer préféré de vous en faire un et ajoutez le dans l’Explorer de solution.
Vous pouvez en faire autant avec le « SplashScreen » qui est l’écran de chargement.

Observons un peu le code.
Les différentes pages sont commentées par  < !–Panorama item one–> < !—Panorama item two–> …
Le code est indenté de telle manière qu’on repère rapidement les pages. Un simple copier-coller de ce bout de code permet de créer une nouvelle page intégrée dans le panorama. Ou rajouter un <controls:PanoramaItem>

Intéressons-nous maintenant au contenu du StackPanel
La première ligne de Textblock correspond au texte apparaissant dans le designer en plus gros (design one, two…). La deuxième ligne est pour le texte écrit en plus petit (le latin), cette ligne sert de légende.
On s’aperçoit que le style est défini par « PhoneTextExtraLargeStyle » pour la première ligne, et est facilement réutilisable pour tous vos textes.

Vous pouvez facilement éditer le template de l’application, mais ce n’est pas recommandé, il est préférable de respecter le design Metro créé pour le Windows Phone 7.

On a pu donc voir la facilité de mise en place du style panorama, aussi bien pour le designer que pour le développeur. Les outils mis à notre disposition correspondent bien avec nos attentes. Plus besoin de rajouter de dll.

Avant la RTM nous utilisions un code mis à notre disposition sur codeplex. Vous pouvez retrouver un article d’explication sur http://blogs.dotnet-france.com/gregoryc/

Pour notre prochain article nous expliquerons comment faire les tilts effects quand on maintient un bouton appuyé.

Par Hubert Casadepax

3 réponses à “[WP7] Panorama : du designer au développeur

  1. Super blog, et post très intéressant !
    J’ai hâte de lire la suite🙂

  2. Pingback: [WP7] Windows Phone 7 et les icônes | Onefor4

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 )

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 )

Photo Google+

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

Connexion à %s