Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Votre première application Silverlight 2.0

Par tannoy (Antony Chauviré), le 03 juin 2008

Nous allons à travers cet article créer une première application Silverlight simple avec Visual Studio 2008. Nous verrons comment créer un projet, travailler avec des composants d’interfaces et générer des événements.

Avant de pouvoir créer une application Silverlight 2.0, vous devez installer les outils Silverlight pour Visual Studio (Silverlight Tools Beta 1 for Visual Studio 2008). Vous les trouverez à cette adresse :

http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en

Nous utiliserons aussi Expression Blend 2.5 pour créer l’interface graphique de notre application. Vous pouvez le télécharger à cette adresse :

http://www.microsoft.com/downloads/details.aspx?FamilyID=32a3e916-e681-4955-bc9f-cfba49273c7c&DisplayLang=en

Création du projet Silverlight dans Visual Studio 2008

Nous allons créer un nouveau projet en cliquant sur le menu Fichier/Nouveau/Projet. Nous allons sélectionner Visual C#/Silverlight en tant que type de projet et nous choisirons Silverlight Application en tant que modèle.

Nous allons ensuite ajouter un projet de Site web afin de tester notre application Silverlight. En effet, un projet de type Silverlight ne génère qu’un fichier binaire de type XAP, qui n’est autre qu’un fichier ZIP contenant notamment une dll contenant elle-même le code C# compilé. En ajoutant un projet de type Site Web, Visual Studio va créer 2 pages, aspx et html, contenant le code nécessaire à l’intégration de notre application Silverlight.

Création de l’interface dans Expression Blend 2.5

Nous allons ouvrir le projet créé précédemment en cliquant sur l’onglet Projects/Open project puis en choisissant le fichier de la solution. Vous pouvez aussi depuis Visual Studio, faire un clic droit sur le fichier Page.xaml et choisir Open in Expression Blend.

Pour visualiser les fichiers du projet, nous allons cliquer sur le panneau Project.

Nous allons ouvrir le fichier page.xaml. Notre interface sera composée d’un champ de texte statique, d’un champ de texte de saisie, d’un bouton et d’un champ de texte dynamique.

La barre d’outils se trouve à gauche de l’interface d’Expression Blend. En restant cliquer sur un outil, vous pouvez faire apparaître un sous-menu contenant d’autres outils.

L’outil TextBlock permet d’insérer un champ de texte statique. L’insertion peut se faire en double cliquant sur l’outil ou en réalisant un cliquer-glisser dans le document.

Nous allons donc insérer un TextBlock et modifier son texte par « Saisir un texte : ».

Nous allons utiliser l’outil TextBox pour insérer un champ de saisie pour lequel nous supprimerons le texte par défaut. Dans le panneau Properties, nous allons donner un nom à notre contrôle. Nous l’appellerons saisie. Il est important de prendre la bonne habitude de nommer tous vos contrôles afin de pouvoir ensuite les utiliser dans le code.

Pour terminer notre interface, nous insérerons 2 autres contrôles, un Button et un TextBlock. Ces 2 contrôles seront nommés btAfficher et affichage.

Notre interface ressemblera donc à ceci.

Création de l’interactivité dans Visual Studio 2008

Nous allons ouvrir le fichier page.xaml et double cliquer sur l’onglet XAML pour afficher le panneau de code en plein écran.

Nous souhaitons, lors du clic sur le bouton, afficher dans le champ de texte dynamique ce qu’a saisi l’utilisateur. Nous allons devoir ajouter l’événement Click à notre bouton.

Nous allons ensuite définir le gestionnaire d’événements, c'est-à-dire la méthode qui sera appelée en réponse à l’événement. Visual Studio nous propose de créer le gestionnaire d’événements de façon automatique.

Il suffit d’appuyer sur la touche Entrée ou Tabulation pour définir automatiquement le gestionnaire d’événements.

Afin d’atteindre le gestionnaire d’événements pour lui définir les actions qu’il doit exécuter, nous allons faire un clic droit sur l’événement Click et choisir Naviguer vers le gestionnaire d’événements.

Visual Studio nous ouvre alors le fichier Page.xaml.cs, le fichier de Code-Behind de notre application et se place dans le bloc d’instructions de la méthode btAfficher_Click.

Nous souhaitons afficher dans le champ de texte dynamique nommé affichage, la combinaison d’un texte : « Vous avez saisi » et de la saisie effectuée par l’utilisateur. Nous allons donc saisir ce code :

affichage.Text = "Vous avez saisi " + saisie.Text;

Afin de tester votre application, vous allez appuyer sur la combinaison de touches CTRL+F5.