XAML, le cœur de notre interface

XAML c’est quoi ?

Apparu en 2006 avec l’arrivée du .NET 3.0, XAML permet la création d’applications riches, et vise à « remplacer » Windows Forms.

XAML (prononcé Zammel), acronyme d’eXtensible Application Markup Language, est un langage déclaratif basé sur du XML.

Pour ceux disposant de connaissances en programmation de sites web, vous remarquerez qu’en termes de structure, XAML est également proche du HTML. 

XAML constitue la partie principale de votre application, celle qui permettra d’afficher votre interface.

C’est votre XAML qui contiendra tout ce que vous souhaitez afficher dans votre interface : boutons, zones de saisie, listes déroulantes, tableaux affichant des données…

Avantages du XAML

Comme nous le verrons dans la suite de ce chapitre, XAML offre différents avantages par rapport à ce que l’on peut faire avec Windows Forms.

En effet, la lecture du code est bien plus simple et plus facile à mettre à jour.

Le fonctionnement et les syntaxes utilisées permettent de se retrouver plus facilement dans son code.

Fonctionnement global de XAML

On l’appelle langage déclaratif car son fonctionnement repose, comme pour le XML, sur l’ajout de balises et de tags. Ainsi, une balise permet d’ouvrir un nouvel élément et doit donc être ouverte et fermée.

Chaque élément de votre interface, bouton (Button), zone de saisie (TextBox) est nommé Control.

Dans XAML, un Control se traduit sous la forme d’une balise ouverte et fermée respectant une syntaxe bien précise.

Le non-respect de cette syntaxe entraînera des erreurs.

À ces Controls, l’ajout d’attributs permettra de mieux gérer l’interface.

Les Controls

Parmi les Controls les plus courants, nous retrouvons ceux ci-dessous :

D’où viennent les Controls ?

En passant le curseur de la souris sur un Button, nous obtenons cela :

En passant le curseur de la souris sur un TextBox, nous obtenons cela :

Cliquez sur [F12] pour obtenir davantage d’informations sur le Control.

Exemple ci-dessous, pour un Button :

Cette information peut également s’obtenir sur le site de Microsoft en recherchant les propriétés d’un Control.

Exemple ci-dessous pour un Button, on voit que l’assembly utilisée est PresentationFramework.dll. 

La syntaxe XAML

Comme indiqué précédemment, l’ajout d’un Control se fait tout d’abord par l’ouverture d’une balise à l’aide un signe inférieur, « < », suivi du nom du Control, par exemple Button, suivi d’un signe supérieur, « > ».

Avant ce dernier, l’ajout d’attributs, comme nous le verrons après, permettra de modifier l’aspect du Control.

La fermeture du Control peut se faire de deux manières :

<Button></Button> 

Cela peut également s’écrire sous la forme ci-dessous :

<Button/> 

Le résultat obtenu sera l’interface suivante :

Comment trouver les attributs disponibles ?

Dans votre navigateur Internet, tapez « XAML button properties ». Vous y retrouverez, par exemple, l’attribut Content.

L’erreur ci-dessous est obtenue dans le cas où un Control Button contient un attribut content au lieu de Content.

Le même type d’erreur sera obtenu dans le cas où un Control n’est pas correctement fermé.

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
> 

<Window  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Interface WPF" Width="200" Height="100" 
> 

WindowStartupLocation="CenterScreen" 

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Interface WPF" Width="380" Height="200" 
WindowStartupLocation="CenterScreen" 
> 

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Editions ENI - PowerShell et WPF" Width="380" Height="200" 
WindowStartupLocation="CenterScreen" 
>