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 .UseMauiAppassim:
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.