Archive

Archive for avril 2010

[SL4] : Sortie de Silverlight 4 RTW

Bonjour à tous, une petite actualité afin de signaler à ceux qui ne le sauraient pas encore : Silverlight 4 est officiellement de sortie et vous pouvez réaliser des application à destination du public. Ce qui n’était pas le cas jusqu’à présent !

image

Voici les outils nécessaires pour développer une application Silverlight 4

Pour des exemples de ce que vous pouvez faire, visiter les ancienne publications de ce blog !

Publicités
Catégories :Silverlight, Silverlight 4

[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)

Catégories :Silverlight, Uncategorized

[SL4] : MotionPath animation in Silverlight 4

Un petit article pour vous présenter une nouveauté de Silverlight 4 et Blend 4 RC proposant un nouveau contrôle permettant de réaliser une animation de type MotionPath que tous les développeurs WPF connaissent.

Pour réaliser cela vous devez installer Blend 4 et créez un nouveau projet Silverlight 4

Créez un path représentant le chemin que vous souhaitez faire parcourir à vos éléments, grâce à l’outil Pen :

image

Faites Click droit sur votre path et choisissez “Make Layout Path”

image

Une PathListBox est ainsi créé !

image

Maintenant ajoutez un élément dans la PathListBox, exemple un bouton

image

Créez un storyboard qui va nous servier à animer le bouton via la PathListBox

Cliquez sur la PathListBox, déplacez vous de quelques secondes et changez la propriétée Start à 100%

image

image image

Ainsi le bouton se place à la fin du path en 2 secondes !

image

Il ne reste plus qu’à lancer le storyboard via le code ou un Trigger sur l’évènement Loaded du contrôle par exemple

image image 

Et le tour est joué ! votre bouton suit un Path de façon animé !

Code source complet de l’exemple PathListBox.zip

Catégories :Silverlight, Silverlight 4