Microsoft Silverlight 4 - Tutoriel 22 : Liaison de données

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 ensuite Ajouter une référence… La fenêtre Ajouter une référence devrait apparaître, sélectionnez System.Xml.Linq dans la liste .NET :

Ajoutez la référence à System.Xml.Linq en cliquant sur OK.

Sélectionnez Projet puis Ajouter une classe… et sélectionnez le modèle Classe s'il ne l'est pas déjà, ensuite modifiez le Nom en Music.vb :

Ajoutez une nouvelle classe au Projet en cliquant sur Ajouter, puis dans la vue de code pour la classe Music.vb, au-dessus de la ligne Public Class Music tapez le code suivant :

Imports System.ComponentModel

Puisque nous en sommes à la vue de code pour la classe Music.vb, en dessous de la ligne Public Class Music tapez ceci :

Implements INotifyPropertyChanged
Private _album As String
Private _artist As String
Private _released As String
Private _genre As String

Public Event PropertyChanged As PropertyChangedEventHandler _
    Implements INotifyPropertyChanged.PropertyChanged

Toujours dans la vue de code pour la classe Music.vb, au-dessus du End Class pour Public Class Music tapez les Sub suivants :

Private Sub NotifyPropertyChanged(ByVal PropertyName As String)
  RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))
End Sub

Public Sub New()
  _album = "Untitled"
End Sub

En étant toujours dans la vue de code pour la classe Music.vb, au-dessus du End Class pour Public Class Music tapez les propriétés suivantes :

Public Property Album As String
  Get
    Return _album
  End Get
  Set(ByVal value As String)
    _album = value
    NotifyPropertyChanged("Album")
  End Set
End Property

Public Property Artist As String
  Get
    Return _artist
  End Get
  Set(ByVal value As String)
    _artist = value
    NotifyPropertyChanged("Artist")
  End Set
End Property

Public Property Released As String
  Get
    Return _released
  End Get
  Set(ByVal value As String)
    _released = value
    NotifyPropertyChanged("Released")
  End Set
End Property

Public Property Genre As String
  Get
    Return _genre
  End Get
  Set(ByVal value As String)
    _genre = value
    NotifyPropertyChanged("Genre")
  End Set
End Property

Retournez au concepteur de vues pour MainPage en sélectionnant l'onglet MainPage.xaml. Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Dessinez un Canvas sur la page, ensuite dans le volet XAML au-dessus de </Grid> modifiez la ligne Canvas1 comme ceci :

<Canvas Height="35" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></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 du 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="Save" Content="Save..."/>

Voir ci-dessous :

Puis dans la section Contrôles Silverlight communs de la Boite à outils, sélectionnez le contrôle DataGrid :

Dessinez une DataGrid sur la page, en dessous du Canvas avec les boutons, et dans le volet XAML au-dessus de </Grid> et en dessous de </Canvas> modifiez DataGrid1 comme ceci :

<data:DataGrid Height="265" Width="400" Margin="0,35,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" ItemsSource="{Binding}" Name="Data"/>

Voir ci-dessous :

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de la ligne Partial Public Class MainPage tapez le code suivant :

Imports System.Collections.ObjectModel
Imports System.IO.IsolatedStorage
Imports System.Xml.Linq

Puisque nous en sommes à la vue de code pour MainPage.xaml, en dessous de la ligne Inherits UserControl tapez ceci :

Public Filename As String = "Music.xml"
Public Property Collection As New ObservableCollection(Of Music)

En étant toujours dans la vue de code, dans le constructeur Public Sub New() en dessous de la ligne InitializeComponent() tapez ceci :

Using Storage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
  If Storage.FileExists(Filename) Then ' Open File
    Using OpenFile As New IsolatedStorageFileStream(Filename, IO.FileMode.Open, Storage)
      Dim _reader As XmlReader = XmlReader.Create(OpenFile)
      Dim _doc As XDocument = XDocument.Load(_reader)
      Collection.Clear()
      For Each Element As XElement In _doc.Root.<music>
        Collection.Add(New Music With {
          .Album = Element.<album>.Value,
          .Artist = Element.<artist>.Value,
          .Released = Element.<released>.Value,
          .Genre = Element.<genre>.Value})
      Next
    End Using
  Else ' New File
    Collection.Add(New Music With {
      .Album = "Tubular Bells",
      .Artist = "Mike Oldfield",
      .Released = "1973",
      .Genre = "Prog Rock"})
  End If
End Using
Data.DataContext = Collection

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

Double-cliquez sur le bouton Add et tapez ceci dans le Sub Add_Click :

Collection.Add(New Music)

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit 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 :

Collection.Remove(CType(Data.SelectedItem, Music))

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

Double-cliquez sur le bouton Save... et tapez ceci dans le Sub Save_Click :

Dim _doc As XDocument =
  <?xml version="1.0" encoding="utf-8"?>
  <collection>
    <%= From Item As Music In Collection Select
      <music>
        <album><%= Item.Album.Trim %></album>
        <artist><%= Item.Artist.Trim %></artist>
        <released><%= Item.Released.Trim %></released>
        <genre><%= Item.Genre.Trim %></genre>
      </music>
    %>
  </collection>
Using Storage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
  Using SaveFile As New IsolatedStorageFileStream(Filename, IO.FileMode.Create, Storage)
    _doc.Save(SaveFile)
  End Using
End Using

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 Add ensuite cliquez sur la boîte Untitled pour saisir des données sur un nouvel album, données qui peuvent être insérées dans toutes les boîtes et qui peuvent ensuite être enregistrées :

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.