.net Maui Close Popup From Viewmodel

4 min read Jun 04, 2024

Fermer un Pop-up .NET MAUI à partir d'un ViewModel

Dans le développement d'applications .NET MAUI, il est courant d'utiliser des Pop-ups pour afficher des informations supplémentaires ou demander des actions à l'utilisateur. Mais comment fermer ces Pop-ups depuis le ViewModel ? C'est ce que nous allons voir dans cet article.

Le Problème

Par défaut, .NET MAUI ne fournit pas de mécanisme direct pour fermer un Pop-up depuis un ViewModel. Cela est dû au fait que les Pop-ups sont gérés au niveau de la vue, tandis que le ViewModel est responsable de la logique métier.

La Solution

Pour résoudre ce problème, nous pouvons utiliser un Messaging Center pour communiquer entre le ViewModel et la vue. Voici les étapes à suivre :

Définir un Message : Créez une classe simple pour représenter le message de fermeture du Pop-up.
```
public class ClosePopupMessage { }
```

Envoyer le Message depuis le ViewModel : Dans le ViewModel, ajoutez une méthode pour envoyer le message au Messaging Center.

public class MyViewModel : ViewModelBase
{
    public async Task ClosePopup()
    {
        MessagingCenter.Send(this, "ClosePopup");
    }
}

Recevoir le Message dans la Vue : Dans la vue du Pop-up, abonnez-vous au message et fermez le Pop-up lorsqu'il est reçu.

public partial class MyPopup : ContentPage
{
    public MyPopup()
    {
        InitializeComponent();

        MessagingCenter.Subscribe(this, "ClosePopup", (sender, args) =>
        {
            // Fermer le Pop-up
            Navigation.PopModalAsync();
        });
    }
}

Exemple Complet

Voici un exemple complet illustrant comment fermer un Pop-up depuis un ViewModel :

// ViewModel
public class MyViewModel : ViewModelBase
{
    public async Task ClosePopup()
    {
        MessagingCenter.Send(this, "ClosePopup");
    }
}

// Vue du Pop-up
public partial class MyPopup : ContentPage
{
    public MyPopup()
    {
        InitializeComponent();

        MessagingCenter.Subscribe(this, "ClosePopup", (sender, args) =>
        {
            // Fermer le Pop-up
            Navigation.PopModalAsync();
        });
    }
}

// Vue principale
public partial class MainPage : ContentPage
{
    private MyViewModel _viewModel;

    public MainPage()
    {
        InitializeComponent();

        _viewModel = new MyViewModel();
        BindingContext = _viewModel;
    }

    private async void OpenPopupButton_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushModalAsync(new MyPopup());
    }
}

Conclusion

En utilisant le Messaging Center, vous pouvez facilement fermer un Pop-up .NET MAUI depuis un ViewModel. Cela permet de séparer la logique métier de la vue et d'améliorer la maintenabilité de votre code. N'hésitez pas à adapter cet exemple à vos besoins spécifiques.