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

Familiarisez-vous 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 MVVM Toolkit 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 pour Bien démarrer avec .NET MAUI sur Windows.

Création du projet .NET MAUI

1. Lancez Visual Studio et, 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 .NET MAUI App, puis cliquez sur 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 de 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 Click me 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 la compilation de votre application échoue, passez en revue l’article Résolution des problèmes connus, dans lequel vous trouverez peut-être une solution à votre problème.

Ajout du kit de ressources MVVM

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

1. Faites un clic droit sur le projet dans Explorateur de solutions, puis 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 de Gestionnaire de package NuGet une fois le nouveau package installé.

5. Faites à nouveau un clic droit sur le projet, puis sélectionnez Ajouter | Classe dans le menu contextuel.

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

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

8. La MainViewModel classe contient le code suivant. L’enregistrement CountChangedMessage définit un message envoyé chaque fois que le bouton Cliquer sur moi est cliqué, en informant l’affichage de la modification. Les attributs ObservableProperty et RelayCommand ajoutés aux message membres sont IncrementCounter des générateurs sources fournis par le kit de ressources MVVM pour créer le code réutilisable MVVM pour INotifyPropertyChanged et IRelayCommand les implémentations. 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 allons supprimer 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));
        }
    }
}

Remarque

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

9. Ouvrez le fichier MainPage.xaml.cs pour modifier et supprimer 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é dans IncrementCounter() le MainViewModel message et met à jour la CounterBtn.Text propriété avec le nouveau message et annonce le nouveau texte avec les SemanticScreenReaderéléments suivants :

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 pour que ContentPage la MainViewModel classe soit trouvée :

xmlns:local="clr-namespace:MauiOnWindows"

13. Ajoutez MainViewModel en tant que pour les BindingContext ContentPagepoints suivants :

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

14. Mettez à jour la Button mise MainPage à jour pour 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 l’exécution du projet, 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 l’exécution de l’application :

Étapes suivantes

Apprenez à créer une application qui affiche les 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 l’API Microsoft Graph avec .NET MAUI sur Windows