.NET MAUI - Exibindo um Popup

 Hoje veremos como exibir um popup usando o Community ToolKit do .NET MAUI

O . NET MAUI Community Toolkit é uma coleção de elementos reutilizáveis para desenvolvimento de aplicativos com . NET MAUI, incluindo animações, comportamentos, conversores, efeitos e auxiliares.

Ele simplifica e ajuda a realizar tarefas comuns do desenvolvedor ao criar aplicativos iOS, Android, macOS e WinUI usando o .NET MAUI.

O .NET MAUI Community Toolkit suporta as seguintes plataformas :

Além disso o Toolkit é criado como um conjunto de projetos de código aberto hospedados no GitHub pela comunidade; ou seja é grátis.

Consulte a documentação neste link: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/

O kit de ferramentas está disponível como um conjunto de pacotes NuGet que podem ser adicionados a qualquer projeto novo ou existente usando o Visual Studio.

Assim, basta abrir o seu projeto .NET MAUI ou criar um novo projeto e na janela Solution Explorer, clique com o botão direito do mouse no nome do projeto e selecione Manage NuGet Packages. Pesquise CommunityToolkit.Maui e escolha o pacote NuGet desejado na lista.

Escolha o(s) kit(s) de ferramentas mais apropriado(s) para suas necessidades dentre as opções abaixo:

Em todas as opções você vai ter que definir a instrução using ao topo do seu arquivo MauiProgram.cs

  1. using CommunityToolkit.Maui;
  2. using CommunityToolkit.Maui.Markup;
  3. using CommunityToolkit.Maui.MediaElement;

Além disso, para usar o kit de ferramentas corretamente, ao inicializar um aplicativo, no arquivo MauiProgram.cs você deve chamar a na classe MauiAppBuilder o respectivo método conforme o pacote usado:

  1. CommunityToolkit.Maui

    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkit()
     

  2. CommunityToolkit.Markup

     var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMarkup()
     

  3. CommunityToolkit.Maui.MediaElement

    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMediaElement()

Para ilustrar vamos criar uma aplicação .NET MAUI e mostrar exibir um popup usando o ToolKit.

Para isso após criar a aplicação instale o pacote CommunityToolkit.Maui no projeto.

A seguir vamos abrir a classe MauiProgram e incluir no método CreateMauiApp o código :

...
public static MauiApp CreateMauiApp()
{
   var builder = MauiApp.CreateBuilder();
   builder
.UseMauiApp<App>()
        .UseMauiCommunityToolkit()
        .ConfigureFonts(fonts =>
{
  fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
  fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
...

Em seguida, vá para a página onde você quer exibir o popup. No nosso exemplo vamos criar uma contenct page no projeto chamada PopupPage.xaml.

A seguir vamos abrir o arquivo xaml e alterar o código incluindo o namespace :

 xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"

O código abaixo mostra as alterações da página:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
             x:Class="MauiPopUp.PopupPage"
             CanBeDismissedByTappingOutsideOfPopup="False">

    <Frame>

    <VerticalStackLayout Spacing="5">
            <Image Source="dotnet_bot" HeightRequest="50" WidthRequest="50"/>
            <Label Text="Conteúdo" FontSize="25" FontAttributes="Bold"/>
            <Label Text="Descrição" FontSize="18"/>
            <HorizontalStackLayout Spacing="10">
               <Button x:Name="btnSim" Text="Sim"
                   HorizontalOptions="Center"
                   Clicked="btnSim_Clicked" />
                <Button x:Name="btnNao" Text="Não"
                    HorizontalOptions="Center"
                    Clicked="btnNao_Clicked" />
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </Frame>

</mct:Popup>

Neste código definimos a propriedade CanBeDismissedByTappingOutsideOfPopup como False, assim o usuário não será capaz de descartar o pop-up tocando fora dele.

Definimos um layout para exibir o popup usando um frame , uma imagem e dois botões de comando.

A seguir precisamos alterar o código do code-behind Popup.xaml.cs e fazer o tratamento dos eventos dos botões :

using CommunityToolkit.Maui.Views;

namespace MauiPopUp;

public partial class PopupPage : Popup
{
   public PopupPage()
   {
InitializeComponent();
    }

    private void btnNao_Clicked(object sender, EventArgs e) => Close(false);

    private void btnSim_Clicked(object sender, EventArgs e) => Close(true);
}

Vamos exibir o popup na página MainPage. Para isso vamos alterar o código do arquivo MainPage.xaml.cs aproveitando o evento Click do botão de comando conforme abaixo:

using CommunityToolkit.Maui.Views;

namespace MauiPopUp;

public partial class MainPage : ContentPage
{
   public MainPage()
   {
      InitializeComponent();
   }

    private async void OnCounterClicked(object sender, EventArgs e)
    {
        await DisplayPopup();
     }

    public async Task DisplayPopup()
    {
        var popup = new PopupPage();

        var result = await this.ShowPopupAsync(popup);

        if (result is bool boolResult)
        {
            if (boolResult)
            {
                await DisplayAlert("Sim", "Obrigado", "OK");
            }
            else
            {
                await DisplayAlert("Não", "Obrigado", "OK");
            }
        }
    }
}

O método DisplayPopup() é invocado e usando o método ShowPopupAsync() exibe uma instância do nosso popup e também trata a seleção do usuário exibindo um DisplayAlert :

Pegue o projeto aqui: MauiPopUp.zip 

 "Todas as coisas são puras para os puros, mas nada é puro para os contaminados e infiéis; antes o seu entendimento e consciência estão contaminados."
Tito 1:15

Referências:

José Carlos Macoratti