PopupService

Il PopupService fornisce un meccanismo per visualizzare popup all'interno di un'applicazione usando il modello MVVM.

Le sezioni seguenti si baseranno in modo incrementale su come usare il PopupService in un'applicazione MAUI .NET.

Creazione di un popup

Per utilizzare il PopupService per presentare o chiudere un Popup il Popup deve prima essere registrato. In base ai passaggi descritti in Definizione del popup è possibile creare quanto segue.

Il contenuto XAML del Popup può essere definito come:

<toolkit:Popup 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:viewModels="clr-namespace:MyProject.ViewModels"
    x:Class="MyProject.Popups.NamePopup"
    x:DataType="viewModels:NamePopupViewModel">

    <VerticalStackLayout>
        <Label Text="What is your name?" />
        <Entry Text="{Binding Name}" />

        <Button Text="Save" Command="{Binding SaveCommand}" />
        <Button Text="Cancel" Command="{Binding CancelCommand}" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Il contenuto C# del Popup può essere definito come:

using CommunityToolkit.Maui.Views;
using MyProject.ViewModels;

namespace MyProject.Popups;

public partial class NamePopup : Popup
{
    public NamePopup(NamePopupViewModel namePopupViewModel)
    {
        InitializeComponent();
        BindingContext = namePopupViewModel;
    }
}

Il modello di vista di supporto per il Popup può essere definito come:

public class NamePopupViewModel : ObservableObject
{
    [ObservableProperty]
    string name = "";

    readonly IPopupService popupService;

    public NamePopupViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    void OnCancel()
    {
    }

    [RelayCommand(CanExecute = nameof(CanSave))]
    void OnSave()
    {
    }

    bool CanSave() => string.IsNullOrWhitespace(Name) is false;
}

Registrazione di un popup

Per utilizzare inizialmente il IPopupService per visualizzare un popup nella tua applicazione, è necessario registrare il popup e il modello di visualizzazione con il MauiAppBuilder. Questo può essere fatto usando Registrazione visualizzazione popup e modello di visualizzazione.

In base all'esempio precedente, è possibile aggiungere il codice seguente al file MauiProgram.cs.

builder.Services.AddTransientPopup<NamePopup, NamePopupViewModel>();

Presentazione di un popup

.NET MAUI Community Toolkit fornisce un meccanismo per istanziare e presentare popup in un'applicazione .NET MAUI. Il servizio popup viene registrato automaticamente con il MauiAppBuilder quando si usa il metodo di inizializzazione UseMauiCommunityToolkit. In questo modo è possibile risolvere un'implementazione IPopupService in qualsiasi parte dell'applicazione.

Il IPopupService consente di registrare una visualizzazione popup e il modello di visualizzazione associato. La possibilità di visualizzare un Popup può ora essere guidata solo fornendo il modello di visualizzazione che consente di mantenere una separazione pulita tra visualizzazione e modello di visualizzazione.

L'esempio seguente illustra come usare il IPopupService per creare e visualizzare un popup in un'applicazione MAUI .NET:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<NamePopupViewModel>();
    }
}

In alternativa, il chiamante può attendere il metodo ShowPopupAsync per gestire un risultato restituito. Il metodo DisplayPopup può essere riscritto come segue:

public void DisplayPopup()
{
    var name = await this.popupService.ShowPopupAsync<NamePopupViewModel>();
}

Per un esempio più concreto, fare riferimento alla nostra applicazione campione e all'esempio in MultiplePopupViewModel

Il IPopupService fornisce anche metodi per gestire un risultato restituito da un popup come illustrato in La restituzione di un risultato.

Passaggio di dati a un modello di visualizzazione Popup

Quando si presenta un popup, a volte è necessario passare i dati al modello di visualizzazione sottostante per consentire la presentazione del contenuto dinamico all'utente. Il IPopupService rende possibile questa operazione tramite i sovraccarichi dei metodi ShowPopup e ShowPopupAsync che accettano un parametro Action<TViewModel> onPresenting. Questo parametro è stato progettato per essere indipendente dal framework e consentire a te in quanto sviluppatore di guidare il caricamento o il passaggio dei dati nel modo che meglio si adatta alla tua architettura.

Per estendere l'esempio precedente di visualizzazione di un NamePopupViewModel e del relativo popup associato, è possibile usare il parametro onPresenting per passare il nome utente:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<UpdatingPopupViewModel>(onPresenting: viewModel => viewModel.Name = "Shaun");
    }
}

Chiusura di un popup

Il PopupService fornisce i metodi ClosePopup e ClosePopupAsync che rendono possibile chiudere un Popup dal modello di visualizzazione.

Chiusura a livello di codice di un popup

Espandendo l'esempio precedente, è possibile aggiungere l'implementazione seguente al metodo OnCancel:

[RelayCommand]
void OnCancel()
{
    popupService.ClosePopup();
}

Ciò comporterà la chiusura dell'ultimo Popup visualizzato.

Restituzione di un risultato

Alla chiusura di un Popup è possibile restituire un risultato al chiamante che ha presentato il Popup.

Espandendo l'esempio precedente, è possibile aggiungere l'implementazione seguente al metodo OnSave:

[RelayCommand(CanExecute = nameof(CanSave))]
void OnSave()
{
    popupService.ClosePopup(Name);
}

Ciò comporterà la chiusura dell'ultimo Popup visualizzato e il chiamante restituirà il valore in Name.

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit .

API (Interfaccia di Programmazione delle Applicazioni)

È possibile trovare il codice sorgente per Popup nel repository GitHub .NET MAUI Community Toolkit.