PopupOptions – Personalizando o comportamento e a aparência do pop-up

A classe PopupOptions fornece a capacidade de personalizar a aparência e o comportamento do Popup.

Todos os exemplos nesta página usam o SimplePopup exemplo abordado em Popup.

Controlando se o usuário pode ignorar o pop-up

PopupOptions fornece a propriedade CanBeDismissedByTappingOutsideOfPopup que pode controlar se o usuário pode tocar ou clicar fora dos limites do pop-up para fechar o pop-up que está atualmente exibido. Isso é true por padrão. O exemplo a seguir mostra como impedir que um usuário seja capaz de ignorar o Pop-up.

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    CanBeDismissedByTappingOutsideOfPopup = false
});

Observação

É possível armazenar PopupOptions em cache para reutilizar em ações de navegação futuras ou com outros pop-ups que compartilhem a mesma configuração, evitando assim alocações desnecessárias.

Personalizar a Cor da Sobreposição

PopupOptions fornece a propriedade PageOverlayColor, que pode controlar o Color que se sobrepõe à página atual. O exemplo a seguir mostra como definir o PageOverlayColor para a cor laranja.

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    PageOverlayColor = Colors.Orange
});

O Popup acima é renderizado com um segundo plano opaco, para controlar a opacidade, modifique a propriedade alfa de um Color. O exemplo a seguir mostra como

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    PageOverlayColor = Colors.Orange.WithAlpha(0.5f)
});

Personalizar a borda do pop-up

PopupOptions fornece a Shape propriedade que pode controlar a aparência da borda em torno do conteúdo exibido no Popup. O exemplo a seguir mostra como definir a borda como um retângulo arredondado com um raio de canto de 4 e um traço de azul.

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    Shape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(4),
        Stroke = Colors.Blue,
        StrokeThickness = 4
    }
});

Para obter mais detalhes sobre como personalizar a Shape propriedade, consulte Formas MAUI do .NET.

Desabilitar a borda do pop-up

Para desabilitar a borda em um pop-up, basta definir a Shape propriedade como null. O exemplo a seguir mostra como conseguir isso

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    Shape = null
});

Personalizar a sombra da janela de pop-up

PopupOptions fornece a Shadow propriedade que pode controlar a sombra que é aplicada ao Popup. O exemplo a seguir mostra como definir a sombra como verde com uma opacidade de 80%.

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    Shadow = new Shadow
    {
        Brush = Brush.Green,
        Opacity = 0.8f
    }
});

Para obter mais detalhes sobre como personalizar a Shadow propriedade, consulte .NET MAUI Shadow.

Desabilitar a sombra do pop-up

Para desabilitar a borda em um pop-up, basta definir a Shape propriedade como null. O exemplo a seguir mostra como conseguir isso

await this.ShowPopupAsync(new SimplePopup(), new PopupOptions
{
    Shadow = null
});

Propriedades

Propriedade	Tipo	Descrição
CanBeDismissedByTappingOutsideOfPopup	bool	Obtém ou define um valor que indica se o pop-up pode ser descartado tocando fora do pop-up. No Android – quando false, o botão voltar do hardware está desabilitado.
OnTappingOutsideOfPopup	Action	Obtém ou define o Action a ser executado quando o usuário toca fora do Popup.
PageOverlayColor	Color	Obtém ou define o Color da sobreposição por trás do Popup.
Shape	Shape	Obtém ou define a forma da borda para o Popup. Defina isso para null para remover qualquer estilo de borda.
Shadow	Shadow	Obtém ou define o Shadow do Popup. Defina isso para null para remover qualquer sombra.

Exemplos

Você pode encontrar um exemplo desse recurso em ação no Aplicativo de Exemplo do .NET MAUI Community Toolkit.

API (Interface de Programação de Aplicativos)

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

Recursos adicionais

• Popup
• IPopupService
• Popup - Como retornar um resultado