Explorando pop-ups e caixas de diálogo: promoções, atualizações de carrinho, ofertas

Os pop-ups podem ajudar em aplicativos de comércio eletrônico para alertar o usuário sobre informações importantes.

Em um aplicativo, existem muitas maneiras de capturar a atenção do usuário e exibir informações relevantes. Um dos métodos mais eficazes é usar pop-ups—caixas informativas que aparecem acima do conteúdo da tela atual, permitindo comunicar mensagens importantes ou solicitar ao usuário que tome decisões importantes.

Por exemplo, você pode mostrar uma mensagem como:

“Tem certeza de que deseja excluir este registro?”

Junto com os botões “Sim” e “Não”. Este tipo de pop-up é comumente usado para confirmar ações confidenciais ou irreversíveis. Mas também pode servir a um propósito puramente informativo, como:

“Registro atualizado com sucesso!”

Agora, imagine que você tem um aplicativo de varejo e deseja notificar os usuários sobre uma nova promoção. Você pode mostrar um pop-up na primeira vez que o usuário abrir o aplicativo, apresentando uma mensagem atraente e um botão de call to action como “Oferta de reivindicação.” Isso não apenas ajuda o usuário a ver a promoção, mas também ajuda a gerar mais vendas no aplicativo.

Os pop-ups também são ótimos para manter os usuários informados sobre eventos em tempo real, como atualizações de pedidos, erros de validação ou confirmações de sucesso.

Em resumo, os pop-ups são um componente super útil, versátil e fácil de implementar—especialmente ao trabalhar com .NET MAUI, onde você pode aproveitar as vantagens da UI Progress Telerik para Controle pop-up .NET MAUI para integrá-los de forma rápida e bonita ao seu aplicativo.

O controle .NET MAUI Popup permite exibir janelas pop-up personalizadas em seu aplicativo – perfeito para mostrar alertas, mensagens importantes ou obter confirmação e entrada do usuário.

Este controle faz parte da UI do Telerik para Biblioteca .NET MAUIque oferece mais de 60 componentes de UI projetados profissionalmente. É ideal para criar aplicativos modernos e multiplataforma com uma experiência de usuário refinada.

Configuração inicial

Vamos definir a configuração básica para que você possa usar o controle diretamente no seu arquivo XAML.

Por enquanto, vamos nos concentrar apenas nesta configuração inicial. À medida que avançamos, você verá como os outros detalhes são implementados passo a passo.

Em primeiro lugar, certifique-se de ter os seguintes pré-requisitos em mãos:

Depois que todos os pré-requisitos estiverem definidos, você estará pronto para começar! 😎

Etapa 1: adicionar o namespace Telerik

Acesse seu arquivo XAML e adicione o seguinte namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Etapa 2: registrar o Telerik em MauiProgram.cs

Vá até o seu MauiProgram.cs arquivo e, dentro do CreateMauiApp método, adicione .UseTelerik()para ativar os controles Telerik. Coloque-o logo acima .UseMauiApp()assim:

using Telerik.Maui.Controls.Compatibility; 

public static class MauiProgram 
{ 
public static MauiApp CreateMauiApp() 
{ 
    var builder = MauiApp.CreateBuilder(); 
    builder 
	    .UseTelerik() 
	    .UseMauiApp() 
	    .ConfigureFonts(fonts => 
    { 
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
    }); 
	    return builder.Build(); 
    } 
}

Explorando os modais suportados

Agora que você tem a implementação necessária para começar, vamos explorar os diferentes tipos de pop-ups que você pode usar. Com o controle Telerik .NET MAUI Popup, você pode configurá-lo facilmente para se comportar como modal ou não modal, dependendo da interação que você deseja criar.

Mas o que isso significa? 🤔 Deixe-me explicar as características de cada um:

Este tipo de pop-up aparece acima do conteúdo e bloqueia a tela inteira. O usuário não pode interagir com mais nada até responder ao pop-up.

Por exemplo, se aparecer uma mensagem como “Tem certeza de que deseja atualizar o registro?” o usuário deve pressionar Aceitar ou Cancelar antes de continuar a usar o aplicativo.

📝 Isso é ideal para ações importantes ou delicadas.

Isso também aparece acima do conteúdo mas não bloqueia a tela. O usuário pode tocar fora do pop-up para descartá-lo ou simplesmente ignorá-lo e continuar usando o aplicativo. É útil para mostrar mensagens rápidas ou sugestões informativas.

⚠️ Se a mensagem for crítica ou precisar de confirmação, é melhor usar um pop-up modal para garantir que o usuário veja e responda de acordo.

Como implementá-lo no código?

Para especificar se o pop-up deve ser modal ou não modal, basta definir o IsModal propriedade para True ou Falsedependendo do comportamento que você deseja.

Abaixo, você pode ver um exemplo completo de como definir o pop-up em XAML e definir o IsModal propriedade.

C# Code-Behind

Veja como você abre e fecha o pop-up:

private void ClosePopup(object sender, EventArgs e) => popup.IsOpen = false;

private void ShowPopup(object sender, EventArgs e) => popup.IsOpen = true;

Aqui está uma imagem que mostra o resultado:

Animações disponíveis

O pop-up .NET MAUI oferece suporte a animações integradas que são reproduzidas quando o pop-up é mostrado ou oculto. Você também tem controle total sobre o tipo de animação, isso é duração e o facilitando (o ritmo em que a animação é executada).

🔧 Configurando o tipo de animação

Você pode configurar a animação usando o AnimationType propriedade, que aceita as seguintes opções:

• Fade (padrão): O pop-up aparece e desaparece suavemente.
• None: Desativa totalmente as animações. O pop-up aparecerá ou desaparecerá instantaneamente, sem efeito visual.
• Zoom: O pop-up aparece com efeito de zoom, como se se expandisse ou contraísse a partir do centro.

⏱️ Duração da Animação

Você também pode definir, em milissegundos, quanto tempo deseja que a animação dure usando o botão AnimationDuration propriedade. O valor padrão é 300 ms.

🌀 Facilitação de animação

Este permite controlar o ritmo da animação – como ela acelera e desacelera ao longo do tempo.

Você pode escolher entre diversas opções de flexibilização, como:

• Easing.Linear (padrão): A animação é executada a uma velocidade constante do início ao fim.
• Easing.CubicIn: A animação começa lentamente e depois acelera.
• Easing.BounceOut: A animação termina com um efeito de salto divertido.

Sinta-se à vontade para explorar outras opções de atenuação disponíveis na classe Microsoft.Maui.Easing para combinar com o estilo do seu aplicativo.

Você também tem a opção de configurar propriedades que controlam como o pop-up é posicionado na tela. As principais opções incluem:

🔹 PlacementTarget: O elemento de referência relativo ao qual o pop-up será exibido quando for aberto.
🔹 Placement: Especifica como o pop-up será alinhado em relação ao PlacementTarget. Esta propriedade aceita um valor do tipo PlacementMode e suporta as seguintes opções:

• O Principal, Certo, Esquerda e Fundo as opções definem em que lado do elemento de referência o pop-up aparecerá. Por exemplo, se Principal estiver selecionado, o pop-up será exibido logo acima do elemento; se Certo for escolhido, ele aparecerá à sua direita e assim por diante.
• Centro posicionará o pop-up diretamente no centro do destino do canal.
• Relativo alinha o canto superior esquerdo do pop-up com o canto superior esquerdo do destino do canal.

🔹 HorizontalOffset e VerticalOffset permitem ajustar a posição do pop-up, deslocando-o horizontalmente ou verticalmente em relação ao seu elemento âncora.

Em outras palavras, eles controlam a quantidade de espaço entre o pop-up e o elemento ao qual está anexado.

Aqui está um exemplo de como isso pode ser implementado:

Você também pode personalizar o estilo deste elemento!

Ao usar o OutsideBackgroundColor propriedade, você pode definir a cor de fundo externa do pop-up. Por padrão, está definido como Color.Transparent.

⚠️ Importante: Se você usar um valor hexadecimal, certifique-se de seguir as instruções #AARRGGBB formatar.

Aqui está um exemplo de como aplicá-lo:

Conclusão

Está tudo pronto! Agora você está pronto para implementar o pop-up .NET MAUI em seus aplicativos. Espero que você aproveite ao máximo esse controle poderoso para oferecer uma experiência de usuário incrível! 💚💕

Se você tiver alguma dúvida, fique à vontade para deixá-la nos comentários.
Até a próxima! 🙋‍♀️

Referências

Pronto para começar?

Telerik UI para .NET MAUI vem com uma avaliação gratuita de 30 dias, então experimente você mesmo o Popup e mais de 65 outros componentes nativos do .NET MAUI.

Experimente agora