Semaine 1 : La Puissance du designer

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 :

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 :

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

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 » .

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

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 !