Silverlight - Présentation de XAML

L'une des premières choses que vous rencontrerez lors de l'utilisation de Silverlight est XAML. XAML signifie Extensible Application Markup Language. C'est un langage simple et déclaratif basé sur XML.

  • En XAML, il est très facile de créer, d'initialiser et de définir les propriétés d'un objet avec des relations hiérarchiques.

  • Il est principalement utilisé pour la conception de l'interface graphique.

  • Il peut également être utilisé à d'autres fins, par exemple pour déclarer un flux de travail dans une fondation de flux de travail.

Syntaxe de base

Lorsque vous créez un nouveau projet Silverlight, vous verrez une partie du code XAML par défaut dans MainPage.xaml comme indiqué ci-dessous.

<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"> 
         
   </Grid> 
	
</UserControl>

Vous pouvez voir que le fichier XAML donné ci-dessus mentionne différents types d'informations; tous sont brièvement décrits dans le tableau ci-dessous.

Information La description
<UserControl Fournit la classe de base pour définir un nouveau contrôle qui encapsule les contrôles existants et fournit sa propre logique.
x: Class = "FirstExample.MainPage" Il s'agit d'une déclaration de classe partielle, qui connecte le balisage à ce code de classe partiel derrière, défini dans celui-ci.
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / presentation" Mappe l'espace de noms XAML par défaut pour le client / framework Silverlight.
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml" Espace de noms XAML pour le langage XAML, qui le mappe au préfixe x:.
xmlns: d = "http://schemas.microsoft.com / expression / blend / 2008" L'espace de noms XAML est destiné à la prise en charge des concepteurs, en particulier la prise en charge des concepteurs dans les surfaces de conception XAML de Microsoft Visual Studio et Microsoft Expression Blend.
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatibility/2006" Indique et prend en charge un mode de compatibilité de balisage pour la lecture de XAML.
> Fin de l'élément objet de la racine.
<Grid> </Grid> Ce sont les balises de début et de fin d'un objet de grille vide.
</UserControl> Fermeture de l'élément objet.

Les règles de syntaxe pour XAML sont presque similaires à celles de XML. Si vous regardez un document XAML, vous remarquerez qu'il s'agit en fait d'un fichier XML valide. Son vice versa n'est pas vrai, car en XML, la valeur des attributs doit être une chaîne, tandis qu'en XAML, il peut s'agir d'un objet différent appelé syntaxe d'élément Property.

  • La syntaxe d'un élément Object commence par un crochet à angle gauche (<) suivi du nom d'un objet, par exemple Button.

  • Les propriétés et les attributs de cet élément objet sont définis.

  • L'élément Object doit être fermé par une barre oblique (/) suivie immédiatement d'un crochet à angle droit (>).

Un exemple d'objet simple sans élément enfant est présenté ci-dessous.

<Button/>

Exemple d'élément objet avec quelques attributs -

<Button Content = "Click Me" Height = "30" Width = "60"/>

Exemple de syntaxe alternative pour définir les propriétés (syntaxe d'élément Property) -

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

Exemple d'objet avec élément enfant: StackPanel contient Textblock comme élément enfant.

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel/>

Pourquoi XAML dans Silverlight

XAML n'a pas été inventé à l'origine pour Silverlight. Il provenait de WPF, la Windows Presentation Foundation. Silverlight est souvent décrit comme un sous-ensemble de WPF. Ce n'est pas strictement vrai, car Silverlight peut faire certaines choses que WPF ne peut pas. Même là où les fonctionnalités se chevauchent, les deux sont légèrement différents dans les détails.

  • Il est plus exact de dire que WPF et Silverlight sont très similaires à bien des égards. Malgré les différences, il est toujours instructif d'examiner la fonctionnalité XAML que Silverlight a empruntée à WPF. Par exemple, Silverlight propose des primitives graphiques pour les bitmaps et les formes évolutives.

  • Il fournit également des éléments pour le rendu vidéo et audio.

  • Il a un support de texte formaté simple et vous pouvez animer n'importe quel élément. Si vous connaissez WPF, cet ensemble de fonctionnalités vous sera familier.

  • Un point important, vous ne pouvez pas prendre WPF XAML et l'utiliser dans Silverlight.

  • Bien qu'il existe des similitudes, vous trouverez également de nombreuses petites différences.

XAML et code derrière

XAML définit l'apparence et la structure d'une interface utilisateur. Cependant, si vous souhaitez que votre application fasse quelque chose d'utile lorsque l'utilisateur interagit avec elle, vous aurez besoin de code.

  • Chaque fichier XAML est généralement associé à un fichier de code source, que nous appelons le code derrière. Divers frameworks Microsoft utilisent ce terme.

  • Le code derrière devra généralement utiliser des éléments définis dans le XAML, soit pour récupérer des informations sur l'entrée utilisateur, soit pour afficher des informations à l'utilisateur.

  • Dans le code XAML ci-dessous, TextBlock et Buttonsont définis. Par défaut, lorsque l'application est exécutée, elle affichera un texte "Hello World!»Sur la page Web et un bouton.

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

  • Le code derrière peut accéder à tout élément nommé avec le x:Name directif.

  • Les éléments nommés deviennent disponibles via des champs dans le code derrière, permettant au code d'accéder à ces objets et à leurs membres de la manière habituelle.

  • le x:Prefix signifie que le nom n'est pas une propriété normale.

  • x:Name est un signal spécial au compilateur XAML que nous voulons avoir accès à cet objet dans le code derrière.

Vous trouverez ci-dessous l'implémentation de l'événement de clic de bouton dans lequel le TextBlock le texte est mis à jour.

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"; 
      } 
   } 
}

  • XAML n'est pas le seul moyen de concevoir les éléments de l'interface utilisateur. Il vous appartient de déclarer des objets en XAML ou de déclarer / écrire dans un code.

  • XAML est facultatif, mais malgré cela, il est au cœur de Silverlight conception.

  • L'objectif du codage XAML est de permettre aux concepteurs visuels de créer directement les éléments de l'interface utilisateur. Par conséquent,Silverlight vise à permettre de contrôler tous les aspects visuels de l'interface utilisateur à partir du balisage.