Technode

COLOURlovers : Des couleurs pour Blend

Sur COLOURlovers, vous pourrez trouver des motifs et des palettes de couleurs. La grande nouveauté c'est que lorsque vous consultez une palette de couleur, vous avez la possibilité de la sauvegarder dans plusieurs formats, via un panneau de téléchargement.

Pour la version Design, importez le fichier via le panneau nuanciers.

Pour la version WPF, c'est un dictionnaire de ressources que vous ajoutez à votre projet.

Pour la version XAML qui est plutôt destinée à Silverlight, copiez le contenu dans le fichier App.xaml de votre projet.

Arturo Toledo a mis en ligne un Tutoriel très complet sur l'utilisation de COLOURlovers et des fichiers téléchargés.

Expression Blend 2 - la doc en français est arrivée

Pour tous les francophones qui cherchent de la ressource sur Blend 2, rendez-vous sur le site Expression de Microsoft . Vous pourrez également y trouver la documentation pour les autres logiciels de la suite Expression Studio 2 : Design 2, Encoder 2, Media 2 et Web 2.

Pour une découverte guidée, 3 quickstarts ("démarrage rapide") sont disponibles : pour WPF, Silverlight 1.0 et Silverlight 2.0

Kuler s'incruste dans Blend et Design !

Faisons un point sur l'aspect "Nuancier" dans Blend et Design :

• Design permet la création de nuanciers, mais ne donne pas la possibilité de créer un fichier xaml de ressources couleurs utilisable directement dans Blend. Les nuanciers présents dans Design ne sont visibles et utilisables que dans Design.

• Blend permet la création de nuanciers, sous la forme d'un fichier xaml : un dictionnaire de ressources dans lequel les ressources couleurs sont référencées. Design ne peut pas lire l

Lorsqu'on parle de nuancier dans un projet WPF ou Silverlight, il faut donc utiliser le pluriel. Chaque outil gère les couleurs à sa façon, sans possibilité de les faire communiquer entre eux.

La couleur étant extrêmement importante et le nuancier un des outils de base qui permet de respecter une charte graphique, il parait évident qu'un outil de gestion des couleurs transverse serait le bienvenu au sein du duo Design / Blend.

Un début de réponse est apporté par Jonas Follesoe, qui met à disposition un add-in qui permet d'accéder à des palettes de couleurs via internet : Colorful.

C'est en fait la base de nuanciers (près de 134000) de la communauté Kuler qui s'incruste dans Blend et Design. Vous accédez donc aux mêmes palettes que vous soyez sur Blend ou Design, ce qui donne cette impression de transversalité.

Le concept est intéressant mais un peu limitatif : si vous n'avez pas accès à internet, vos palettes ne sont plus accessibles, et vous ne pouvez pas en créer de nouvelles.

Pour résumer, Colorful permet :

• D'avoir des panneaux dédiés intégrés aux interfaces de Blend et Design.

• D'accéder à un nombre non négligeable de nuanciers créés par la communauté kuler
• De faire une recherche par mot-clés parmi cette base de nuanciers.

Vous pouvez bien sûr créer votre propre nuancier sur le site de kuler pour pouvoir ensuite y accéder dans Blend et Design.

Il manque juste la possibilité de créer un nuancier personnalisé localemet directement à partir de Design ou Blend pour être autonome.

C'est donc un add-in qui peut s'avérer pratique, et qui pallie à une lacune du couple Design/Blend.

A vous de tester :)

La ListBox... dans tous ses états

Par défaut, la ListBox affiche ses éléments empilés les uns au dessous des autres verticalement.

Une Liste horizontale

Il peut être intéressant d'afficher les éléments à l'horizontal, mais aucune propriété n'est acccessible directement à partir de la ListBox. Il est nécessaire de modifier le template des ItemsPanel pour modifier l'orientation de la liste.

Sélectionnez la liste, faites un clic droit et sélectionnez Edit Other Template / Edit Layout of Items (ItemsPanel) / Edit a copy afin d'accéder au VirtualizingStackPanel qui gère l'orientation des éléments. Modifiez sa propriété orientation de vertical à horizontal.

Une liste sur plusieurs colonnes

Si vous avez besoin d'une liste sur plusieurs colonnes, et que les différents panels vous sont familiers, vous aurez logiquement l'intention de mettre un WrapPanel à la place du VirtualizingStackPanel. Seulement si vous vous contentez de cela, le résultat ressemblera à ça :

La raison est simple : un WrapPanel affiche ses éléments de gauche à droite puis de haut en bas. Si il n'est pas contraint sur la largeur, il va s'étendre autant que nécessaire et afficher les items sur une seule ligne sans jamais revenir à la ligne. Pour éviter ce comportement, il suffit de désactiver la scrollbar horizontale de la ListBox en affectant la valeur "Disabled" à la propriété "HorizontalScrollBarVisibility".

Une image-clé de départ ? Pour quoi faire ?

Lorsque vous créez une animation dans Blend, que ce soit dans le cadre d'un projet WPF ou Silverlight, vous n'avez pas l'obligation de créer une image-clé de départ.

J'ai eu l'occasion de faire découvrir Blend à des flasheurs, dont le premier réflexe a été de créer une image-clé de départ. Quand je leur ai demandé pourquoi, ils m'ont répondu que c'était une habitude dans Flash, et n'ont pas tout de suite vu l'intérêt de ne pas en mettre. Petite explication :)

Lorsqu'une animation est lue par Blend, et qu'aucune image-clé de départ n'a été définie, c'est l'état courant de l'objet animé qui est pris en compte. La conséquence est simple : vos animations seront toujours fluides, sans saccades (hors problématiques de performances, bien évidemment). Si vous spécifiez un état de départ et qu'il n'est pas cohérent avec l'état courant de votre objet, le changement d'état donnera un effet brusque. Sur le roll-over d'un bouton c'est très visible : pour peu que vous retiriez votre souris du bouton avant que l'animation d'entrée soit terminée, la coupure sera rude !

Blend a beaucoup évolué dans le cadre de projets Silverlight 2, il propose une nouvelle façon de gérer les animations : les Visual States, sans passer par la case timeline, mais simplement en spécifiant l'état d'arrivée et une durée d'animation via un panneau spécialement dédié. A tester dans la version 2.5 de Blend !

 

Ahhhhh le VisualBrush :)

Le principe du visualBrush est super intéressant, c'est un pinceau avec la vue "live" d'un objet.
Un visualbrush peut être créé à partir d'une vidéo par exemple et être ensuite appliquée à n'importe quelle forme en conservant la vue actualisée de l'objet d'origine.

L'usage le plus fréquent du visualBrush est la création de reflet : il est en effet très simple de créer un visualbrush pour l'appliquer ensuite à une forme qui sera placée sous l'objet d'origine, à laquelle un flip vertical et un masque d'opacité seront appliqués.

Jusque là tout va bien, mais lorsque vous souhaitez utiliser un visualbrush à l'intérieur d'un template, les problèmes commencent. En effet, vous aurez la désagréable surprise, lors de la compilation de votre application... de ne rien voir. Le visualBrush est invisible.

Par défaut, lorsque vous cliquez sur "créer un visualBrush", le pinceau est créé dans les ressources de la fenêtre. Pour le rendre accessible au niveau du template, le visualbrush doit être intégré dans les ressources qui sont propres au template.

Le template d'un bouton pourrait ressembler à ça :

La grille contient la base du bouton dans une première ligne et son reflet dans une seconde ligne, les 2 ont une hauteur de 50%. Le ReflectRectangle qui affiche le visualBrush doit pouvoir accéder au VisualBrush. Pour cela le VisualBrush doit être présent dans les ressources de la grille. En bref, sélectionnez l'origine du visual brush (ici le ButtonBorder), dans le menu Tools / Make Brush Resource cliquez sur Make Visual Brush. Nommez le et, étape cruciale ! dans le menu déroulant sélectionnez la Grid... Si elle est disponible, vous avez de la chance, le plus dur est fait vous n'avez plus qu'à sélectionner le rectangle et à spécifier le visualBrush comme étant son remplissage.

Ah ba oui seulement le souci c'est que si aucune ressource n'a été créée au niveau de la Grid, vous n'aurez pas la possibilité d'y accéder. Donc il va falloir y mettre du votre !

Un simple couper/coller suffira : nous en étions donc au menu déroulant, sélectionnez la Window. Dans le panneau des ressources, faites un clic droit sur le visualBrush et cliquez sur "View XAML". Faites un couper (ctrl+X) et au niveau du template du bouton, faites un clic droit sur la Grid et cliquez sur "View XAML"

Maintenant un petit peu de code : insérez ces lignes comme ceci

<Grid x:Name="Grid">
       <Grid.Resources>
ICI COLLEZ LE VISUALBRUSH
       </Grid.Resources>
...

Il ne vous reste plus qu'à remplir le ReflectRectangle avec le VisualBrush. Toutes les interactions que vous mettrez en place au niveau du BorderButton (IsMouseOver, IsPressed etc...) seront automatiquement visible au niveau du reflet.

Petit projet ici : Download visualBrushTest.zip   

Animer des ressources couleur en WPF

Un des intérêts principaux de WPF est l'utilisation des ressources. Elles peuvent être de plusieurs types : les styles qui permettent de modifier les propriétés d'un contrôle, les templates (ou modèles) qui permettent d'en modifier la structure et les brush qui sont des pinceaux vectoriels.

Centraliser tout l'aspect visuel d'une application dans un fichier de ressources, c'est une belle promesse pour une application facilement modifiable et des thèmes rapides à réaliser. Il y avait cependant une limite à laquelle j'ai été confrontée plusieurs fois depuis que je travaille sur des projets WPF : il n'était pas possible, à ma connaissance, d'animer des ressources couleurs. Après plusieurs tentatives infructueuses, j'avais abandonné cette idée... Jusqu'à aujourd'hui ! Une bonne âme m'a permis de voir comment résoudre ce problème - Merci Vincent :)

Pour arriver à un résultat, j'ai du mettre mes mains de graphiste dans le code !

Petite mise en pratique

Dans Blend, dessinez un rectangle (1&2) et appliquez lui une première couleur (3). Transformez cette couleur en ressource (4).

Créez une timeline (1), placez la tête de lecture à 0:00,500 (2)

Sélectionnez le rectangle (1), modifiez sa couleur (2) et transformez cette seconde couleur en ressource (3) .

Avant d'aller dans le code, vérifiez que la valeur de la propriété Fill de votre rectangle est la première ressource couleur

   

Dans le code, vérifiez que vos ressources couleurs sont déclarées avant le storyboard.

Au niveau du rectangle, transformez le "DynamicResource" en "StaticResource" (dans cet exemple il n'y aura pas d'impact visible, mais si vous intégrez le storyboard à un style ou un template, l'application ne compilera pas)

Au niveau du storyboard, la valeur couleur indiquée doit être modifiée : passez de la valeur hexadécimale à Value="{StaticResource Color2}" ( où Color2 est le nom que vous avez donné à la deuxième ressource couleur)

Petit projet ici : Download RessourcesCouleurs.zip

Un player pour Frogz

J'ai travaillé sur un petit player en silverlight pour le site de frogz.

Ca m'a permis de tester la nouvelle version de Blend, j'ai été agréablement surprise par les dernières modifications qui ont été apportées à la version de septembre. Les deux améliorations les plus intéressantes sont, à mon sens, la possibilité de dupliquer/inverser une animation et la gestion du chemin emprunté par l'utilisateur pour accéder à un template ou un style. Cette dernière modif rends l'application agréable à utiliser :) Cette version de septembre propose de vraies améliorations, j'ai hâte de voir la suite !