Conception d'une interface utilisateur pour une application WPF (Visual Basic)

Article
08/21/2008

Mise à jour : novembre 2007

Dans cette leçon, vous apprendrez à créer une application WPF et à ajouter des contrôles à l'interface utilisateur.

La conception d'une application Windows Presentation Foundation (WPF) est semblable à la conception d'une application Windows Forms : vous ajoutez des contrôles à une aire de conception. Mais il existe plusieurs différences. Outre un concepteur, une fenêtre Propriétés et une Boîte à outils, il existe une fenêtre qui contient le XAML. XAML signifie Extensible Application Markup Language (langage de balisage d'application extensible). Il s'agit d'un langage de balisage utilisé pour créer une interface utilisateur. L'emplacement par défaut 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

Lorsque vous créez une application Windows Forms classique, vous pouvez faire glisser un contrôle de la Boîte à outils vers un Windows Form ou vous pouvez écrire le code pour créer le contrôle si vous le souhaitez. Lorsque vous faites glisser le contrôle vers le formulaire, le code est généré automatiquement pour vous. De la même façon, lorsque vous créez une application WPF, vous pouvez créer un contrôle en écrivant la balise XAML ou en faisant glisser le contrôle vers une fenêtre WPF.

Le balisage XAML est organisé en éléments qui s'affichent dans un format hiérarchique. Les éléments sont placés entre signes "inférieur à" et "supérieur à". Il y a généralement un élément d'ouverture et un élément de fermeture. Par exemple, un simple élément Button peut s'afficher comme suit : <Button></Button>. En règle générale, vous décrivez l'aspect d'un élément en définissant des attributs, comme son emplacement, sa hauteur et sa largeur. Les attributs d'un élément s'apparentent aux propriétés d'un objet. En effet, il s'agit de descriptions d'un état ou d'un aspect physique. Les attributs sont placés entre les crochets d'ouverture et de fermeture de l'élément de fermeture. Ils sont constitués du nom de l'attribut, du symbole d'assignation (=) et de la valeur de l'attribut, placée entre guillemets. Vous pouvez spécifier la hauteur (d'un élément Button, par exemple) comme suit : <Button Height="23"></Button>.

Lorsque vous faites glisser un contrôle WPF de la boîte à outils vers le concepteur, Visual Basic Express génère automatiquement le balisage XAML du contrôle. Par exemple, le balisage XAML ressemblant aux éléments suivants est généré lorsque vous double-cliquez sur un contrôle System.Windows.Controls.Button 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>

Notez que pour l'élément Button, l'attribut Height a la valeur "23" et l'élément HorizontalAlignment a la valeur "Left". Par ailleurs, plusieurs autres attributs décrivent l'élément. Vous pouvez modifier ces attributs en remplaçant les valeurs directement dans le balisage XAML. (Par défaut, ces attributs apparaissent en rouge.) Vous pouvez également modifier les propriétés du contrôle à l'aide de la fenêtre Propriétés.

Essayez !

Pour créer une application WPF

Dans le menu Fichier, cliquez sur Nouveau projet.
Dans la boîte de dialogue Nouveau projet, dans le volet Modèles, cliquez sur Application WPF.
Dans la zone Nom, tapez Fenêtre WPF, puis cliquez sur OK.

Un nouveau projet Windows Presentation Foundation est créé. Une nouvelle fenêtre nommée Window1 s'affiche. Son balisage XAML est visible dans l'éditeur XAML de l'environnement de développement intégré (IDE) Visual Basic et se présente comme suit :
```
<Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Cliquez sur la fenêtre Window1 pour la sélectionner.
Dans l'éditeur XAML, remplacez l'attribut Title de l'élément Window (Window1) par WPF Application.

Le balisage XAML se présente alors comme suit :
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Le texte qui figure dans la barre de titre de Window1 devient Application WPF.

Essayez de modifier d'autres attributs de la fenêtre, tels que Width et Height. Lorsque vous êtes prêt, passez à la procédure suivante.

Ajout de contrôles à une fenêtre WPF

Dans cette procédure, vous ajouterez des contrôles à votre application. Pour cela, cliquez sur le contrôle dans la boîte à outils, qui se trouve habituellement sur le côté gauche de l'IDE Visual Basic, puis faites glisser le contrôle vers votre fenêtre WPF. Définissez des propriétés pour le contrôle puis modifiez le balisage XAML pour modifier le texte du contrôle et sa taille.

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.
Sélectionnez le contrôle TextBox.
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 l'objet 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 après que vous avez tapé les nouvelles valeurs.
Ajoutez un contrôle Button à la fenêtre WPF, à côté de 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 entré la nouvelle valeur.
Appuyez sur F5 pour exécuter le programme. Une fenêtre contenant la zone de texte et le bouton que vous venez d'ajouter s'affiche. Vous pouvez cliquer sur le bouton et entrer des informations dans la zone de texte. 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.

Propriété	Valeur
VerticalAlignment	Haut
Largeur	75
Hauteur	26

Étapes suivantes

Dans cette leçon, vous avez appris à créer une application WPF et à lui ajouter des contrôles. Vous avez également appris à définir les propriétés des contrôles dans la fenêtre Propriétés et à modifier les attributs de la fenêtre WPF et les contrôles en mode XAML. Dans la leçon suivante, vous découvrirez d'autres contrôles disponibles dans la Boîte à outils.

Leçon suivante : Utilisation de contrôles WPF communs.