Silverlight - Premiers pas

Dans ce chapitre, nous examinerons un exemple fonctionnel de Silverlight. Nous avons besoin de deux choses -

• Tout d'abord, nous avons besoin d'une page Web. Silverlight est destiné aux applications Internet riches.Il est conçu pour fonctionner à l'intérieur d'un navigateur Web dans le cadre d'une page Web. La page doit intégrer une balise appropriée pour charger le plug-in Silverlight. Il peut également inclure la logique permettant de détecter si Silverlight est installé et peut fournir une interface utilisateur de secours, lorsqu'il est absent.

• La deuxième chose dont nous avons besoin est le contenu Silverlight lui-même. Ce didacticiel se concentrera sur le modèle de programmation .NET pour Silverlight. Nous allons créer une application Silverlight compilée contenant un mélange de XAML, le langage de maquette que nous utilisons pour définir les interfaces utilisateur Silverlight et du code .NET écrit en C #.

Créer une page Web

Le moyen le plus simple de commencer à utiliser Silverlight est de créer un site Web ordinaire avec des pages HTML et sans code côté serveur. Prenons un exemple très simple.

Step 1 - Ouvert Visual Studio. Clique leFile menu, pointez sur New puis cliquez sur Project.

Step 2 - Un New Projectla boîte de dialogue s'ouvre. En dessous deTemplates, sélectionnez Visual C# et alors click Silverlight. Dans le volet droit, choisissez Application Silverlight.

Entrez un nom de projet et un emplacement sur votre disque dur pour enregistrer votre projet, puis cliquez sur OK pour créer le projet.

Le projet Silverlight lui-même va simplement créer le contenu Silverlight, et ce contenu n'est qu'un atout parmi d'autres qui constitueront l'ensemble de l'application Web.

Cliquez sur OK.

Step 3 - Vérifiez le Host the Silverlight application checkbox. La valeur par défaut est un projet d'application Web ASP.NET.

Step 4- MS-Visual Studio a créé deux projets, le projet Silverlight et une application Web ASP.NET. Maintenant, nous avons besoin d'une application Web ASP.NET. Vous pouvez le voir dans leSolution Explorer comme indiqué ci-dessous.

Tout ce qui peut servir le contenu via HTTP fera l'affaire, mais c'est Visual Studio, et il comprend la technologie Web ASP.NET, c'est donc ce qu'il nous donne.

Pour démontrer que Silverlight ne dépend d'aucune technologie particulière côté serveur, supprimons ceci .aspx fichier, ne laissant que le fichier HTML statique.

Step 5- Cliquez avec le bouton droit sur FirstExampleTestpage.aspx. Dans la liste des options, cliquez surDelete.

Step 6 - Ensemble FirstExampleTestPage.html comme le Start page.

le MainPage.xamlfile définit l'interface utilisateur du contenu Silverlight. Soit vous pouvez écrire directement du code XAML, soit vous pouvez également utiliserToolbox pour faire glisser et déposer différents éléments de l'interface utilisateur.

Step 7 - Ci-dessous est un code simple en MainPage.xaml dans lequel un Button et un TextBlock sont définis à l'intérieur du StackPanel.

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
		
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5">
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
	
</UserControl>

Step 8 - Cet exemple suppose que vous avez créé une méthode de gestion des événements nommée ClickMe_Click. Voici à quoi cela ressemble dans leMainPage.xaml.cs fichier.

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

Step 9 - Une application Silverlight peut être exécutée sur tous les navigateurs installés.

Step 10 - Lorsque le code ci-dessus est compilé et exécuté, vous verrez la page Web suivante.

Step 11 - Maintenant, lorsque vous cliquez sur le Click Me bouton, il mettra à jour le texte dans le TextBlock comme indiqué ci-dessous.

Nous vous recommandons d'exécuter l'exemple ci-dessus en ajoutant d'autres éléments d'interface utilisateur.