Créer votre première application .NET MAUI pour Windows

Obtenez des informations pratiques avec .NET MAUI en créant votre première application multiplateforme sur Windows.

Introduction

Dans ce tutoriel, vous allez apprendre à créer et à exécuter votre première application .NET MAUI pour Windows dans Visual Studio 2022 (17.3 ou version ultérieure). Nous allons ajouter certaines fonctionnalités du kit de ressources MVVM à partir de .NET Community Toolkit pour améliorer la conception du projet par défaut.

Configuration de l’environnement

Si vous n’avez pas encore configuré votre environnement pour le développement .NET MAUI, suivez les étapes de Prise en main de .NET MAUI sur Windows.

Création du projet MAUI .NET

1. Lancez Visual Studio, puis dans la fenêtre de démarrage, cliquez sur Créer un projet pour créer un projet :

2. Dans la fenêtre Créer un projet , sélectionnez MAUI dans la liste déroulante Tous les types de projets, sélectionnez le modèle d’application .NET MAUI , puis cliquez sur le bouton Suivant :

3. Dans la fenêtre Configurer votre nouveau projet , donnez un nom à votre projet, choisissez un emplacement pour celui-ci, puis cliquez sur le bouton Suivant :

4. Dans la fenêtre Informations supplémentaires , cliquez sur le bouton Créer :

5. Attendez que le projet soit créé et que ses dépendances soient restaurées :

6. Dans la barre d’outils Visual Studio, appuyez sur le bouton Machine Windows pour générer et exécuter l’application.

7. Dans l’application en cours d’exécution, appuyez plusieurs fois sur le bouton Cliquez sur moi et observez que le nombre de clics de bouton est incrémenté :

Vous venez d’exécuter votre première application .NET MAUI sur Windows. Dans la section suivante, vous allez apprendre à ajouter des fonctionnalités de liaison de données et de messagerie à partir du kit de ressources MVVM à votre application.

Dépannage

Si votre application ne parvient pas à compiler, consultez Résolution des problèmes connus, qui peuvent avoir une solution à votre problème.

Ajout du kit de ressources MVVM

Maintenant que votre première application .NET MAUI s’exécute sur Windows, nous allons ajouter des fonctionnalités du kit de ressources MVVM au projet pour améliorer la conception de l’application.

1. Cliquez avec le bouton droit sur le projet dans Explorateur de solutions et sélectionnez Gérer les packages NuGet... dans le menu contextuel.

2. Dans la fenêtre Gestionnaire de package NuGet , sélectionnez l’onglet Parcourir et recherchez CommunityToolkit.MVVM :

3. Ajoutez la dernière version stable du package CommunityToolkit.MVVM (version 8.0.0 ou ultérieure) au projet en cliquant sur Installer.

4. Fermez la fenêtre Gestionnaire de package NuGet une fois l’installation du nouveau package terminée.

5. Cliquez à nouveau avec le bouton droit sur le projet, puis sélectionnez Ajouter | Classe à partir du menu contextuel.

6. Dans la fenêtre Ajouter un nouvel élément qui s’affiche, nommez la classe MainViewModel et cliquez sur Ajouter :

7. La MainViewModel classe sera la cible de liaison de données pour .MainPage Mettez-le à jour pour qu’il hérite de dans l’espace CommunityToolkit.Mvvm.ComponentModel de ObservableObject noms. Cela nécessite également la mise à jour de la classe pour qu’elle soit public et partial.

8. La MainViewModel classe contiendra le code suivant. L’enregistrement CountChangedMessage définit un message qui est envoyé chaque fois que vous cliquez sur le bouton Cliquer sur moi, notifiant l’affichage de la modification. Les attributs ObservableProperty et RelayCommand ajoutés aux message membres et IncrementCounter sont des générateurs sources fournis par le kit de ressources MVVM pour créer le code réutilisable MVVM pour INotifyPropertyChanged les implémentations et IRelayCommand . L’implémentation IncrementCounter de la méthode contient la logique de OnCounterClicked MainPage.xaml.cs, avec une modification pour envoyer un message avec le nouveau message de compteur. Nous supprimerons ce code-behind ultérieurement.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

Notes

Vous devez mettre à jour l’espace de noms dans le code précédent pour qu’il corresponde à l’espace de noms de votre projet.

9. Ouvrez le fichier MainPage.xaml.cs pour modifier et supprimez la OnCounterClicked méthode et le count champ.

10. Ajoutez le code suivant au MainPage constructeur après l’appel à InitializeComponenent(). Ce code reçoit le message envoyé par IncrementCounter() dans le MainViewModel et met à jour la CounterBtn.Text propriété avec le nouveau message et annonce le nouveau texte avec :SemanticScreenReader

WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});

11. Vous devez également ajouter une using instruction à la classe :

using CommunityToolkit.Mvvm.Messaging;

12. Dans MainPage.xaml, ajoutez une déclaration d’espace de noms à afin ContentPage que la MainViewModel classe soit trouvée :

xmlns:local="clr-namespace:MauiOnWindows"

13. Ajoutez MainViewModel en tant que BindingContext pour :ContentPage

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

14. Mettez à jour pour ButtonMainPage utiliser un Command au lieu de gérer l’événement Clicked . La commande est liée à la IncrementCounterCommand propriété publique générée par les générateurs sources du kit de ressources MVVM :

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

15. Réexécutez le projet et observez que le compteur est toujours incrémenté lorsque vous cliquez sur le bouton :

16. Pendant que le projet est en cours d’exécution, essayez de mettre à jour le message « Hello, World! » dans la première étiquette pour lire « Hello, Windows ! » dans MainPage.xaml. Enregistrez le fichier et notez que xaml Rechargement à chaud met à jour l’interface utilisateur pendant que l’application est toujours en cours d’exécution :

Étapes suivantes

Découvrez comment créer une application qui affiche des données Microsoft Graph pour un utilisateur en tirant parti du Kit de développement logiciel (SDK) Graph dans un didacticiel .NET MAUI pour Windows.

Rubriques connexes

Ressources pour l’apprentissage de .NET MAUI

Utilisation de Microsoft API Graph avec .NET MAUI sur Windows