XAML de base

Dans le chapitre précédent, nous avons vu ce qu'est XAML et à quoi il sert. Mais comment créer un contrôle en XAML ? Comme vous allez le voir dans l'exemple suivant, créer un contrôle en XAML est aussi simple que d'écrire son nom entouré de guillemets. Par exemple, un Button ressemble à :

<Button>

Les balises XAML doivent êtres refermées, soit en écrivant la balise de fin correspondante :

<Button></Button>

Ou

<Button />

Pour beaucoup de contrôle, il est possible de définir un contenu entre les balises de début et de fin. Par exemple pour le contrôle Button ce contenu correspond au texte affiché sur le contrôle.

<Button>A button</Button>

Si HTML est indifférent aux majuscules ou minuscules, XAML ne l'est pas. Ceci car le nom du contrôle doit correspondre à un type du framework .NET. C'est également le cas pour les noms des attributs qui correspondent aux propriétés du contrôle. Voici un Button où l'on définit quelques propriétés en ajoutant des attributs à la balise.

<Button FontWeight="Bold" Content="A button" />

Nous définissons la propriété FontWeight pour obtenir un texte en gras et ensuite nous définissons la propriété Content, ce qui revient au même que d'écrire le texte entre les balises de début et de fin. Cependant tous les attributs d'un contrôle peuvent aussi être définis comme suit en utilisant la notation Contrôle-Point-Propriété :

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Le résultat est exactement le même que celui dessus : il s'agit uniquement de syntaxe (et rien d'autre). Cependant beaucoup de contrôles autorisent d'autres contenus que du texte, par exemple d'autres contrôles. Voici un exemple où pour écrire des textes de différentes couleurs nous définissons plusieurs TextBlock dans le contrôle Button.

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

La propriété Content n'autorise qu'un seul élément enfant. Nous utilisons donc un WrapPanel pour contenir les différents blocs de texte colorés. Les Panels, comme le WrapPanel, jouent un rôle important dans WPF et nous les expliquerons plus en détail plus tard. Pour le moment considérez les comme des containers pour d'autres contrôles.

La marquage suivant exprime exactement la même chose et donne donc le même résultat :

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Code contre XAML

Les exemples ci-dessus montrent qu'il est facile d'écrire du XAML ... et ce de plusieurs façons. Et si vous trouvez que les exemples ci-dessus sont fastidieux, comparez-les au code C# équivalent :

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Bien sûr, l'exemple ci-dessus pourrait être écrit moins explicitement avec des raccourcis syntaxiques mais la conclusion reste la même : XAML est très concis pour décrire des interfaces.