Partilhar via

Retornar um valor de uma janela pop-up

O .NET MAUI Community Toolkit fornece a capacidade de mostrar um Popup a um usuário. O Toolkit também permite um cenário comum, mais complexo, em que um desenvolvedor exibe um Popup e await seu resultado é retornado quando esse Popup é descartado. Esta página aborda como a Popup<T> classe pode ser usada para alcançar o comportamento desejado.

Construindo um pop-up

A Popup<T> pode ser criado em XAML ou C# da seguinte maneira:

Criando um pop-up em XAML

A seção a seguir aborda como criar um Popup<T> usando XAML.

Definir o seu Popup

A maneira mais fácil de criar um Popup<T> é adicionar um novo .NET MAUI ContentView (XAML) ao seu projeto, isso criará 2 arquivos: um arquivo *.xaml e um arquivo *.xaml.cs . O conteúdo de cada ficheiro pode ser substituído pelo seguinte:

Arquivo XAML
<toolkit:Popup
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Padding="10"
    x:TypeArguments="system:Boolean"
    x:Class="MyProject.ReturnResultPopup">

    <VerticalStackLayout Spacing="6">
        <Label Text="This is a very important message! Do you agree?" />

        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />

        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    
    </VerticalStackLayout>
    
</toolkit:Popup>

O uso de x:TypeArguments em XAML permite fornecer o parâmetro de tipo para um tipo genérico.

Arquivo de Code-Behind XAML
public partial class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        InitializeComponent();
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

O uso de Popup<bool> deve corresponder à definição no XAML por meio do uso de x:TypeArguments.

Importante

Se o arquivo code-behind não for criado bem como a chamada para InitializeComponent, irá ocorrer uma exceção ao tentar exibir o Popup.

Construindo um pop-up em C#

A seção a seguir aborda como criar um Popup usando C#.

using CommunityToolkit.Maui.Views;

namespace MyProject;

public class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        var yesButton = new Button { Text = "Yes" };
        yesButton.Clicked += OnYesButtonClicked;

        var noButton = new Button { Text = "No" };
        noButton.Clicked += OnNoButtonClicked;

        Content = new VerticalStackLayout
        {
            Children = 
            {
                new Label { Text = "This is a very important message! Do you agree?" },
                
                yesButton,
                noButton
            }
        };
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

O CloseAsync método permite que um valor seja fornecido, este será o valor de retorno resultante. O uso de genéricos em Popup<T> proporciona segurança de tipo ao devolver valores de uma janela de pop-up.

Aguardando o resultado de um pop-up

Para aguardar o resultado, o método deve ser utilizado da ShowPopupAsync seguinte forma:

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup()
    {
        var popup = new ReturnResultPopup();

        // The type parameter must match the type returned from the popup.
        IPopupResult<bool> popupResult = await this.ShowPopupAsync<bool>(popup, PopupOptions.Empty, CancellationToken.None);

        if (popupResult.WasDismissedByTappingOutsideOfPopup)
        {
            return;
        }

        if (popupResult.Result is true)
        {
            // Yes was tapped
        }
        else
        {
            // No was tapped
        }
    }
}

Pop-up com resultado

Observação

Se WasDismissedByTappingOutsideOfPopup é true então a Result propriedade será sempre null ou default.

Opções de Popup

A classe PopupOptions permite personalizar a Borda, Sombra, CorDeSobreposiçãoDePágina e muito mais do Popup exibido.

Consulte a documentação PopupOptions para saber mais.

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