Tutoriel ; créer votre première application du Kit de développement logiciel (SDK) des applications Windows dans Visual Studio avec XAML et C#

  • Article

Dans cette présentation de l’environnement de développement intégré (IDE) Visual Studio, vous allez créer une application « Hello World » qui s’exécute sur n’importe quel appareil Windows 10 ou ultérieur. Pour ce faire, vous allez utiliser un modèle de projet du Kit de développement logiciel (SDK) des applications Windows (WinUI 3), Extensible Application Markup Language (XAML) et le langage de programmation C#.

Notes

WinUI 3 est le composant de plateforme d’interface utilisateur natif fourni avec le SDK d'application Windows (complètement découplé des kits SDK Windows). Pour plus d’informations, consultez WinUI 3.

Si vous n’avez pas encore installé Visual Studio, accédez à la page Téléchargements Visual Studio pour l’installer gratuitement.

Création d’un projet

Tout d’abord, créez un projet WinUI 3. Le type de projet inclut tous les fichiers de modèle dont vous avez besoin au départ.

Important

Visual Studio 2019 prend uniquement en charge le SDK d’application Windows 1.1 et versions antérieures. Visual Studio 2022 est recommandé pour le développement d’applications avec toutes les versions du SDK d’application Windows.

Les modèles du Kit de développement logiciel (SDK) des applications Windows 1.1.x sont disponibles en installant une extension Visual Studio (VSIX).

Notes

Si vous avez déjà installé une extension Visual Studio (VSIX) du Kit de développement logiciel (SDK) des applications Windows, désinstallez-la avant d’installer une autre version. Pour obtenir des instructions, consultez Gérer les extensions pour Visual Studio.

  • Vous pouvez installer la dernière version 1.1.x stable VSIX à partir de Visual Studio. Sélectionnez Extensions>Gérer les extensions, recherchez SDK d’application Windows et téléchargez l’extension du SDK d’application Windows. Fermez et rouvrez Visual Studio, puis suivez les invites pour installer l’extension. Veillez à installer les modèles du Kit de développement logiciel (SDK) des applications Windows 1.1.
  • Vous pouvez aussi télécharger directement l’extension à partir de Visual Studio Marketplace, puis l’installer :

Télécharger les modèles VS2019 du Kit de développement logiciel (SDK) C# du Kit de développement logiciel (SDK) des applications Windows

Une fois l’extension de modèles installée, vous pouvez créer votre premier projet. Pour plus d’informations sur le support Visual Studio 2019, consultez Installer des outils pour le Kit de développement logiciel (SDK) des applications Windows. Le reste de ce tutoriel suppose que vous utilisez Visual Studio 2022.

  1. Ouvrez Visual Studio puis, dans la fenêtre de démarrage, choisissez Créer un projet.

  2. Sur l’écran Créer un nouveau projet, entrez WinUI dans la zone de recherche, choisissez le modèle C# pour Application vide (WinUI 3 dans le Bureau), puis choisissez Suivant.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Note

    Si vous ne voyez pas le modèle de projet Application vide empaquetée (WinUI 3 dans le Bureau), cliquez sur le lient Installer plus d’outils et de fonctionnalités.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio Installer est lancé. Choisissez la charge de travail Développement du bureau .NET puis, dans le volet Détails de l’installation de la boîte de dialogue d’installation, sélectionnez Modèles C# du Kit de développement logiciel (SDK) des applications Windows (en bas de la liste). Sélectionnez maintenant Modifier.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Nommez le projet, HelloWorld et choisissez Créer.

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

    Note

    S’il s’agit de votre première utilisation de Visual Studio pour créer une application du Kit de développement logiciel (SDK) des applications Windows, une boîte de dialogue Paramètres peut s’afficher. Choisissez Mode développeur, puis Oui.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    Visual Studio installe un autre package en mode développeur pour vous. Une fois l’installation du package terminée, fermez la boîte de dialogue Paramètres.

Création de l'application

Il est temps de commencer à développer. Vous allez ajouter un contrôle bouton, une action au bouton, puis exécuter l’application « Hello World » pour voir à quoi elle ressemble.

Ajouter un bouton à la zone de conception

  1. Dans l’Explorateur de solutions, double-cliquez sur MainWindow.xaml pour ouvrir l’éditeur de majoration XAML.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

    L’éditeur XAML est l’endroit où vous pouvez ajouter ou modifier la majoration. Contrairement aux projets UWP, WinUI 3 n’a pas de mode Création.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Examinez le contrôle bouton imbriqué dans StackPanel à la racine de la fenêtre.

    Screenshot showing 'Button' highlighted in the XAML editor.

Modifier l’étiquette sur le bouton

  1. Dans l’Éditeur XAML, remplacez la valeur Contenu du bouton « Cliquer » par « Hello World ! ».

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Notez que le bouton a également un gestionnaire d’événements Cliquer nommé myButton_Click spécifié. Nous y arriverons à l’étape suivante.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Modifier le gestionnaire d’événements

Un « gestionnaire d’événements » semble compliqué, mais il s’agit simplement d’un autre nom pour le code qui est appelé quand un événement se produit. Dans ce cas, il ajoute une action déclenchée par le bouton « Hello World ! ».

  1. Dans l’Explorateur de solutions, double-cliquez sur MainWindow.xaml.cs, la page code-behind.

  2. Modifiez le code du gestionnaire d’événements dans la fenêtre de l’éditeur C# qui s’ouvre.

    C’est ici que les choses deviennent intéressantes. Le gestionnaire d’événements par défaut se présente ceci :

    Screenshot showing the C# code for the default myButton_Click event handler.

    Modifions-le de sorte qu’il se présente comme ceci :

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Voici le code à copier et coller :

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

Que venons-nous de faire ?

Le code utilise le contrôle ContentDialog pour afficher un message de bienvenue dans un contrôle contextuel modal dans la fenêtre active. (Pour plus d’informations sur l’utilisation de Microsoft.UI.Xaml.Controls.ContentDialog, consultez Classe ContentDialog.)

Exécution de l'application

Il est temps de générer, déployer et lancer l’application du Kit de développement logiciel (SDK) des applications Windows « Hello World » pour voir à quoi elle ressemble. Voici comment procéder.

  1. Utilisez le bouton Lire (il contient le texte HelloWorld (Package)) pour démarrer l’application sur l’ordinateur local.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Vous pouvez également choisir Déboguer>Démarrer le débogage à partir de la barre de menus ou appuyer sur F5 pour démarrer votre application.)

  2. Examinez votre application, qui apparaît vite après la disparition d’un écran de démarrage. L’application doit ressembler à cette image :

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Sélectionnez le bouton Hello World.

    Votre appareil Windows 10 ou ultérieur affiche un message indiquant « Bienvenue dans votre première application du Kit de développement logiciel (SDK) des applications Windows » avec le titre « Hello from HelloWorld ». Cliquez sur OK pour ignorer le message.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Pour fermer l’application, sélectionnez le bouton Arrêter le débogage dans la barre d’outils. (Vous pouvez également choisir Déboguer>Arrêter le débogage dans la barre de menus ou appuyer sur Maj+F5.)

Étapes suivantes

Félicitations ! Vous avez terminé ce didacticiel. Nous espérons que vous avez appris quelques principes fondamentaux sur le Kit de développement logiciel (SDK) des applications Windows, WinUI 3 et l’IDE Visual Studio. Pour en savoir plus, passez au tutoriel suivant :

Tutoriel : créer une visionneuse de photos simple avec WinUI 3

Voir aussi