Partilhar via

PopupService

O PopupService fornece um mecanismo para exibir Popups dentro de um aplicativo usando o padrão MVVM.

As seções a seguir serão incrementalmente baseadas em como usar o PopupService em um aplicativo .NET MAUI.

Criando um pop-up

Para usar o PopupService para apresentar ou fechar um Popup o Popup deve primeiro ser registrado. Com base nas etapas em Exibindo um pop-up , o seguinte pode ser criado.

O conteúdo XAML do Popup pode ser definido como:

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewModels="clr-namespace:MyProject.ViewModels"
    x:Class="MyProject.Popups.NamePopup"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    Padding="10"
    Spacing="6"
    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>
    
</ContentView>

O conteúdo C# do Popup pode ser definido como:

using MyProject.ViewModels;

namespace MyProject.Popups;

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

O modelo de visualização de suporte para o Popup pode ser definido como:

public class NamePopupViewModel : ObservableObject
{
    [ObservableProperty]
    public partial string Name { get; set; } = string.Empty;

    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;
}

Registrar um popup

A fim de primeiro usar o IPopupService para exibir um pop-up na sua aplicação, você precisará registar o modelo e a vista do pop-up com o MauiAppBuilder, o que pode ser feito através de Registar Vista e Modelo do Pop-up.

Com base no exemplo acima, o código a seguir pode ser adicionado ao arquivo MauiProgram.cs.

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

Exibir uma janela de aviso

O .NET MAUI Community Toolkit fornece um mecanismo para instanciar e apresentar pop-ups em um aplicativo .NET MAUI. O serviço pop-up é automaticamente registado com o MauiAppBuilder ao usar o UseMauiCommunityToolkit método de inicialização. Isso permite que você resolva uma IPopupService implementação em qualquer parte do seu aplicativo.

O IPopupService torna possível registrar uma visualização pop-up e seu modelo de exibição associado. A capacidade de mostrar Popup exige que o desenvolvedor forneça a implementação atual INavigation para a janela atual no aplicativo. A maneira mais fácil de conseguir isso é através do exemplo a seguir.

O exemplo a seguir mostra como usar o IPopupService para criar e exibir um pop-up em um aplicativo .NET MAUI:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

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

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

Como alternativa, o chamador pode aguardar o método ShowPopupAsync para lidar com um resultado que está sendo retornado. O DisplayPopup método pode ser reescrito como:

public async Task DisplayPopup()
{
    var result = await this.popupService.ShowPopupAsync<NamePopupViewModel>(currentPage.Navigation);
}

Para um exemplo mais concreto, consulte a nossa aplicação de exemplo e o exemplo em MultiplePopupViewModel

O IPopupService também fornece métodos para lidar com um resultado que está sendo retornado de um pop-up, conforme abordado em Retornando um resultado.

Passando dados para um modelo de exibição pop-up

Ao apresentar um pop-up, às vezes precisamos passar dados para o modelo de exibição subjacente para permitir que o conteúdo dinâmico seja apresentado ao usuário. IPopupService torna isso possível através das sobrecargas dos métodos ShowPopup e ShowPopupAsync que tomam um parâmetro IDictionary<string, object> shellParameters. Isso faz uso da interface fornecida com o IQueryAttributable .NET MAUI Shell, para obter mais informações sobre como usá-lo, consulte Processar dados de navegação usando um único método.

Para estender o exemplo anterior de mostrar um NamePopupViewModel e seu Popup associado, podemos estender o NamePopupViewModel para implementar a IQueryAttributable interface da seguinte maneira:

public class NamePopupViewModel : ObservableObject, IQueryAttributable
{
    [ObservableProperty]
    public partial string Name { get; set; } = "";

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        Name = (string)query[nameof(NamePopupViewModel.Name)];
    }
}

Em seguida, o modelo de exibição que apresenta o pop-up e passa os dados pode ter a seguinte aparência:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

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

    public async Task DisplayPopup()
    {
        var queryAttributes = new Dictionary<string, object>
        {
            [nameof(NamePopupViewModel.Name)] = "Shaun"
        };

        await this.popupService.ShowPopupAsync<NamePopupViewModel>(
            Shell.Current,
            options: PopupOptions.Empty,
            shellParameters: queryAttributes);
    }
}

Fechar uma janela pop-up

O PopupService fornece o método ClosePopupAsync que torna possível fechar um Popup a partir de um modelo de visualização.

Fechar programaticamente um pop-up

Expandindo o exemplo anterior, a seguinte implementação pode ser adicionada ao OnCancel método:

[RelayCommand]
async Task OnCancel()
{
    await popupService.ClosePopupAsync(Shell.Current);
}

Isso fará com que o Popup exibido mais recentemente seja fechado.

Devolver um resultado

Ao fechar um Popup é possível devolver um resultado ao chamador que apresentou o Popup.

Expandindo o exemplo anterior, a seguinte implementação pode ser adicionada ao OnSave método:

[RelayCommand(CanExecute = nameof(CanSave))]
async Task OnSave()
{
    await popupService.ClosePopupAsync(Shell.Current, Name);
}

Isso resultará no fechamento da Popup mais recentemente exibida e no retorno ao chamador do valor em Name encapsulado dentro de uma implementação de IPopupResult<T>. Para obter mais informações sobre como criar um Popup que pode retornar um resultado, consulte Popup - Retornando um resultado.

Exemplos

Você pode encontrar um exemplo desse recurso em ação no .NET MAUI Community Toolkit Sample Application.

API

Você pode encontrar o código-fonte para Popup no repositório GitHub do .NET MAUI Community Toolkit.

Recursos adicionais