Microsoft Silverlight 4 - Tutoriel 27 : Carrousel d'images

Carrousel d'images en Silverlight

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Silverlight 4 par le biais d'exemples pas à pas.

Langage : VB.NET

Public visé : niveau Débutant

Commentez ce tutoriel : Commentez

- Titre : Microsoft Silverlight 4 - Tutoriel 27 : Carrousel d'images

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 23 mars 2012

- Mise à jour : 24 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Carrousel d'images en Silverlight

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Étape 18

- Étape 19

- Étape 20

- Étape 21

- Étape 22

- Étape 23

- Étape 24

- Étape 25

- Étape 26

- Conclusion

- Liens

- Remerciements

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - Image Carousel in Silverlight.

Introduction

Image Carousel est un carrousel qui permet d'afficher des images en tournant. Dans le cas présent, il s'agit d'un carrousel horizontal.

Carrousel d'images en Silverlight

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express, ensuite sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual Basic ensuite Application Silverlight dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Étape 2

Une nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Étape 4

Sélectionnez Projet puis Ajouter nouvel élément… et sélectionnez le modèle Contrôle utilisateur Silverlight s'il ne l'est pas déjà, puis modifiez le Nom en CarouselItem.xaml :

Étape 5

Ajoutez le nouveau contrôle utilisateur au projet en cliquant sur Ajouter, ensuite dans le volet XAML pour le contrôle utilisateur CarouselItem.xaml, changez les attributs DesignHeight et DesignWidth à 100 pour la balise <UserControl> :

Étape 6

Pendant que nous en sommes au volet XAML de CarouselItem.xaml, en dessous de <Grid> et au-dessus de la balise </Grid>, tapez le code Image Control XAML suivant :

<Image Height="100" Width="100" Name="Image">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="ItemScale"/>
</TransformGroup>
</Image.RenderTransform>
</Image>

Voir ci-dessous :

Étape 7

Faites un clic droit sur la page ou sur l'entrée pour CarouselItem.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl, tapez le code suivant :

Public Angle As Double = 0

Étape 8

Sélectionnez Projet puis Ajouter un nouvel élément… et sélectionnez le modèle Contrôle utilisateur Silverlight s'il ne l'est pas déjà, puis modifiez le Nom en Carousel.xaml :

Étape 9

Ajoutez le nouveau contrôle utilisateur au projet en cliquant sur Ajouter, ensuite dans le volet XAML pour le contrôle utilisateur Carousel.xaml, changez l'attribut DesignHeight à 250 et l'attribut DesignWidth à 350 pour la balise <UserControl> :

Étape 10

Puisque nous en sommes au volet XAML de Carousel.xaml, en dessous de <Grid> et au-dessus de la balise </Grid>, tapez le code XAML suivant :

<Canvas Height="250" Width="350" x:Name="Container">
<Canvas Height="100" Width="100" x:Name="Display"/>
</Canvas>

Voir ci-dessous :

Étape 11

Faites un clic droit sur la page ou sur l'entrée pour Carousel.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl, tapez ceci :

Private _rotate As New Storyboard
Private _images As New List(Of ImageSource)
Private _items As New List(Of CarouselItem)
Private _position As Point
Private _radius As Point = New Point With {.X = 150, .Y = -40}
Private _speed As Double = 0.0125
Private _perspective As Double = 200
Private _distance As Double

Étape 12

Toujours dans la vue de code pour Carousel, au-dessus de la ligne Public Sub New(), tapez les Sub suivants :

Private Sub Populate(ByRef Canvas As Canvas)
Canvas.Children.Clear()
For Each _image In _images
Dim _index As Integer
Dim _item As New CarouselItem
_item.Image.Source = _image
_item.Angle = _index * ((Math.PI * 2) / _images.Count)
_position.X = Math.Cos(_item.Angle) * _radius.X
_position.Y = Math.Sin(_item.Angle) * _radius.Y
Canvas.SetLeft(_item, _position.X)
Canvas.SetTop(_item, _position.Y)
_distance = 1 / (1 - (_position.Y / _perspective))
_item.ItemScale.ScaleY = _distance
_item.ItemScale.ScaleX = _item.ItemScale.ScaleY
_item.Opacity = _item.ItemScale.ScaleX
_items.Add(_item)
Canvas.Children.Add(_item)
_index += 1
Next
End Sub

Private Sub Rotate()
For Each _item As CarouselItem In _items
_item.Angle -= _speed
_position.X = Math.Cos(_item.Angle) * _radius.X
_position.Y = Math.Sin(_item.Angle) * _radius.Y
Canvas.SetLeft(_item, _position.X)
Canvas.SetTop(_item, _position.Y)
If _radius.Y >= 0 Then
_distance = 1 * (1 - (_position.Y / _perspective))
Canvas.SetZIndex(_item, CInt(_position.Y))
Else
_distance = 1 / (1 - (_position.Y / _perspective))
Canvas.SetZIndex(_item, CInt(_position.Y))
End If
_item.ItemScale.ScaleY = _distance
_item.ItemScale.ScaleX = _item.ItemScale.ScaleY
_item.Opacity = _item.ItemScale.ScaleX
Next
_rotate.Begin()
End Sub

Public Sub Add(ByVal Source As ImageSource)
_images.Add(Source)
Populate(Display)
End Sub

Public Sub RemoveLast()
If _images.Count > 0 Then
_images.RemoveAt(_images.Count - 1)
Populate(Display)
End If
End Sub

Public Sub Clear()
_images.Clear()
Populate(Display)
End Sub

Étape 13

Puisque nous en sommes à la vue de code pour le contrôle utilisateur Carousel, dans le constructeur Public Sub New() en dessous de la ligne InitializeComponent(), tapez le code suivant :

Canvas.SetLeft(Display, Container.Width / 2 - Display.Width / 2)
Canvas.SetTop(Display, Container.Height / 2 - Display.Height / 2)
AddHandler _rotate.Completed, AddressOf Rotate
_rotate.Begin()

Étape 14

Sélectionnez Debug puis l'option Build ImageCarousel à partir du menu :

Étape 15

Retournez au concepteur de vues MainPage.xaml en sélectionnant l'onglet MainPage.xaml, ou en double-cliquant sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions.

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Étape 16

Dessinez deux Canvas sur la page, ensuite dans le volet XAML au-dessus de <Grid> modifiez les lignes <Canvas> comme ceci :

<Canvas Height="35" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></Canvas>
<Canvas Height="265" Width="400" Margin="0,35,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Body"></Canvas>

Voir ci-dessous :

Étape 17

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Button :

Étape 18

Dessinez trois boutons sur la barre d'outils Canvas en glissant les boutons de la Boîte à outils sur le Canvas, ensuite dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez les lignes <Button> comme ceci :

<Button Canvas.Left="6" Canvas.Top="6" Height="23" Width="75" Name="Add" Content="Add..."/>
<Button Canvas.Left="87" Canvas.Top="6" Height="23" Width="75" Name="Remove" Content="Remove"/>
<Button Canvas.Left="168" Canvas.Top="6" Height="23" Width="75" Name="Clear" Content="Clear"/>

Voir ci-dessous :

Étape 19

Puis dans la section Contrôles ImageCarousel de la Boîte à outils, sélectionnez le contrôle Carousel :

Étape 20

Dessinez un Carousel sur le plus grand Canvas (Body) en glissant le Carousel de la Boîte à outils sur le Canvas, puis dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez le code XAML my:Carousel comme ceci :

<my:Carousel Canvas.Left="25" Canvas.Top="5" x:Name="Images"/>

Voir ci-dessous :

Étape 21

En étant toujours dans le concepteur de vues pour MainPage.xaml, double-cliquez sur le bouton Add… et tapez ceci dans le Sub Add_Click :

Dim OpenDialog As New OpenFileDialog
OpenDialog.Filter = "JPEG Image (*.jpg;*.jpeg)|*.jpg;*.jpeg"
If OpenDialog.ShowDialog Then
Try
If OpenDialog.File.Exists Then
Using FileStream As IO.Stream = OpenDialog.File.OpenRead
Dim Source As New Imaging.BitmapImage
Source.SetSource(FileStream)
Images.Add(Source)
End Using
End If
Catch ex As Exception
' Ignore Errors
End Try
End If

Étape 22

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton Remove et tapez ceci dans le Sub Remove_Click :

Images.RemoveLast()

Étape 23

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton Clear et tapez ceci dans le Sub Clear_Click :

Images.Clear()

Étape 24

Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Étape 25

Cliquez sur le bouton Add…, puis à l'aide de la boîte de dialogue Ouvrir un fichier, sélectionnez une image. Vous pouvez le faire plusieurs fois afin d'ajouter davantage d'images au carrousel :

Étape 26

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.

Conclusion

Il s'agit d'un simple carrousel pour afficher des images. Le carrousel pourrait être modifié afin d'afficher n'importe quel type de contenu y compris des vidéos ou d'autres contenus. Essayez de le modifier pour en faire un carrousel vertical - personnalisez-le !

Liens

Télécharger le code source du tutoriel.

Démonstration en ligne du tutoriel.

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également ClaudeLELOUP pour sa relecture orthographique et ses propositions.