Expression Blend, les 10 bonnes raisons de l’utiliser : #1 \\ La Puissance du designer

blend_week1

Contrairement à ce que pensent un bon nombre de développeurs, Expression Blend n’est pas fait que pour les designers ! Si vous l’ouvrez, et commencez à éditer une page, vous retrouverez le même affichage que sur Visual Studio : c’est à dire l’aperçu et le code.

Si on prend quelques heures pour s’y habituer et apprendre à l’utiliser, il peut s’avérer bien utile et vous rendre très productif !

Cet article parle de la raison numéro une de l’utiliser : La puissance du designer de Blend . Grâce au designer de Blend, devenez plus efficace pour créer vos interfaces !

Programme

Semaine 0 : Introduction

Semaine 1 : La Puissance du designer

Semaine 2 : TFS intégré à Blend

Semaine 3 : Visualiser vos fichiers de ressources et styles

Semaine 4 : Les animations

Semaine 5 : Les styles & templates

Semaine 6 : DataSample

Semaine 7 : Behaviors

Semaine 8 : Stechflow

Semaine 9 : Import de fichiers Illustrator / Photoshop

Semaine 10 : Spécificités Windows Phone / Windows 8

Semaine 11 : Conclusion / Les différentes versions de Blend

Introduction

Lorsque l’on veut créer une interface pour notre application, on utilise la vue « designer » symbolisée par cette icône :

icon_designer

Pour vous aider à créer votre page / vue un certain nombre de fenêtres sont à votre disposition. Le designer est votre fenêtre principale, c’est le rendu de votre application et viennent autour des fenêtres secondaires essentielles pour modifier votre page, en voici trois principales : Propriétés / Arbre visuel (Objects and TimeLine) / Boîte à outils

Comment bien utiliser le designer ?

Commencez par ouvrir votre projet dans Expression Blend, puis ouvrez votre page sur laquelle vous voulez modifier l’interface :

Vous pouvez utiliser le designer de deux manières différentes. Tout d’abord, sélectionnez un contrôle dans la boite à outils (cf. ci-dessous), ensuite :

blend_boiteoutils

Méthode 1

Double cliquez sur le contrôle sélectionné pour qu’il s’ajoute dans l’ arbre visuel en tant qu’élément fils de votre élément visuel courant (dans l’exemple ci-dessus : mon border va s’ajouter un tant qu’élément fils de mon LayoutRoot)

Méthode 2

blend_designobject

Sélectionnez un contrôle puis dessinez-le dans le designer. Lorsque vous utilisez cette méthode, il faut penser à faire attention aux valeurs par défaut que va prendre votre contrôle (marges, hauteur / largeur, positionnement). Pour cela en faisant un clic droit sur votre élément dans le designer, vous avez quelques propriétés intéressantes :

– Reset Layout : pour remettre à zéro toutes les valeurs entrés automatiquement lorsque vous dessinez un élément, très pratique !

– Group Into : pour grouper votre élément dans un container (Grid, StackPanel, Border, ScrollViewer, Canvas, etc.)

– Change Layout Type : si votre élément est une Grid, vous pouvez la changer en un autre container (Grid, StackPanel, Border, ScrollViewer, Canvas, etc.)

– View Source :  si c’est un contrôle cela vous permettra d’aller éditer le style.

Enfin, dès que vous sélectionnez un élément dans votre arbre visuel ou bien sur le  designer , vous pouvez voir ses propriétés dans la fenêtre des propriétés .

Astuce

Combien de fois l’aperçu sur le designer de Visual Studio ne fonctionne pas et fait ramer votre ordinateur lorsque vous ouvrer un fichier Xaml avec Visual Studio 2010 ?

Le designer de Blend lui est très puissant et ne rame pas à l’ouverture d’un fichier Xaml. Pour l’obtenir en quelques secondes à partir de Visual Studio, il suffit de faire un clic droit sur votre fichier Xaml « Ouvrir avec Expression Blend » .

OpenInExpressionBlend

Cette commande va ainsi ouvrir votre projet dans Blend, sur la page concernée :

Blend_designer

Aperçu du designer de Blend

En utilisant cette astuce vous gagnerez du temps et vous n’avez plus qu’à désactiver l’ouverture avec le designer sur Visual Studio :

Sur un fichier Xaml, faites un clic droit puis “Ouvrir avec” et sélectionné “Source Code (Text)” pour le mettre par défaut. Ainsi lors de l’ouverture d’un fichier Xaml dans Visual Studio, seulement le code s’affichera.

Attention désactiver le designer ne signifie pas non plus que vous n’en avez pas besoin ! Combien de fois je vois des développeurs qui essayent par exemple de se débrouiller avec le code Xaml pour afficher un contrôle dans la bonne colonne et ligne de la Grid en tâtonnant avec les propriétés. Alors qu’une fois Blend ouvert, on split la vue pour afficher le design et code en même temps et modifier la définition des colonnes ainsi que les propriétés de notre élément qui ne s’affichait pas au bon endroit et le tour est joué, vous avez votre aperçu, pas besoin de recompiler pour voir le résultat qui est déjà sous vos yeux !  5 minutes de gagner !

Sachez qu’en utilisant cette méthode avec un Visual Studio ouvert d’un côté et Blend de l’autre sur le même projet, dès que vous enregistrez les modifications d’un fichier, ces modifications du fichier sont détectées automatiquement lors que vous passez de l’un à l’autre :

modification_blend&vs

Il suffit de dire “oui” pour recharger la dernière version du fichier.

Le designer de Blend toujours mieux que celui de Visual Studio 2012

Comme je disais dans l’article d’introduction, la nouvelle version de Visual Studio 2012 comprend désormais le même designer que Expression Blend à quelques exceptions près. C’est pourquoi j’ai fait un comparatif qui permet de se rendre compte des différences qui restent encore assez importantes :

Comparatif

designer_vs12

Aperçu du designer de Visual Studio 2012

Voici un comparatif des fenêtres utilisées lorsque l’on utilise le designer pour créer nos interfaces :

Fenêtres   Visual Studio 2012 Blend
Solution Explorer +1  ✔ (Projects)
Sur Blend, on peut parfois avoir des soucis à l’ouverture de certains fichiers.
Arbre Visuel  ✔ (Document Outline)  ✔ (Objects and Timeline)
Boite à outils  ✔ +1
Sur Blend, la boite à outils est beaucoup mieux faite, avec une hiérarchie des contrôles qui y sont catégorisés, une recherche facile, on s’y retrouver plus facilement !
Propriétés  ✔
Data Source  ✔
Data Sample +1
Ressources +1
Storyboard +1
Assets +1
Device  ✔

Conclusion, Blend est bien plus complet que Visual Studio pour réaliser les interfaces. Les fenêtres (DataSample, Ressources et Storyboard) feront l’objet d’autres raisons d’utiliser Blend. On s’aperçoit quand même que Blend reste pour l’instant le meilleur outil en terme de fonctionnalités / usages.

Autres raisons

Avec Visual Studio 2012, il subsiste un certain nombre de problèmes qui font que pour l’instant mon Blend est toujours ouvert à côté :

– le fait de devoir réorganiser tous les panneaux (passer du mode développeur au mode designer) à chaque fois : cela fait perdre du temps !

– le designer a encore quelques soucis et je trouve que celui de Blend fonctionne toujours mieux :

bugdesigner_vs

Rendez-vous donc la semaine prochaine pour un article sur la raison #2 : l’utilisation de TFS intégrée a Blend…

Nombre de vue : 311

COMMENTAIRES 7 commentaires

  1. Fabrice dit :

    Excellent article.

    Merci !

  2. Fontaine dit :

    Il faut attendre 11 semaines pour avoir tous les articles? 🙁
    Sa sera difficile d’attendre d’ici là.

  3. Un très bon article qui montre les avantages du designer de Blend sur celui de visual studio et qui explique clairement son utilisation, merci !

AJOUTER UN COMMENTAIRE