Partager via

Tutoriel : Créer une application WPF avec Visual Basic

Dans ce tutoriel, vous allez créer une application à l’aide de Visual Basic dans l’environnement de développement intégré (IDE) visual Studio. Votre programme utilisera l’infrastructure d’interface utilisateur Windows Presentation Foundation (WPF). Utilisez ce didacticiel pour vous familiariser avec de nombreux outils, boîtes de dialogue et concepteurs que vous pouvez utiliser dans Visual Studio.

Dans ce tutoriel, vous allez apprendre à :

  • Créer le projet
  • Configurer la fenêtre et ajouter du texte
  • Ajouter des boutons et du code
  • Déboguer et tester l’application
  • Déboguer à l’aide de points d’arrêt
  • Générer une version de mise en production

Qu’est-ce que WPF ?

WPF ou Windows Presentation Foundation est une infrastructure d’interface utilisateur (interface utilisateur) qui crée des applications clientes de bureau. La plateforme de développement WPF prend en charge un large éventail de fonctionnalités de développement d’applications, notamment un modèle d’application, des ressources, des contrôles, des graphiques, une disposition, une liaison de données, des documents et une sécurité.

WPF fait partie de .NET. Par conséquent, si vous avez déjà créé des applications avec .NET à l’aide de ASP.NET ou windows Forms, l’expérience de programmation doit être familière. WPF utilise le langage XAML du langage de balisage d’application extensible pour fournir un modèle déclaratif pour la programmation d’applications. Pour plus d’informations, consultez la vue d’ensemble de WPF .NET.

Conditions préalables

Vous avez besoin de Visual Studio pour suivre ce didacticiel. Visitez la page téléchargements de Visual Studio pour obtenir une version gratuite.

Créer le projet

Lorsque vous créez une application dans Visual Studio, vous créez d’abord un projet. Dans ce tutoriel, créez un projet Windows Presentation Foundation.

  1. Ouvrez Visual Studio.

  2. Dans la fenêtre de démarrage, choisissez Créer un projet.

    Capture d’écran de la fenêtre de démarrage dans Visual Studio 2022 avec l’option « Créer un projet » mise en surbrillance.

  3. Dans la fenêtre Créer un projet , recherchez « WPF » et sélectionnez Visual Basic dans la liste déroulante Toutes les langues . Choisissez Application WPF (.NET Framework), puis choisissez Suivant.

    Capture d’écran de la boîte de dialogue « Créer un projet » avec « WPF » entrée dans la zone de recherche, « Visual Basic » sélectionnée dans la liste des langues et le modèle de projet « Application WPF (.NET Framework) » mis en surbrillance.

  4. Donnez au projet un nom, HelloWPFApp, puis sélectionnez Créer.

    Visual Studio crée le projet et la solution HelloWPFApp. Explorateur de solutions affiche les différents fichiers.

    Capture d’écran montrant les fichiers dans le projet et la solution HelloWPFApp dans l’Explorateur de solutions.

Le Concepteur WPF affiche une vue de conception et une vue XAML de MainWindow.xaml dans une vue fractionnée.

Remarque

Pour plus d’informations sur eXtensible Application Markup Language (XAML), consultez la vue d’ensemble du langage XAML pour WPF.

Configurer la fenêtre et ajouter du texte

À l’aide de la fenêtre Propriétés , vous pouvez afficher et modifier des options pour les éléments de projet, les contrôles et d’autres éléments.

  1. Dans l’Explorateur de solutions, ouvrez MainWindow.xaml.

  2. Dans la vue XAML, remplacez la valeur de la propriété Window.Title de Title="MainWindow » par Title="Greetings ».

  3. Sur le côté gauche de l’IDE Visual Studio, sélectionnez l’onglet boîte à outils. Si vous ne le voyez pas, sélectionnez Afficher>Boîte à outils dans la barre de menus ou Ctrl+Alt+X.

  4. Développez Contrôles WPF communs ou saisissez Text dans la barre de recherche pour trouver TextBlock.

    Capture d’écran montrant la fenêtre Boîte à outils avec le contrôle TextBlock mis en surbrillance dans la liste des contrôles WPF courants.

  5. Sélectionnez l’élément TextBlock et faites-le glisser vers la fenêtre sur la surface de conception. Vous pouvez déplacer le contrôle TextBlock en le faisant glisser. Utilisez les instructions pour placer le contrôle.

    Capture d’écran montrant le contrôle TextBlock positionné sur le formulaire Greetings avec les instructions visibles.

    Le balisage XAML doit ressembler à l’exemple suivant :

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. Dans la vue XAML, recherchez le balisage du TextBlock et modifiez l’attribut Text :

    Text="Select a message option and then choose the Display button."

    Centrer à nouveau le TextBlock si nécessaire

  7. Enregistrez votre application en choisissant le bouton Enregistrer toutes les barres d’outils. Vous pouvez également enregistrer votre application en choisissant Fichier>Enregistrer tout dans la barre de menus ou en appuyant sur Ctrl+Maj+S. Il est recommandé d’économiser tôt et souvent.

Ajouter des boutons et du code

Votre application utilise deux boutons radio et un bouton. Utilisez ces étapes pour les ajouter. Vous allez ajouter du code Visual Basic au bouton. Ce code fait référence à la sélection de bouton radio.

  1. Dans la boîte à outils, recherchez RadioButton.

    Capture d’écran montrant la fenêtre Boîte à outils avec le contrôle RadioButton sélectionné dans la liste des contrôles WPF courants.

  2. Ajoutez deux contrôles RadioButton à l’aire de conception en sélectionnant l’élément RadioButton, puis en le faisant glisser vers l’aire de conception. Déplacez les boutons en les sélectionnant et en utilisant les touches de direction. Placez les boutons côte à côte sous le contrôle TextBlock.

    Capture d’écran montrant le formulaire Greetings avec un contrôle TextBlock et deux boutons radio.

  3. Dans la fenêtre Propriétés du contrôle RadioButton gauche, remplacez la propriété Name en haut de la fenêtre Propriétés par HelloButton.

    Capture d’écran montrant la fenêtre Propriétés de l’Explorateur de solutions pour la radioButton « HelloButton ».

  4. Dans la fenêtre Propriétés du contrôle RadioButton approprié, remplacez la propriété Name par GoodbyeButton.

  5. Mettez à jour l’attribut Content pour HelloButton et GoodbyeButton vers "Hello" et "Goodbye" dans le code XAML.

    <Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

  6. Dans la vue XAML, recherchez le balisage pour HelloButton et ajoutez un attribut IsChecked :

    IsChecked="True"

    L’attribut IsChecked avec la valeur True signifie que HelloButton est vérifié par défaut. Ce paramètre signifie que le bouton radio est toujours sélectionné, même lorsque le programme démarre.

  7. Dans la Boîte à outils, recherchez le contrôle Button, puis faites glisser un bouton vers l’aire de conception, sous les contrôles RadioButton.

  8. Dans la vue XAML, modifiez la valeur de l'attribut Content du contrôle Button de Content="Button" à Content="Display".

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    Votre fenêtre doit ressembler à l’image suivante.

    Capture d’écran montrant le formulaire Greetings avec le Bloc de texte, les boutons radio intitulés « Hello » et « Goodbye », et le contrôle Bouton intitulé « Display », tous positionnés sur le formulaire.

  9. Dans l’aire de conception, double-cliquez sur le bouton Afficher .

    MainWindow.xaml.vb s’ouvre, avec le curseur placé sur l’événement Button_Click.

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

End Sub

  10. Ajoutez le code suivant :

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

Déboguer et tester l’application

Ensuite, vous allez déboguer l’application pour rechercher des erreurs et tester que les deux boîtes de message s’affichent correctement. Pour voir comment fonctionne ce processus, la première étape introduit délibérément une erreur dans le programme.

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur MainWindow.xaml et choisissez Renommer. Renommez le fichier en Greetings.xaml.

  2. Démarrez le débogueur en appuyant sur F5 ou en sélectionnant Déboguer, puis démarrez le débogage.

    Une fenêtre mode arrêt s’affiche et la fenêtre Sortie indique qu’une exception s’est produite.

    Capture d’écran montrant la fenêtre « Exception non gérée » avec un message System.IO.Exception qui lit « Impossible de localiser la ressource mainwindow.xaml ».

  3. Arrêtez le débogueur en choisissant Débogage>Arrêter le débogage.

    Vous avez renommé MainWindow.xaml en Greetings.xaml au début de cette section. Le code fait toujours référence à MainWindow.xaml comme URI de démarrage de l’application, afin que le projet ne puisse pas démarrer.

  4. Dans l’Explorateur de solutions, ouvrez le fichier Application.xaml .

  5. Remplacez StartupUri="MainWindow.xaml" par StartupUri="Greetings.xaml" :

  6. Démarrez à nouveau le débogueur (appuyez sur F5). Vous devez maintenant voir la fenêtre Greetings de votre application.

    Capture d’écran de la fenêtre Greetings avec les contrôles TextBlock, boutons radio et bouton visibles. Le bouton radio « Hello » est sélectionné.

  7. Sélectionnez Hello et le bouton Afficher , puis Au revoir et le bouton Afficher . Utilisez l’icône fermer dans le coin supérieur droit pour arrêter le débogage.

Pour plus d’informations, consultez Construire une application WPF (WPF) et Déboguer WPF.

Déboguer à l’aide de points d’arrêt

Vous pouvez tester le code pendant le débogage en ajoutant des points d’arrêt.

  1. Ouvrez Greetings.xaml.vb, puis sélectionnez la ligne suivante : MessageBox.Show("Hello.")

  2. Ajoutez un point d’arrêt en appuyant sur F9 ou en sélectionnant Déboguer, puis basculez le point d’arrêt.

    Un cercle rouge apparaît en regard de la ligne de code dans la marge gauche de la fenêtre de l’éditeur.

  3. Sélectionnez la ligne suivante : MessageBox.Show("Goodbye.").

  4. Appuyez sur la touche F9 pour ajouter un point d’arrêt, puis appuyez sur F5 pour démarrer le débogage.

  5. Dans la fenêtre Salutations , sélectionnez le bouton Hello , puis sélectionnez Afficher.

    La ligne MessageBox.Show("Hello.") est mise en surbrillance en jaune. En bas de l’IDE, les fenêtres Autos, Locals et Watch sont ancrées ensemble sur le côté gauche. Les fenêtres Pile des appels, Points d’arrêt, Paramètres d’exception, Commande, Exécution et Sortie sont ancrées ensemble sur le côté droit.

    La capture d’écran montre une session de débogage dans Visual Studio avec les fenêtres du Code, Diagnostics, Autos et Pile des appels ouvertes. L’exécution est arrêtée à un point d’arrêt dans Greetings.xaml.vb.

  6. Dans la barre de menus, choisissez Déboguer>Pas à pas sortant.

    L’application redémarre. Une boîte de dialogue avec le mot « Hello » s’affiche.

  7. Choisissez le bouton OK pour fermer la boîte de dialogue.

  8. Dans la fenêtre Message d’accueil, choisissez le bouton radio Au revoir, puis cliquez sur le bouton Afficher.

    La ligne MessageBox.Show("Goodbye.") est mise en surbrillance en jaune.

  9. Choisissez la clé F5 pour continuer le débogage. Lorsque la boîte de dialogue s’affiche, choisissez OK pour fermer la boîte de dialogue.

  10. Fermez la fenêtre de l’application pour arrêter le débogage.

  11. Dans la barre de menus, choisissez On the menu bar, choose Déboguer>Désactiver tous les points d’arrêt.

Générer une version de mise en production

Maintenant que vous avez vérifié que tout fonctionne, vous pouvez préparer une version de votre application.

  1. Sélectionnez Générer une>solution Clean pour supprimer les fichiers intermédiaires et les fichiers de sortie créés lors des builds précédentes.

  2. Changez la configuration de build de HelloWPFApp en remplaçant Debug par Release à l’aide du contrôle de liste déroulante de la barre d’outils.

  3. Sélectionnez Générer>Générer la solution.

Félicitations pour avoir terminé ce tutoriel ! Vous trouverez l'.exe que vous avez généré dans votre solution et le répertoire de projet (...\HelloWPFApp\bin\Release).

Étapes suivantes

Passez à l’article suivant pour découvrir comment créer une application Windows Forms dans Visual Studio avec Visual Basic.

Créer une application Windows Forms

Pour plus d’informations sur Visual Studio, consultez les ressources suivantes :

  • conseils de productivité
  • Last updated on