Les bases du XAML pour le développement Windows Phone

Dans ce tutoriel, nous allons faire un tour d’horizon du XAML en présentant les éléments de base du langage et leur utilisation dans la description des interfaces d’applications Windows Phone.

Le XAML (Extended Application Markup Language, prononcé « Zammel ») est un langage déclaratif, à balises, utilisé pour créer les interfaces utilisateur. Chaque élément du XAML représente un objet instancié et est typiquement visuel, mais peut aussi représenter des sources de données ou divers types d’objets. Il est possible de décrire l’interface d’une application soit dans l’éditeur soit à partir du designer. Mais bien que le designer de Visual Studio évolue constamment, certaines tâches ne peuvent être effectuées que depuis l’éditeur.

STRUCTURE D’UNE PAGE

<phone:PhoneApplicationPage
x:Class="LesBasesDuXAML.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Add content-->
</Grid>
</phone:PhoneApplicationPage>

En gros disons que le fichier de départ est le fichier MainPage.xaml, c’est celui qui définit l’interface utilisateur initiale. L’élément racine est PhoneApplicationPage. L’attribut x:Class pointe sur le nom de la classe correspondante définie dans le code-behind (code C# ou Visual Basic).

LES ESPACES DE NOMS

A l’intérieur de la déclaration de la classe, vous verrez une série d’espaces de noms XML qui commencent par xmlns suivi de deux points, de la dénomination de l’espace de noms, d’un signe égal et d’un chemin vers l’assembly que l’espace de noms représente. Par exemple:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

Dans ce cas, l’espace de noms XML phone représente l’espace de noms Microsoft.Phone.Controls dans l’assembly Microsoft.Phone. Une fois l’espace de noms déclaré, vous pouvez utiliser tous ses objets dans le XAML. Par exemple, vous pouvez utiliser le contrôle LongListSelector de l’espace de noms phone à l’aide de la balise :

<phone:LongListSelector />

Par ailleurs, certains espaces de noms XML n’ont pas de dénomination. En effet, il existe un espace de noms par défaut qui s’applique à tous les éléments pour lesquels on n’a pas spécifié d’espace de noms. L’élément Grid par exemple est dans l’espace de noms par défaut et se déclare de la manière suivante :

<Grid x:Name="LayoutRoot" Background="Transparent">…

De façon élémentaire, les espaces de noms sont créés automatiquement lorsqu’un élément est glissé du Toolbox et est déposé sur le designer. Mais comment référencer une assembly qui n’est pas disponible depuis le Toolbox? Pour déclarer un espace de noms XML il suffit de taper xmlns:, d’ajouter  un nom unique et de le suivre du signe égal. L’IntelliSense vous proposera une liste d’assemblies référencées dans le projet, dans laquelle vous devez choisir.

scrsht_IntelliSense

LA SYNTAXE DU XAML

En gros, un élément XAML est représenté par une balise possédant ou non des attributs.

Le contrôle Button par exemple peut être défini de l’une des façons suivantes :

<Button></Button>
ou
<Button />

Les propriétés d’objets sont définies à l’aide d’attributs. Par exemple, les propriétés Background et Content du contrôle Button peuvent lui être ajoutées comme ceci :

<Button Content="Valider" Background="Green"/>

Ou plutôt comme ceci:
<Button Content="Valider">
<Button.Background>Green</Button.Background>
</Button>

LES PROPRIÉTES RATTACHÉES

Les propriétés rattachées sont celles pouvant être utilisées par d’autres classes. La syntaxe de base est de la forme « objet.propriété« . Par exemple ci-dessous, les éléments StackPanel et Grid utilisent la propriété rattachée Grid.Row pour déterminer leur emplacement dans la grille principale:

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0">
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
</Grid>
</Grid>

LES EXTENSIONS DE BALISAGE

Les extensions de balisage sont des expressions se trouvant entre des accolades pour indiquer que la syntaxe est différente de celle du XAML standard.

Typiquement, les extensions de balisage font référence à des ressources ou à des expressions de Binding (liaison à une source de données). Dans l’exemple suivant, l’élément TextBlock est lié à la donnée « MonTitre » par sa propriété Text et à la ressource PhoneTextNormalStyle par le Style.

<TextBlock x:Name="MonApplication" Text="{Binding MonTitre}" Style="{StaticResource PhoneTextNormalStyle}"/>

J’espère que cet article vous a été utile, et à très bientôt pour un nouvel article. 😉

2 commentaires

  • Merci pour le tutoriel, cella me donne une réelle vue globale sur le XAML : Déclaration des espaces de noms, différentes possibilités de déclaration des contrôles et utilisation des propriétés de contrôle, brève description d’une page XAML.

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *