Expression Blend 4

Astuces

• Ctrl+0 → zoom ajusté
• F9 → afficher/cacher les poignées (rectangle de sélection)
• Espace + clique-gauche → déplacer la vue en glissant
• Clip en XAML

Dessiner des objets

Rectangle et Ellipse

L'appui sur Shift permet de dessiner des carrés et des cercles.
L'outil Sélection permet d'arrondir les angles du rectangle et tordre le rectangle pour en faire un parallélogramme.

Polygones

L'outil Plume permet de dessiner des polygones. Une fois le dessin du polygone terminé, cliquez sur Entrée.
L'appui sur Control permet de déplacer les côtés et les intersections.
L'appui sur Alt permet de modifier la courbure des côtés.
Pour modifier un polygone une fois son édition terminée, il faut utiliser l’outil Sous-sélection.

Sélection

L’outil Sélection permet de redimensionner, faire tourner et tordre les objets.

Opérations entre 2 objets

Sélectionnez 2 objets, Objets → Combiner

Gradient

Propriétés

Accessible depuis Propriétés → Pinceaux → Pinceau de dégradé.
Permet de définir le type (linéaire ou radial), les couleurs et leur nombre.

Outil Dégradé

Il permet en plus de définir la zone et les positions du dégradé.

Effets

L'ajout des effets se fait dans Propriétés → Apparence

Blur

Floute l'objet.

Drop Shadow

Ajoute une ombre à l'objet.

Conteneurs

Dans l'arbre visuel, on peut déplacer-glisser des objets dans les conteneurs. En passant d'un canevas à l'autre les objets gardent leurs propriétés Left et Top.
Pour grouper plusieurs objets au sein d'un nouveau conteneur, il faut les sélectionner → clique-droit → Grouper → choisir un conteneur.

Transformations

Disponible pour tous les objets dans Propriétés → Transformer

Transition entre états

Un état permet de d'enregistrer la disposition de l'interface et de naviguer entre états pour donner un effet d'animation.
Fenêtre → Espace de travail → Animation.
En bas à gauche → onglet État → VisualStateGroup → Ajouter un état.
Sélectionner un élément et fixez ses valeurs pour l'état en cours. Les valeurs modifiées sont automatiquement enregistrées si le mode est activé.
Un point comme celui-ci indique qu'une valeur a été fixée pour cet élément.

Liez un évènement à un état

Désactiver l'enregistrement des modifications
En bas à gauche → onglet Composants → Comportements → GoToStateAction → Drag-drop sur l'élément.
A droite → onglet Propriétés → Propriétés communes → StateName → définir l'état correspondant à l'évènement sélectionné plus haut.

Animation

Mode animation → sélectionnez un élément → appuyez sur le + en haut à droite de l'onglet Arbre visuel et animation.
Sélectionnez une date dans le gantt → fixez les propriétés
Option de résolution (en haut à droite dans l'onglet gantt) → permet de définir le nombre de positions par secondes.

Liez un événement à une animation

Mode Design → onglet Composants → Comportements → ControlStoryBoardActionBehavior → Drag-drop sur l'élément.
A droite → onglet Propriétés

• Déclencher → EventName → définir l'évènement déclencheur.
• Propriétés communes → StoryBoard → définir l'animation à déclencher.

Insérer une image

Drag-drop de l'image dans l'onglet Projets.
Sélection d'un conteneur pour l'image dans l'onglet Arbre visuel et animation → clique-droit sur l'image → Insérer.
L'image est insérée dans le coin supérieur gauche du conteneur mais elle n'est pas redimensionnée.

Clipping path

Permet de créer un masque visuel sur une image pour n'afficher qu'une partie de l'image.
Créez une forme quelconque au même niveau que l'image → sélectionnez la forme et l'image → clique-droit → tracé → Créer un tracé de détournage.

Évènements et code behind

Pour chaque éléments visuels → onglet propriétés → image avec l'éclair.
Double-cliquer sur l'évènement souhaité ajoute une méthode à l'évènement dans le code behind.