Accueil > Silverlight, Uncategorized > [SL4] : Build a 3D Carrousel

[SL4] : Build a 3D Carrousel

Lors de la sortie de WPF ou Silverlight il était fréquent de voir un carrousel afin de vanter les mérites de la technologie. Or cela reposait trop souvent sur des technique complexes et peu optimisés.

Avec la sortie de Silverlight 4 et de Blend 4 nous disposons désormais d’un nouveau controle connu sous le nom de PathListBox, permettant de disposer des éléments suivant un chemin (path)

Création du chemin

Disposez une ellipse et une PathListBox, comme ci-dessous.

image

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
	x:Class="Carrousel3D.MainPage"
	Width="640" Height="480" HorizontalAlignment="Center" VerticalAlignment="Center">

	<Grid x:Name="LayoutRoot">
		<Grid.Background>
			<RadialGradientBrush>
				<GradientStop Color="#FFABABAD" Offset="0"/>
				<GradientStop Color="#FF434345" Offset="1"/>
			</RadialGradientBrush>
		</Grid.Background>
		<ec:PathListBox/>
		<Ellipse HorizontalAlignment="Center" Height="300" Stroke="Black" VerticalAlignment="Center" Width="300" StrokeThickness="2"/>
	</Grid>
</UserControl>

Association du chemin à la PathListBox

Dans les propriétés de la PathListBox, indiquer le chemin a suivre en glissant le petit rond sur l’ellipse.

image

image

image

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
	x:Class="Carrousel3D.MainPage"
	Width="640" Height="480" HorizontalAlignment="Center" VerticalAlignment="Center">

	<Grid x:Name="LayoutRoot">
		<Grid.Background>
			<RadialGradientBrush>
				<GradientStop Color="#FFABABAD" Offset="0"/>
				<GradientStop Color="#FF434345" Offset="1"/>
			</RadialGradientBrush>
		</Grid.Background>
		<ec:PathListBox>
			<ec:PathListBox.LayoutPaths>
				<ec:LayoutPath SourceElement="{Binding ElementName=ellipse}"/>
			</ec:PathListBox.LayoutPaths>
		</ec:PathListBox>
		<Ellipse x:Name="ellipse" HorizontalAlignment="Center" Height="300" Stroke="Black" VerticalAlignment="Center" Width="300" StrokeThickness="2"/>
	</Grid>
</UserControl>

Ajoutez des éléments a votre PathListBox

Nous ajoutons ici des petites étoiles.

image

Ajout de contrôles pour animer le tout

Ajout de sliders afin de pouvoir animer le carrousel.

image 

Ajoutez une projection sur l’ellipse.

<Ellipse x:Name="ellipse">
			<Ellipse.Projection>
				<PlaneProjection RotationX="{Binding Value, ElementName=XProjectionSlider}"/>
			</Ellipse.Projection>
		</Ellipse>

Et attachez la rotation X au slider X et la propriété Start au slider Début pour animer le carrousel.

Le carrousel en action !

Sympa non ?

image

  image

Code source complet

Télécharger l’exemple Carrousel3D.zip (renommer le .doc en .zip)

Publicités
Catégories :Silverlight, Uncategorized
  1. DieudonneK
    20 mars 2011 à 22 h 00

    slt, je suis un etudiant, mon nom est DieudonneK j’aimerai savoir faire le carousel
    avec silverlight 4 j’utilise VS 2010 et express Blend, merci.

    • Stéphane LOUGE
      21 mars 2011 à 19 h 19

      Comment puis-je t’aider ? 🙂

      • DieudonneK
        21 mars 2011 à 19 h 40

        Merci Stéphane LOUGE, j’aimerai faire un menu qui peut contenir quatre bouton, l’utilisateur poura faire un click sur un bouton et les trois autres se deplace, donc un menu de choix. Merci.

  2. Stéphane LOUGE
    21 mars 2011 à 19 h 43

    Je prépare un nouvel article sur celà. Je le publierai dans la semaine. 😉

    • DieudonneK
      21 mars 2011 à 19 h 59

      Merci

  3. Mayzz
    30 août 2012 à 19 h 39

    Il est important de préciser que les projections ne sont pas prises en charge par WPF ! Moi qui suis développeur, je suis abéré de voir comment créer un simple carrousel de base peut nous faire perdre une journée entière pour kedal ! WPF/SL sont sensé être des technologies permettant de créer rapidement de riches interfaces seulement il n’y a aucune ressource claire et précise sur le sujet. Chaque fois que je tente l’expérience de créer une chose simple, aucun tuto ne dit simplement comment faire les choses. C’est frustrant !

  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :