Microsoft Silverlight 4 - Tutoriel 27 : Carrousel d'images

Carrousel d'images en Silverlight

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 Donner une note à l'article (3.5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

Image non disponible

É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 :

Image non disponible

Étape 3

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

Image non disponible

É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 :

Image non disponible

É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> :

Image non disponible

É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 :

 
Sélectionnez
<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 :

Image non disponible

É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 :

 
Sélectionnez
Public Angle As Double = 0
Image non disponible

É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 :

Image non disponible

É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> :

Image non disponible

É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 :

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

Voir ci-dessous :

Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

Étape 12

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

 
Sélectionnez
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
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
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()
Image non disponible

Étape 14

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

Image non disponible

É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 :

Image non disponible

Étape 16

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

 
Sélectionnez
<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 :

Image non disponible

Étape 17

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

Image non disponible

É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 :

 
Sélectionnez
<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 :

Image non disponible

Étape 19

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

Image non disponible

É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 :

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

Voir ci-dessous :

Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
Images.RemoveLast()
Image non disponible

É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 :

 
Sélectionnez
Images.Clear()
Image non disponible

É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 :

Image non disponible

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

Image non disponible

É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 :

Image non disponible

Étape 26

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible 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

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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. Droits de diffusion permanents accordés à Developpez LLC.