Microsoft Silverlight 4 - Tutoriel 27 : Carrousel d'images

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 :

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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

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

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

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 :

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 :

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

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 :

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

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 :

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

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

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

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 :

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 :

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.