Xamarin Forms – Pop up customizado

No Xamarin Forms, para exibir mensagens de alerta ou solicitar uma decisão  de Sim ou Não do usuário, podemos utilizar os método DisplayAlert e DisplayActionSheet do pacote Xamarin.Forms.Core.

Mas e se precisarmos exibir um pop up um pouco mais customizado com entrys, buttons, imagens entre outros?

Os métodos DisplayAlert e DisplayActionSheet recebem por parametros algumas informações como titulo, mensagem, texto descritivo do botão e algumas outras opção que não nos dão muito poder de customização.

Uma das opções para construir um modal mais poderoso, seria partir para uma implementação nativa, o que nos custaria um pouco mais de tempo e aumentaria a complexidade do projeto.

Pensando nisto, vamos ver como podemos atingir este objetivo sem precisar realizar implementações nativas.

Por que ter pop ups customizados?

Algumas vezes nos apps Xamarin Forms que desenvolvemos não queremos criar uma tela para realizar uma ação pequena, como por exemplo colher uma opinião do usuário, solicitar o email para redefinição de senha, ou até mesmo para exibir uma propaganda com uma imagem. Funcionalidades assim, dependendo do cenário, não precisam de uma tela, elas são bem executas com uma janela pop up / modal no nosso app.

O pop up pode nos ajudar a economizar passos do usuário tornando o app mais conciso e mais fácil de usar. Mas atenção, não abuse tanto dos pop ups para que o app não fica intrusivo demais para o usuário, subindo janelinhas a todos os momentos.. Vale a ressalva de que caberá a você decidir o momento em que um pop up poderá de ajudar ou poderá te atrapalhar.

RG PopUp

Para criar o modal no projeto .Net Standart utilizando XAML e então abstraindo a complexidade da implementação em plataformas espcíficas, vamos utilizar o plugin Rg.PopUp.

Ele é open source, compatível com .Net Standart e muito útil na criação de pop ups e modais. A implementação é simples e não requer muitas linhas de código.

O plugin é compatível com as plataformas Android, iOS e UWP.

Criando um PopUp de cadastro

Vamos criar um novo projeto Xamarin Forms .Net Standart para esta implementação.

Após criado o projeto, instale o pacote nuget RG.Plugins.PopUp.

Após instalar o pacote, é necessário iniciá-lo nos projetos das plataformas específicas.

No projeto Android, acesse o arquivo MainActivity.cs e vamos adicionar a linha abaixo antes do método LoadApplication:

Rg.Plugins.Popup.Popup.Init(this, bundle);

No projeto iOS acesse o arquivo AppDelegate.cs também antes do método LoadApplication, vamos adicionar a linha abaixo:

Rg.Plugins.Popup.Popup.Init();

Após iniciado o plugin, podemos partir para a criação do PopUp.

Vamos criar uma ContentView no projeto .Net Standart e chamá-la de CadastroPopUpView.

Na ContentView, primeiramente vamos adicionar o namespace do Rg Pop Up, para iso, vamos adicionar a linha abaixo na declaração view:

xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"

Agora que já adicionamos a namespace, vamos alterar o tipo da ContentView para que ela seja uma PopupPage do Rg PopUp:

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
        x:Class="PopUpForm.CadastroPopUpView">

Pronto! Agora vamos adicionar os controles na PopupPage :

<?xml version="1.0" encoding="UTF-8"?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                x:Class="PopUpForm.CadastroPopUpView">
    <StackLayout Margin="12"
                Padding="24"
                BackgroundColor="WhiteSmoke"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="Center">

        <Entry Placeholder="Nome" x:Name="Nome"/>
        <Entry Placeholder="E-mail"/>
        <Button Text="Enviar" Clicked="Button_Clicked"/>
    </StackLayout>
</pages:PopupPage>

Você deve ter notado que há um evento no Clicked do botão, o Button_clicked ele está declarado no .cs da página e apenas exibe um alerta simulando um cadastro. Vale lembrar que aqui você poderia tratar a lógica de negócio em uma View Model.

Meu evento está definido assim:

private void Button_Clicked(object sender, EventArgs e)
{
    DisplayAlert("Cadastro realizado", Nome.Text, "OK");
}

Agora vamos realizar a chamada para este pop up. Na MainPage criada automaticamente no projeto, vamos adicionar um botão para que ele, ao ser clicado, abra o pop up de cadastro:

<Button Text="Abir Modal de Cadastro" Clicked="AbrirPopUpCadastro"/>

E então, vamos adicionar o evento também no .cs da página (Aqui você também poderia tratar em uma View Model em seu projeto caso seja necessário):

public async void AbrirPopUpCadastro(object sender, EventArgs e)
{
    await PopupNavigation.PushAsync(new CadastroPopUpView());
}

Conclusão

A criação do modal/popup de cadastro ou de exibição personalizada requer o uso de plugin para abstração das implementações nativas. O uso exessivo de plugins pode ser questionável, mas acredito que neste cenário é bem indicado. O popup funciona bem e cumpre o objetivo. A implementação foi simples e com as linguagens que já estamos acostumados no Xamarin Forms.

—

#Ubuntu

Imagem utilizada no post Pixabay