Pop-up

Pop-ups são uma maneira comum de apresentar informações a um usuário relacionado à tarefa atual. Os sistemas operacionais fornecem uma maneira de mostrar uma mensagem e exigir uma resposta do usuário, esses alertas normalmente são restritivos em termos do conteúdo que um desenvolvedor pode fornecer e também o layout e a aparência.

Observação

Se você quiser apresentar algo ao usuário que seja mais sutil, confira nossas opções do Toast e do Snackbar.

O Modo de Exibição Popup permite que os desenvolvedores criem sua própria interface do usuário personalizada e a apresentem aos usuários.

O .NET MAUI Community Toolkit fornece duas abordagens para criar uma Popup que pode ser mostrada em um aplicativo .NET MAUI. Essas abordagens dependerão do caso de uso. Esta página se concentra na forma mais simples de Popup simplesmente renderizar uma sobreposição em um aplicativo. Para uma abordagem mais avançada, que permite retornar um resultado do Popup, consulte Popup – Retornando um resultado.

Exibindo um pop-up

O .NET MAUI Community Toolkit fornece várias abordagens para exibir um Popup em um aplicativo MAUI do .NET:

1. Em uma ContentPage, chame o método de extensão this.ShowPopupAsync(), passando uma View para exibição no Pop-up
   • Nota: Para personalizar ainda mais um Pop-up, consulte a documentação do PopupOptions.
2. Como retornar um resultado do Popup
   • Consulte a documentação Pop-up - Como retornar um resultado.
3. Usando o PopupService
   • Consulte a documentação do PopupService.

A documentação a seguir demonstra a maneira mais simples de exibir um pop-up usando o .ShowPopupAsync() método de extensão. Esse método retorna um Task<IPopupResult>, que será concluído quando a janela pop-up for fechada. Os PopupOptions fornecidos são opcionais.

public class MainPage : ContentPage
{
    // ...

    async void DisplayPopupButtonClicked(object? sender, EventArgs e)
    {
        await this.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })

        /**** Alternatively, Shell.Current can be used to display a Popup

        await Shell.Current.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })
        ****/
    }
}

Como alternativa, um Popup pode ser criado em XAML ou C# e passado para ShowPopupAsync().

Criando um pop-up em XAML

A maneira mais fácil de criar um Popup é adicionar um novo .NET MAUI ContentView (XAML) ao seu projeto. Isso criará dois arquivos: um arquivo *.xaml e um arquivo *.xaml.cs .

Substitua o conteúdo de *.xaml pelo seguinte:

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyProject.SimplePopup"
    Padding="10">

    <Label Text="This is a very important message!" />
    
</ContentView>

Os valores padrão para HorizontalOptions e VerticalOptions resultarão na exibição do Popup sobreposto ao centro da página.

Um pop-up será apresentado com um Padding padrão de 15. Para melhorar a aparência do SimplePopup, um Padding com o valor 10 foi adicionado.

Apresentando um pop-up criado em XAML

Depois que o Popup tiver sido criado no XAML, ele poderá ser apresentado por meio do uso dos métodos de extensão Popup usados em uma Page, um Shell ou em uma INavigation, ou por meio da implementação do IPopupService deste kit de ferramentas.

O exemplo a seguir mostra como instanciar e mostrar o SimplePopup criado no exemplo anterior por meio de um método de extensão em um ContentPage.

using CommunityToolkit.Maui.Views;

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

        await this.ShowPopupAsync(popup, PopupOptions.Empty, token);
    }
}

Como fechar um Pop-up

Existem 2 maneiras diferentes de fechar um Popup:

1. Um pop-up pode ser fechado programaticamente
2. Um pop-up pode ser fechado quando um usuário toca fora do pop-up
   • Nota Para impedir que um pop-up feche quando um usuário toca fora dele, defina PopupOptions.CanBeDismissedByTappingOutsideOfPopup como false

1. Fechando programaticamente um pop-up

Há três opções para fechar um Popup programaticamente:

1. Em um ContentPage, use o método de extensão this.ClosePopupAsync()
2. Em um aplicativo usando Shell, use o método de extensão Shell.Current.ClosePopupAsync()
3. Usar o PopupService
   • Consulte a documentação do PopupService.

No exemplo abaixo, demonstramos como usar this.ClosePopupAsync() em um ContentPage. Para saber como usar PopupService para fechar um pop-up, consulte a documentação do PopupService.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayAutomaticallyClosingPopup(Timespan displayTimeSpan, CancellationToken token)
    {
        var popup = new SimplePopup();

        // This Popup is closed programmatically after 2 seconds
        this.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await this.ClosePopupAsync(token);

        /**** Alternatively, Shell.Current can be used to close a Popup
        Shell.Current.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await Shell.Current.ClosePopupAsync(token);
        ***/

    }
}

2. Tocando fora do Pop-up

Por padrão, um usuário pode tocar fora do Popup para ignorá-lo. Isso pode ser controlado por meio do uso da propriedade PopupOptions.CanBeDismissedByTappingOutsideOfPopup. Definir essa propriedade como false irá impedir que um usuário seja capaz de fora dela. Consulte PopupOptions para obter mais detalhes.

Opções de pop-up

PageOverlayColor, Shape, Shadow podem ser todos personalizados para Popup. Consulte PopupOptions para obter mais detalhes.

Eventos

A Popup classe fornece os seguintes eventos que podem ser assinados.

Evento	Descrição
Closed	Ocorre quando o Popup é fechado.
Opened	Ocorre quando o Popup é aberto.

Exemplos

Você pode encontrar um exemplo desse recurso na prática em Aplicativo de exemplo do Kit de Ferramentas da Comunidade do .NET MAUI.

API (Interface de Programação de Aplicativos)

O código-fonte do Popup pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.

Recursos adicionais

• IPopupService
• Popup - Como retornar um resultado
• PopupOptions – Personalizando um comportamento e uma Popup aparência