Bonjour à tous.

Pour répondre à une demande lors d’une formation Blend pour Silverlight & WPF dispensée chez Regart.net, j’ai rédigé ce petit tutorial que je mets également en ligne ici, et qui traite de la création d’un slider en WPF, step by step.

La première étape est d’ouvrir Blend (sisi) et de créer un projet WPF.

Nous devons ensuite dessiner le slider. Lors de cette étape, on utilisera donc les outils de dessin de Blend. Ici j’ai utilisé l’outil rectangle sur lequel j’ai mis un corner radius de 5px, histoire d’arrondir les angles.

J’ai ici donc deux rectangles :
- le premier constitue le fond du slider. Il a en remplissage un dégradé de bleu. Il possède également un contour qui a le même dégradé que le contenu avec juste un inversement au niveau des couleurs pour donner un effet de profondeur.
- le second rectangle représente le thumb. Le thumb est le « bouton » du slider que l’on fait « glisser ». Il a en brush de remplissage un dégradé gris -> blanc -> gris vertical.

Nous devons à présent convertir nos jolies formes vectorielles en réel contrôle.

Nous allons commencer par régler le cas du Thumb. Clic droit sur le rectangle représentant le thumb (dans la vue design ou directement dans le panneau Arbre Visuel et Animation), puis cliquez sur « Créer un contrôle ».

Dans le panneau qui s’ouvre, au niveau du champ « Recherche » en haut à gauche, écrivez « thumb ». Sélectionnez  »Thumb » puis cliquez sur « Ok ».

Nous nous trouvons à présent à l’intérieur du template du slider. Pour vérifier cela plusieurs indicateurs sont présents pour vous aiguiller :
- un file d’Ariane juste en dessous de l’onglet où est indiqué le fichier de travail (ici : MainWindow.xaml)
- Le nom du template « ThumbStyle (Thumb Template)  » dans le panneau « Arbre Visuel & Animation ».

Je souhaite ajouter un peu d’interactivité lors du survol du thumb, ici un changement de couleur. Pour faire ceci nous devons nous rendre dans le panneau « Etats » (« States » sur la capture car version anglaise de Blend) et sélectionner l’état « MouseOver » dans le groupe d’états « CommonStates »  comme le montre la capture suivante :

Nous pouvons à présent sélectionner notre objet « rectangle » dans l’arbre visuel ou directement dans la vue Design. Changeons à présent les couleurs au niveau du dégradé de remplissage (propriété « Fill ») dans le panneau « Propriétés », à droite. Notez bien qu’il n’est pas possible de supprimer de point de couleur dans le dégradé, sans quoi cela serait répercuté sur l’état de base.

Du coup, petite astuce : si vous souhaitez appliquer à l’état « Normal » une couleur unie et à l’état « MouseOver » un dégradé (ou vice-versa), il vous suffira de faire un dégradé où chaque point de couleur a rigoureusement la même teinte et de changer l’une de ces teintes lors du « MouseOver ». Vous aurez alors une transition Couleur unie -> Dégrader.

Ici, je souhaiterais qu’il n’y ait aucun changement visuel entre l’état « MouseOver » et l’état « Pressed ». Plutôt que de re-paramétrer le rectangle sur l’état « Pressed », je vais simplement copier l’état « MouseOver » sur l’état « Pressed ». Clic droit donc sur l’état « MouseOver » dans le panneau des états, puis choisissons l’option « Copier l’état vers » et pour finir « Pressed » :

Ainsi, lors du passage du « MouseOver » au « Pressed », aucun changement ne sera visible. Pas très ergonomique… Nous sommes d’accord, l’intérêt était juste de vous montrer cette petite option :p

Bien. En parlant d’ergonomie, je vous propose de transformer le curseur classique en une petite main lorsque l’utilisateur passe la souris sur le Thumb. Pour cela nous allons retourner sur l’état base, et sélectionner la grille dans l’arbre visuel.

Dans les « Propriétés Communes » vous allez trouver une option « Curseur » (« Cursor » sur la version anglaise). Sélectionnons dans la liste déroulante « Hand » afin d’afficher la petite main :

Nous en avons fini avec ce thumb. Afin de sortir de l’édition du template cliquez sur le premier objet du file d’Ariane en haut ou sur la flèche pointant vers le haut dans l’arbre visuel, juste à droite de « ThumbStyle1″ (Thumb Template) :

L’objet racine de l’Arbre Visuel doit alors être « Window » et contenir « LayoutRoot » puis « rectangle » et enfin notre tout jolie Thumb.

Sélectionnons le thumb plus le rectangle de fond du slider (clic->CTRL->clic sur le second item) et groupons-les dans une grille (CTRL+G ou « clic droit->Grouper->Grid »). Voici à quoi devrait ressembler l’arbre visuel de la MainWindows à cet instant :

Clic droit sur la grille puis « Créer un contrôle ». Dans le panneau qui apparaît, recherchons « Slider », sélectionnons-le dans la liste et validons à l’aide du bouton « Ok » :

Nous sommes à présent dans le template du slider :

Pour les contrôles un peu plus évolués qu’un simple bouton ou qu’un thumb, Blend nous propose des parties pré-faites. Afin de découvrir ce qu’il nous propose pour le slider, rendons-nous dans l’onglet « Part » situé tout en haut de la colonne de gauche :

Blend nous propose ici deux parties :
- « Part_SelectionRange » -> pour faire un range slider, ce n’est pas ce que nous voulons ici. Si toutefois vous voulez en savoir plus sur les range slider je vous renvoie sur le Blog d’Eric Ambrosi – Tweened.org – Range Slide en Silverlight
- « Part_Track » -> corps du slider, c’est la partie dont nous avons besoin.

Pour la créer, double-cliquons dessus. Elle devrait s’être ajoutée à l’Arbre Visuel. Déplions-la grâce à la petite flèche à gauche de son nom :

Pour que notre slider fonctionne, nous avons besoin de cette partie. Pour que cette partie soit opérationnelle, nous avons besoin de deux repeat button et d’un thumb. Le thumbs est la partie que l’utilisateur « draggera » comme expliqué précédement. Mais pourquoi deux repeat button?

Lorsque l’on clique à gauche ou à droite du thumb, il se déplace. Et pour le déplacer nous avons besoin de ces deux repeat button.

Plaçons le thumb que nous venons de créer à sa place dans la PART_Track (glisser/déposer) :

J’ai donné au thumb une hauteur et une largeur fixe avec une margin de 2px sur tout le bord car mon design est un peu particulier :

Nous devons à présent créer deux repeat button. Pour cela rendons-nous dans le panneau « Composant » ou « Assets » et dans le champ recherche, écrivons « repea… » :

Double-cliquons sur le repeat button afin d’en créer un. Recommençons pour en avoir un second :

Plaçons ensuite un repeat button dans « DecreaseRepeatButton » et le second dans « IncreaseRepeatButton » et sélectionnons les tous les deux (clic -> CTRL -> clic sur le second):

Dans le panneau « Propriétés » cette fois, partie « Layout », juste en-dessous d’Apparence », cliquons sur les doubles flèches croisées à droite des paramètres « Width » et « Height » afin de leur donner des dimensions Auto, au niveau des options d’allignement nous devons stretcher les boutons comme le montre la capture et enfin enlever toutes traces de marges (clic sur le carré blanc à droite des quatre cases des Margin puis Reset / Rétablir » :

Voilà ce que vous devriez obtenir :

Etant donné que nous ne voulons pas voir les repeat button mais que nous voulons les garder interactifs, nous devons baisser leur opacité (panneau Propriétés -> Apparence) :

Nous y sommes presque ! Nous devons à présent ajouter du code dans le XAML. Pour cela, clic droit sur l’un des deux repeat button puis -> « View XAML » (je ne me souviens plus du menu dans la version française mais c’est celui qui se trouve tout en bas) :

Nous devons rajouter une commande sur chacun des deux repeat button :

- Command= »{x:Static Slider.IncreaseLarge} » pour l’IncreaseRepeatButton
- Command= »{x:Static Slider.DecreaseLarge} » pour le DecreaseRepeatButton

Et hop ! Notre Slider est opérationnel. J’en ai créé un second exemplaire et j’ai bindé sur l’un la largeur du rectangle, et sur l’autre la hauteur :

Fichiers sources (requière BLEND 4 !!!) : sliderWPF

En espèrant vous être utile,

Olivier.

Le thème Fleur des Salines

Retrouvez notre thème WordPress « Fleur des salines » en téléchargement ici.

Pour ceux qui aiment les beaux thèmes WordPress sobres et efficaces. Celui-ci embarque une Galerie photo en page d’accueil (en Silverlight). Si vous souhaitez apprendre à configurer le thème Fleur des Salines, nous avons réalisé une petite vidéo muette bien utile de 3-4 minutes que vous pouvez voir ici.

Plugin Silverlight Gallery

La galerie repose sur le plugin WordPress du même nom, vous pouvez le télécharger ici (voir aussi cet autre article concernant ce plugin, sur Flashxpress). Son principal avantage est de récupérer les images uploadées via l’admin WordPress dans votre post.

Plugin Silverlight BingMap

Nous mettons également à disposition un second plugin pour WordPress basé sur le projet Fleur des Salines, pour faciliter cette fois l’intégration d’une carte interactive basée sur Silverlight Bingmap. Pour cela il suffit d’installer le plugin que vous trouverez en téléchargement ici.

Plugin Silverlight Smooth Streaming Vidéo

Pour finir, un troisième et dernier plugin permet de lire n’importe quel type de vidéo encodée en H264 ou aux formats ism et isml dédiés à la lecture SmoothStreaming. Vous pouvez consulter l’article complet relatif au plugin ici ou télécharger ce dernier ici.

Thème et plugins WordPress développés pour le site www.fleurdessalines.fr réalisé par Regart.net Formation, comme scénario pédagogique et de démonstration des produits Expression dans un contexte WordPress, pour le compte de Microsoft.

Il suffit d’écrire une balise de type : [sl-gallery: ...]

Vous pouvez définir les paramètres comme indiqué dans l’exemple ci-dessous :

• width=400//définit la largeur de la galerie à 400 pixels
• height=400//définit la hauteur de la galerie à 400 pixels
• leftArrow=true//affiche ou cache la flèche de gauche
• rightArrow=true//affiche ou cache la flèche de droite
• pageNumbers=true//affiche ou cache la pagination
• thumbnails=true//affiche ou cache les vignettes
• fill=uniform//permet d’indiquer un mode de remplissage vous avez le choix entre ://   uniform (remplissage homothétique partiel selon possibilité)//   uniformtofill (remplissage avec homothétie)//   fill(remplissage avec déformation les dimensions)//   none (préserve les dimensions originales)
• bgcolor (couleur d’arrière plan)
• bgmode (sans arrière plan ou avec arrière plan windowless)

La première bonne nouvelle, c’est qu’il est possible d’utiliser un menu pour paramétrer tout ça en 2 secondes. Il s’ajoute à l’administration des articles WordPress. Une petite fenêtre apparaît lorsque vous cliquez sur le bouton (voir ci-dessous).

La seconde bonne nouvelle, c’est que nous mettrons rapidement les sources à disposition sur wordpress.com. De cette manière vous pourrez modifier entièrement le visuel de la galerie côté Silverlight. Dans tous les cas, celle-ci récupère dynamiquement les images de la galerie WordPress et ce travail ne sera pas à refaire.

Télécharger le .zip du plugin sl-gallery

L’objectif de ce tutoriel est de récupérer un flux json et de le consommer avec Silverlight 2

Les objectifs de ce tutoriel sont :
- apprendre ce qu’est un flux json (Javascript Object Normalisation)avec php 5 et mysql
- créer un flux json

Tutoriel sur l’utilisation avancée du visual state manager avec le logiciel Silverlight 2

L’objectif de ce tutoriel est de créer un menu dynamique via le Visual State Manager

Tutoriel sur l’affectation d’un objet storyboard ou animation à plusieurs objets graphique différents

L’objectif de ce tutoriel est la création et le déclenchement d’une animation via la ressource XAML StoryBoard

Tutoriel sur la création de bouton avec le nouveau gestionnaire d’état visuel : visual state manager via la commande « make Button »