.net Maui Mvvm Tutorial

INFLUENCESMAG.ORG

4 min read

·

Jun 04, 2024

23

Share

Démarrez votre aventure .NET MAUI avec MVVM : Un tutoriel complet

Introduction

.NET MAUI (Multi-platform App UI) est une nouvelle technologie puissante et passionnante pour le développement d'applications multiplates-formes. Elle permet aux développeurs de créer des applications natives à l'aide d'un seul code source pour Android, iOS, macOS et Windows. En combinant .NET MAUI avec le modèle MVVM (Model-View-ViewModel), vous pouvez développer des applications plus maintenables, testables et évolutives.

Ce tutoriel vous guidera étape par étape à travers la création d'une application .NET MAUI simple utilisant MVVM.

Configuration de votre environnement

1. Installer Visual Studio: Assurez-vous d'avoir installé la dernière version de Visual Studio avec le workload .NET MAUI.
2. Créer un nouveau projet .NET MAUI: Ouvrez Visual Studio et sélectionnez "Créer un projet". Choisissez le modèle .NET MAUI App et donnez un nom à votre projet.

Créer un ViewModel

1. Créer une classe ViewModel: Créez un nouveau dossier appelé "ViewModels" dans votre projet et ajoutez une nouvelle classe nommée MainViewModel.cs.

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace MyApp.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private string _message = "Bienvenue dans votre application .NET MAUI!";

        public string Message
        {
            get { return _message; }
            set 
            {
                _message = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Liaison de données dans la vue

1. Modifier le fichier MainPage.xaml: Dans le fichier MainPage.xaml, remplacez le contenu par le code suivant:

Explication du code

• ContentPage.BindingContext: Définit le MainViewModel comme contexte de liaison pour la page.
• {Binding Message}: Lie la propriété Message du MainViewModel à la propriété Text du label.

Exécuter l'application

Appuyez sur F5 pour exécuter l'application. Vous devriez voir le message "Bienvenue dans votre application .NET MAUI!" affiché sur la page.

Conclusion

Ce tutoriel vous a donné un aperçu de la mise en œuvre de MVVM dans une application .NET MAUI. Vous pouvez maintenant utiliser ce modèle pour créer des applications plus structurées, testables et évolutives. N'hésitez pas à expérimenter et à explorer les fonctionnalités avancées de MVVM pour améliorer votre développement .NET MAUI.