Archive

Archive for the ‘Blend’ Category

[Blend] : Carousel étape par étape pour designer / graphistes sans coder

Bonjour à tous, voici un petit article concernant l’utilisation avancée du composant PathListBox pour réaliser un Carousel.

Suite à une question pertinente d’un designer / graphiste souhaitant créer un carousel le plus simplement du monde et ne connaissant pas forcement le développement WPF / Silverlight .

L’objectif de cet article est de montrer que nous pouvons arriver à réaliser des visuels et interactions simplement par un graphiste. L’alimentation des données pouvant rester à la charge du développeur.

Avant tout rendez-vous sur le site : http://expressionblend.codeplex.com/releases/view/57990 et téléchargez le pack d’extention pour les PathListBox de Microsoft Expression Blend.

Créez un projet WPF (ou Silverlight) et nommez le pour l’exemple « WpfSampleCarousel ».

Créez un UserControl nommé “CarouselUserControl”

Ajoutez une grille avec trois colonnes. Dans la première et la dernière ajoutez un bouton (précédent et suivant).

Et le composant PathListBox

Step1

Ensuite, créez un ‘path’ de la forme de vous souhaitez (toujours dans la deuxième colonne)

Step2

Cliquez sur votre PathListBox et cliquez sur la cible sans lacher et pointez votre souris sur le path créé ci-dessus.

Ensuite nous allons configurer le PathListBox, modifiez les paramètres comme présentés ci-dessous (Distibution : Even, Capacity : un nombre impair si vous voulez un effet central, Start : 10%, FillBehavior : NoOverlap et surtout cochez WrapItems)

Step4

A titre d’exemple ajoutons des rectangles à notre PathListBox afin de pouvoir visualiser le ‘Carousel’ vous pouvez y mettre ce que vous souhaitez (ex images)

<Rectangle MinWidth="100" MinHeight="100" Fill="#FFFF3237"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF89C122"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FFFEB63E"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF2ACC55"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FFFE198E"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF949494"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF58A2E6"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF8A144F"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FF37E4F5"/>
			<Rectangle MinWidth="100" MinHeight="100" Fill="#FFA4D9FA"/>

 

Nous obtenons visuellement un ‘Carousel’ plutot satisfaisant !

Ajoutons un peu d’interactivité ! Pour cela ajoutez un ‘Behavior’ nommé ‘PathListBoxScrollBehavior’ sur votre PathListBox en faisant un glisser déposer.

Configurons ce Behavior, pour cela cliquez dessus et cliquez sur le petit plus de DecrementCommand, IncrementCommand et ScrollSelectedCommand afin d’y ajouter un ‘EventTrigger’ présent ci-dessous

Puis configurez DecrementCommand, pour cela cliquez sur EventTrigger dans le SourceName cliquez sur la cible et glissez votre souris sur le bouton de gauche.

Sélectionnez ‘Click’ dans la zone EventName.

Répétez pour IncrementCommand, en pointant vers le bouton de droite.

Pour la zone ScrollSelectedCommand selectionnez SelectionChanged dans EventName (sourcename doit correspondre à votre PathListBox)

Vous pouvez si vous le souhaitez modifier la vitesse, et la façon dont les éléments se déplacent.

Si vous exécutez votre application votre ‘carousel’ est pleinement fonctionnel.

Nous allons à présent voir comment rendre celui ci plus sympathique visuellement. Nous allons faire en sorte que nos éléments soient plus petits sur les extrémités et que l’élément central soit centré 🙂

Pour cela faites un clic droit sur votre PathListBox Edit Additional templates > Edit Generated Container > Edit a Copy

Groupez l’élément principal dans une grille en faisant un clic droit sur l’élément racine :

Ajoutez un composant ‘PathListBoxItemTransformer’ en le glissant dans votre élément racine.

Vous obtenez :

Ensuite glissez la grille du bas dans le PathListBoxItemTransformer, vous obtenez :

Ensuite nous allons modifier le comportement d’un élément par rapport aux autres, pour cela cliquez sur ‘PathListBoxItemTransformer’ et allez dans le panneau des propriétés à droite, modifiez les options OpacityRange (50% d’opacité aux extrémités dans ce cas), ScaleRange (20% de la taille d’origine aux extrémités et 150% au centre), Ease à SineOut et surtout la propriété IsCentered pour disposer d’un élément central :

Nous obtenons ainsi :

Vous n’avez plus qu’à cliquez sur le ‘path’ (ici rouge) définit au début de l’exercice et de mettre transparent afin de ne plus le voir.

Dernière chose déposez votre UserControl dans votre fenêtre principale (via Assets si vous êtes designer ou tout simplement dans le xaml si vous savez le faire en référençant le bon namespace)

Exécutez votre application et vous disposez d’un carousel plutot sympathique facilement réalisable par un Designer sans avoir à faire le moindre code 😀

L’ensemble des sources de cet exemple sont disponibles ici : WpfSampleCarousel.zip (renommez le .doc en .zip)

Bon design 🙂

Publicités
Catégories :Blend, Silverlight, WPF Étiquettes : ,