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

La liaison de données basique avec la DataGrid 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 22 : Liaison de données

- 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

- La liaison de données basique avec la DataGrid 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

- Conclusion

- Liens

- Remerciements

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - Basic Databinding with DataGrid in Silverlight.

Introduction

La liaison de données est l'une des principales fonctionnalités de Silverlight où les éléments peuvent être liés aux données, qui dans ce cas sera une collection de données pouvant être sauvegardée en utilisant l'IsolatedStorage.

La liaison de données basique avec la DataGrid 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 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 :

Étape 5

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 :

Étape 6

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

Étape 7

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

Étape 8

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

Étape 9

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

Étape 10

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 :

Étape 11

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 :

Étape 12

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

Étape 13

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 :

Étape 14

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

Étape 15

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 :

Étape 16

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

Étape 17

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)

Étape 18

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

Étape 19

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)

Étape 20

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

Étape 21

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

Étape 22

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 23

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 :

Étape 24

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

Ceci était un exemple de liaison de données simple. Il utilise LINQ pour lire les données d'un IsolatedStorage - qui est une fonctionnalité de Silverlight. Il enregistre également les données, ceci étant accompli en utilisant la syntaxe XML inline prise en charge dans Visual Basic. Cet exemple peut être utilisé comme base pour n'importe quelle application basée sur les données, à vous de le personnaliser !

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.