Partager via

Tutoriel : Créer une application WPF avec .NET

Dans ce tutoriel, vous allez apprendre à utiliser Visual Studio pour créer une application WPF (Windows Presentation Foundation). Avec Visual Studio, vous ajoutez des contrôles aux fenêtres et gérez les événements. À la fin de ce tutoriel, vous disposez d’une application simple qui ajoute des noms à une zone de liste.

Dans ce tutoriel, vous allez :

  • Créez une application WPF.
  • Ajoutez des contrôles à une fenêtre.
  • Gérez les événements de contrôle pour fournir des fonctionnalités d’application.
  • Exécutez l’application.

Voici une préversion de l’application créée lors de ce tutoriel :

Exemple d’application terminé pour le didacticiel WPF

Conditions préalables

Créer une application WPF

La première étape de création d’une application consiste à ouvrir Visual Studio et à générer l’application à partir d’un modèle.

  1. Ouvrez Visual Studio.

  2. Sélectionnez Créer un projet.

    Capture d’écran de la boîte de dialogue démarrer à partir de Visual Studio 2026. Le bouton « Créer un projet » est mis en surbrillance avec une zone rouge.

  3. Dans la zone Rechercher des modèles , tapez wpf et attendez que les résultats de la recherche s’affichent.

  4. Dans la liste déroulante du langage de code , choisissez C# ou Visual Basic.

  5. Dans la liste des modèles, sélectionnez Application WPF , puis Sélectionnez Suivant.

    Important

    Ne sélectionnez pas le modèle d’application WPF (.NET Framework).

    L’image suivante montre les modèles de projet C# et Visual Basic .NET. Si vous avez appliqué le filtre de langage de code , le modèle correspondant est répertorié.

    Capture d’écran de la boîte de dialogue « Créer un projet » de Visual Studio avec « wpf » dans la zone de recherche et les modèles d’application WPF mis en surbrillance.

  6. Dans la fenêtre Configurer votre nouveau projet, définissez le nom du projet sur Noms , puis sélectionnez Suivant.

    Vous pouvez également enregistrer votre projet dans un autre dossier en ajustant le chemin de l'emplacement .

    Capture d’écran de la boîte de dialogue « Configurer votre nouveau projet » à partir de Visual Studio 2026. La zone de texte « Nom du projet » contient le mot « Noms » et est mis en surbrillance avec une zone rouge. Le bouton « Suivant » est également mis en surbrillance avec une zone rouge.

  7. Enfin, dans la fenêtre Informations supplémentaires , sélectionnez .NET 10.0 (support à long terme) pour le paramètre Framework , puis sélectionnez Créer.

    Capture d’écran de la boîte de dialogue « Informations supplémentaires » de Visual Studio 2026. La zone de liste déroulante « Framework » comporte « .NET 10 (Support à long terme) » sélectionnée et mise en surbrillance avec une zone rouge. Le bouton « Créer » est également mis en surbrillance avec une zone rouge.

Une fois que Visual Studio a généré l’application, elle ouvre la fenêtre du concepteur XAML pour la fenêtre par défaut, MainWindow. Si le concepteur n’est pas visible, double-cliquez sur le fichier MainWindow.xaml dans la fenêtre Explorateur de solutions pour ouvrir le concepteur.

Parties importantes de Visual Studio

La prise en charge de WPF dans Visual Studio comporte cinq composants importants avec lesquels vous interagissez lors de la création d’une application :

Les composants importants de Visual Studio 2026, vous devez savoir quand vous créez un projet WPF pour .NET.

  1. Explorateur de solutions

    Tous vos fichiers projet, code, fenêtres et ressources apparaissent dans cette fenêtre.

  2. Propriétés

    Cette fenêtre affiche les paramètres de propriété que vous pouvez configurer en fonction du contexte de l’élément sélectionné. Par exemple, si vous sélectionnez un élément dans l’Explorateur de solutions, les paramètres liés au fichier sont affichés. Si un objet dans le Concepteur est sélectionné, les propriétés du contrôle ou de la fenêtre sont affichées.

  3. Boîte à outils

    La boîte à outils contient tous les contrôles que vous pouvez ajouter à une surface de conception. Pour ajouter un contrôle à la surface actuelle, double-cliquez sur un contrôle ou faites glisser et déposer le contrôle vers le concepteur. Il est courant d’utiliser plutôt la fenêtre de l’éditeur de code XAML pour concevoir une interface utilisateur ,tout en utilisant la fenêtre du concepteur XAML pour afficher un aperçu des résultats.

  4. Concepteur XAML

    Il s’agit du concepteur d’un document XAML. Il est interactif et vous pouvez faire glisser-déplacer des objets à partir de la boîte à outils. En sélectionnant et en déplaçant des éléments dans le concepteur, vous pouvez composer visuellement l’interface utilisateur de votre application.

    Lorsque le concepteur et l’éditeur sont visibles, les modifications apportées à l’une sont reflétées dans l’autre.

    Lorsque vous sélectionnez des éléments dans le concepteur, la fenêtre Propriétés affiche les propriétés et les attributs relatifs à cet objet.

  5. Éditeur de code XAML

    Il s’agit de l’éditeur de code XAML pour un document XAML. L’éditeur de code XAML est un moyen de créer votre interface utilisateur manuellement sans concepteur. Le concepteur peut définir automatiquement des propriétés sur un contrôle lorsque le contrôle est ajouté dans le concepteur. L’éditeur de code XAML vous donne beaucoup plus de contrôle.

    Lorsque le concepteur et l’éditeur sont visibles, les modifications apportées à l’une sont reflétées dans l’autre. Lorsque vous naviguez dans l’éditeur de code, la fenêtre Propriétés affiche les propriétés et les attributs relatifs à cet objet.

Examiner le code XAML

Après avoir créé votre projet, l’éditeur de code XAML s’ouvre. Il affiche une quantité minimale de code XAML pour afficher la fenêtre. Si l’éditeur n’est pas ouvert, double-cliquez sur l’élément MainWindow.xaml dans la fenêtre Explorateur de solutions . Le code XAML doit ressembler à l’exemple suivant :

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Important

Si vous codez en Visual Basic, le code XAML est légèrement différent, en particulier l’attribut x:Class=".." . XAML dans Visual Basic utilise le nom de classe de l’objet et omet l’espace de noms de la classe.

Pour mieux comprendre le code XAML, nous allons le décomposer. XAML est simplement XML que WPF traite pour créer une interface utilisateur. Pour comprendre le code XAML, vous devez, au minimum, être familiarisé avec les principes de base du code XML.

La racine <Window> du document représente le type d’objet décrit par le fichier XAML. Le fichier déclare huit attributs, et ils appartiennent généralement à trois catégories :

  • Espaces de noms XML

    Un espace de noms XML fournit une structure au code XML. Il détermine le contenu XML que vous pouvez déclarer dans le fichier.

    L’attribut principal xmlns importe l’espace de noms XML pour l’intégralité du fichier. Dans ce cas, il correspond aux types qui sont déclarés par WPF. Les autres espaces de noms XML déclarent un préfixe et importent d’autres types et objets pour le fichier XAML. Par exemple, l’espace de noms xmlns:local déclare le préfixe local et associe aux objets déclarés par votre projet, ceux déclarés dans l’espace de noms du code Names.

  • attribut x:Class

    Cet attribut mappe le <Window> au type défini par votre code : le fichier MainWindow.xaml.cs ou MainWindow.xaml.vb, qui est de la classe Names.MainWindow en C# et MainWindow en Visual Basic.

  • attribut Title

    Tout attribut normal que vous déclarez sur l’objet XAML définit une propriété de cet objet. Dans ce cas, l’attribut Title définit la Window.Title propriété.

Modifier la fenêtre

Pour notre exemple d’application, cette fenêtre est trop grande et la barre de titre n’est pas descriptive. Résolvons ce problème.

  1. Tout d’abord, exécutez l’application en appuyant sur la touche F5 ou en sélectionnant Déboguer>Démarrer le débogage dans le menu.

    Vous voyez la fenêtre par défaut générée par le modèle, sans aucun contrôle et un titre de MainWindow :

    Une application WPF vide

  2. Modifiez le titre de la fenêtre en définissant Title sur Names.

  3. Modifiez la taille de la fenêtre en définissant Height sur 180 et Width sur 260.

    <Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Préparer la mise en page

WPF fournit un système de disposition puissant avec de nombreux contrôles de disposition différents. Les contrôles de disposition aident à placer et à dimensionner les contrôles enfants, et peuvent même le faire automatiquement. Le contrôle par défaut de disposition fourni dans ce XAML est le contrôle <Grid>.

Le contrôle de grille vous permet de définir des lignes et des colonnes, comme une table, et de placer des contrôles dans les limites d’une combinaison de lignes et de colonnes spécifique. Vous pouvez ajouter n’importe quel nombre de contrôles enfants ou d’autres contrôles de disposition à la grille. Par exemple, vous pouvez placer un autre <Grid> contrôle dans une combinaison de lignes et de colonnes spécifique, et cette nouvelle grille peut ensuite définir davantage de lignes et de colonnes et avoir ses propres enfants.

Le contrôle de grille place ses contrôles enfants dans les lignes et les colonnes. Une grille a toujours une seule ligne et une colonne déclarées, ce qui signifie que la grille par défaut est une seule cellule. Ce paramètre par défaut ne vous donne pas beaucoup de flexibilité pour placer des contrôles.

Ajustez la disposition de la grille pour les contrôles requis pour cette application.

  1. Ajoutez un nouvel attribut à l’élément <Grid> : Margin="10".

    Ce paramètre rapproche la grille depuis les bords de la fenêtre et la rend plus attrayante.

  2. Définissez deux lignes et deux colonnes, en divisant la grille en quatre cellules :

    <Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

  3. Sélectionnez la grille dans l’éditeur de code XAML ou le concepteur XAML. Le concepteur XAML affiche chaque ligne et colonne :

    Application WPF avec la marge définie sur une grille

Ajouter le premier contrôle

Maintenant que la grille est configurée, vous pouvez commencer à y ajouter des contrôles. Commencez par ajouter le contrôle de l'étiquette.

  1. Créez un <Label> élément à l’intérieur de l’élément <Grid> , après les définitions de ligne et de colonne. Définissez le contenu de l’élément sur la valeur de chaîne Names.

    <Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>

    Le <Label>Names</Label> définit le contenu Names. Certains contrôles comprennent comment gérer le contenu, d’autres ne le font pas. Le contenu d’un contrôle est mappé à la Content propriété. Si vous définissez le contenu via la syntaxe d’attribut XAML, utilisez ce format : <Label Content="Names" />. Les deux façons accomplissent la même chose, en configurant le contenu de l'étiquette pour afficher le texte Names.

    L’étiquette prend la moitié de la fenêtre, car elle a été automatiquement positionnée sur la première ligne et la colonne de la grille. Pour la première ligne, vous n’avez pas besoin de cet espace, car vous n’allez utiliser cette ligne que pour l’étiquette.

  2. Modifiez l’attribut Height du premier <RowDefinition> de * à Auto.

    La valeur Auto dimensionne automatiquement la ligne de la grille à la taille de son contenu, dans ce cas, le contrôle de libellé.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

    Le designer montre maintenant l’étiquette occupant peu de la hauteur disponible. Il y a plus de place pour la ligne suivante à occuper.

    Application WPF avec la marge définie sur une grille et un contrôle d’étiquette dans la première ligne

Positionnement du contrôle

Parlons de l’emplacement des contrôles. L’étiquette que vous avez créée dans la section précédente est automatiquement placée dans la ligne 0 et la colonne 0 de la grille. La numérotation des lignes et des colonnes commence à 0 et incrémente de 1. Le contrôle ne connaît rien à propos de la grille et le contrôle ne définit aucune propriété pour contrôler son positionnement dans la grille.

Comment indiquer à un contrôle d’utiliser une autre ligne ou colonne lorsque le contrôle n’a aucune connaissance de la grille ? Propriétés attachées ! La grille tire parti du système de propriétés fourni par WPF.

Le contrôle de grille définit de nouvelles propriétés que les contrôles enfants peuvent attacher à eux-mêmes. Les propriétés n'existent pas réellement sur le contrôle lui-même, mais elles deviennent disponibles pour le contrôle une fois qu'il est ajouté à la grille.

La grille définit deux propriétés pour déterminer la position de ligne et de colonne d’un contrôle enfant : Grid.Row et Grid.Column. Si vous omettez ces propriétés du contrôle, les valeurs par défaut sont 0. Par conséquent, le contrôle est placé dans la ligne 0 et la colonne 0 de la grille. Essayez de modifier le positionnement du <Label> contrôle en définissant l’attribut Grid.Column sur 1:

<Label Grid.Column="1">Names</Label>

Notez que l’étiquette est déplacée vers la deuxième colonne. Vous pouvez utiliser les propriétés jointes Grid.Row et Grid.Column pour placer les contrôles suivants que vous allez créer. Pour l’instant, restaurez l’étiquette sur la colonne 0.

Créer la liste déroulante des noms

Maintenant que la grille est correctement dimensionnée et que l’étiquette a été créée, ajoutez un contrôle de zone de liste sur la ligne située sous l’étiquette.

  1. Déclarez l'élément de contrôle <ListBox /> sous l'élément de contrôle <Label>.

  2. Attribuez à la propriété Grid.Row la valeur 1.

  3. Attribuez à la propriété x:Name la valeur lstNames.

    Une fois qu’un contrôle est nommé, vous pouvez le référencer dans le code-behind. Attribuez le nom au contrôle à l’aide de l’attribut x:Name .

Voici à quoi doit ressembler le code XAML :

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Ajouter les contrôles restants

Ajoutez une zone de texte et un bouton. L’utilisateur utilise ces contrôles pour entrer un nom à ajouter à la zone de liste. Au lieu de créer davantage de lignes et de colonnes dans la grille pour organiser ces contrôles, placez ces contrôles dans le <StackPanel> contrôle de disposition.

Le StackPanel diffère de la grille dans sa manière d'organiser les éléments de contrôle. Lorsque vous utilisez les propriétés attachées Grid.Row et Grid.Column pour indiquer à la grille où positionner les contrôles, le panneau à empilement fonctionne automatiquement. Il présente chacun de ses contrôles enfants de manière séquentielle. Il « empile » chaque contrôle après l’autre.

  1. Déclarez l'élément de contrôle <StackPanel> sous l'élément de contrôle <ListBox>.

  2. Attribuez à la propriété Grid.Row la valeur 1.

  3. Attribuez à la propriété Grid.Column la valeur 1.

  4. Définissez Margin sur 5,0,0,0.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

    Vous avez précédemment utilisé l’attribut Margin sur la grille, mais vous n’avez placé qu’une seule valeur. 10 Cette marge a une valeur de 5,0,0,0, qui est très différente de 10. La propriété margin est un Thickness type et peut interpréter les deux valeurs. Une épaisseur définit l’espace autour de chaque côté d’un cadre rectangulaire, gauche, supérieur, droit, bas, respectivement. Si la valeur de la marge est une valeur unique, elle utilise cette valeur pour les quatre côtés.

  5. À l’intérieur de l’élément <StackPanel> de contrôle, créez un élément <TextBox /> de contrôle.

    1. Attribuez à la propriété x:Name la valeur txtName.

  6. Enfin, après le <TextBox>, toujours à l’intérieur du <StackPanel>, créez un contrôle <Button>.

    1. Attribuez à la propriété x:Name la valeur btnAdd.
    2. Définissez Margin sur 0,5,0,0.
    3. Définissez le contenu à Add Name.

Voici à quoi doit ressembler le code XAML :

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

La disposition de la fenêtre est terminée. Toutefois, l’application n’a aucune logique pour être fonctionnelle. Ensuite, vous devez connecter les événements de contrôle au code et obtenir que l’application fasse réellement quelque chose.

Ajouter du code pour l’événement Click

L’<Button> que vous avez créé contient un événement Click que l'application déclenche lorsque l'utilisateur appuie sur le bouton. Abonnez-vous à cet événement et ajoutez du code pour ajouter un nom à la zone de liste. Utilisez des attributs XAML pour vous abonner à des événements, comme vous les utilisez pour définir des propriétés.

  1. Recherchez le <Button> contrôle.

  2. Définissez l’attribut Click sur ButtonAddName_Click.

    <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

  3. Générez le code du gestionnaire d’événements. Cliquez avec le bouton droit sur ButtonAddName_Click et sélectionnez Atteindre la définition.

    Cette action génère une méthode dans le code-behind qui correspond au nom du gestionnaire que vous avez fourni.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

  4. Ensuite, ajoutez le code suivant pour effectuer ces trois étapes :

    1. Vérifiez que la zone de texte contient un nom.
    2. Vérifiez que le nom entré dans la zone de texte n’existe pas déjà.
    3. Ajoutez le nom à la zone de liste.
    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Exécuter l’application

Après avoir géré l’événement, exécutez l’application. La fenêtre s’affiche et vous pouvez entrer un nom dans la zone de texte. Ajoutez le nom en sélectionnant le bouton.

Exécution d’une application WPF pour .NET dans Visual Studio 2026.

Contenu connexe

  • Last updated on