Conception d'une interface utilisateur pour une application WPF

Article
08/21/2008

Mise à jour : novembre 2007

Vous pouvez concevoir une interface utilisateur pour une application Windows Presentation Foundation (WPF) de la même manière que pour une application Windows Form. Faites glisser les contrôles de la Boîte à outils vers l'aire de conception. L'environnement de développement intégré (IDE, Integrated Development Environment) est différent pour les applications WPF. L'IDE de WPF possède non seulement une fenêtre Propriétés et une Boîte à outils, mais également un éditeur XAML. Le langage XAML (eXtensible Application Markup Language) permet de créer une interface utilisateur. L'emplacement de l'éditeur XAML est indiqué dans l'illustration ci-dessous. Pour plus d'informations, consultez Procédure pas à pas : édition de XAML dans le concepteur WPF.

Éditeur XAML

Fenêtre XAML

De même que vous pouvez créer un contrôle en écrivant manuellement du code dans le cadre d'un développement Windows Forms, vous pouvez utiliser le balisage XAML pour créer des contrôles. Dans la plupart des cas, vous n'allez pas écrire du XAML pour créer des contrôles, car il est beaucoup plus facile de faire glisser les contrôles à partir de la Boîte à outils et de laisser Visual C# Express générer automatiquement le XAML. Vous pouvez ensuite modifier le balisage XAML pour changer les attributs du contrôle (Height ou Text, par exemple). Par exemple, le balisage XAML suivant ressemble au balisage généré lorsque vous double-cliquez sur un contrôle Bouton pour l'ajouter à une fenêtre WPF.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

Les attributs que vous pouvez modifier, tels que la largeur et la hauteur, s'affichent par défaut dans la couleur de police rouge. Vous pouvez modifier directement les valeurs dans le balisage XAML, comme indiqué dans l'exemple suivant.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

Pour créer une application WPF

Dans le menu Fichier, cliquez sur Nouveau projet.
Dans la boîte de dialogue Nouveau projet, cliquez sur Application WPF.
Dans la zone Nom, tapez Application WPF, puis cliquez sur OK.

Un nouveau projet WPF est créé. Une nouvelle fenêtre nommée Window1 s'affiche et le balisage XAML est visible dans l'éditeur XAML de l'IDE de Visual C# Express.
Cliquez sur la fenêtre Window1 pour la sélectionner.
En mode XAML,modifiez l'attribut Title de l'élément Window en WPF Application.

Le texte qui figure dans la barre de titre de Window1 devient Application WPF.

Ajout de contrôles à une fenêtre WPF

Vous pouvez ajouter des contrôles à la fenêtre WPF en les faisant glisser à partir de la Boîte à outils. Pour plus d'informations, consultez Contrôles WPF communs.

Pour ajouter un contrôle à la fenêtre WPF

À partir de la Boîte à outils, faites glisser un contrôle TextBox vers la partie supérieure droite de la fenêtre WPF.
Cliquez sur le contrôle TextBox pour le sélectionner.
Dans la fenêtre Propriétés, cliquez sur la première flèche (gauche) de la propriété HorizontalAlignment, comme indiqué ci-dessous.

Propriété HorizontalAlignment

Le TextBox est déplacé du côté droit de la fenêtre WPF vers le côté gauche.
Définissez les propriétés suivantes pour le TextBox.

Propriété

Valeur

VerticalAlignment

Haut

Largeur

75

Hauteur

26
Dans l'éditeur XAML, modifiez l'attribut Width de l'élément TextBox en 140et modifiez l'élément Margin en 30, 56, 0, 0, comme indiqué dans l'exemple suivant.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
La largeur et l'emplacement du TextBox changent une fois que vous avez tapé les nouvelles valeurs.
Ajoutez un contrôle Bouton à la fenêtre WPF, à côté du TextBox.
Modifiez le texte qui se trouve entre les balises d'ouverture et de fermeture de Button, de telle sorte que Button devienne Submit, comme indiqué dans l'exemple suivant.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
Le texte du bouton change une fois que vous avez tapé la nouvelle valeur.
Appuyez sur F5 pour exécuter le programme. Une fenêtre qui contient la zone de texte et le bouton que vous venez d'ajouter s'affiche.

Notez que même si vous pouvez cliquer sur le bouton et taper du texte dans la zone de texte, rien ne se produit lorsque vous effectuez ces actions. Vous devez ajouter des gestionnaires d'événements aux contrôles, puis écrire du code qui indique à l'ordinateur ce qu'il doit faire lorsque l'utilisateur clique sur le bouton. Pour plus d'informations, consultez Comment : créer des gestionnaires d'événements pour des contrôles WPF.