.NET MAUI - Usando o Community Toolkit

  Hoje vamos iniciar a apresentação de alguns recursos interessantes presentes no .NET MAUI Community ToolKit

O  .NET MAUI Community ToolKit é uma coleção de elementos comuns reutilizáveis para desenvolvimento móvel com o .NET Maui que podemos replicar em vários aplicativos. Ele segue a mesma abordagem do Xamarin Community Toolkit  do Xamarin Forms.

Ele simplifica e demonstra as tarefas comuns para desenvolvedor ao criar aplicativos iOS, Android, macOS e usando o .NET MAUI.  Vale a pena consultar. Quem sabe aquele recurso que você esta procurando não esta disponível neste pacote ?

O Community Toolkit do MAUI está disponível como um conjunto de pacotes de NuGet para projetos .NET MAUI novos ou existentes.

Você também pode visualizar os recursos do kit de ferramentas executando o aplicativo de exemplo disponível no repositório Community Toolkit MAUI.

Como usar o Community Toolkit

A seguir veremos o roteiro básico para poder usar o Community Toolkit em projetos .NET MAUI.

1- Abra um projeto existente ou crie um novo projeto .NET MAUI;
2- No painel do Gerenciador de Soluções, clique com o botão direito do mouse no nome do projeto;
3- Selecione Gerenciar Pacotes NuGet.
4- Pesquise CommunityToolkit.Maui e escolha o pacote de NuGet desejado na lista.
5- A seguir para adicione o namespace :

Composição dos pacotes Nugets

O Community Toolkit .NET MAUI é composto por três pacotes separados:

  1. CommunityToolkit.Maui

    Esse pacote é uma coleção de Animações, Comportamentos, Conversores e Exibições Personalizadas para desenvolvimento com o .NET MAUI. Ele simplifica e demonstra tarefas comuns do desenvolvedor criando aplicativos iOS, Android, macOS e Windows com o .NET MAUI.
     

  2. CommunityToolkit.Maui.Core

     Esse pacote inclui as principais definições de biblioteca para kits de ferramentas da comunidade usando o .NET MAUI.
     

  3. CommunityToolkit.Maui.Markup

     Esse pacote é um conjunto de métodos auxiliares fluentes e classes para simplificar a criação de interfaces de usuário declarativas do .NET MAUI em C#.

Baixe o aplicativo de exemplo .NET MAUI Community Toolkit do repositório para ver como usar o kit de ferramentas em um aplicativo real.

Exemplo prático

Vejamos agora um exemplo mostrando na prática como usar o .NET MAUI Community Toolkit.

Vamos criar um projeto .NET MAUI chamado Maui_Toolkit usando o template padrão.

A seguir vamos instalar os pacotes Nuget no projeto usando o menu Tools->..->Manage Nuget Packages for Solution;

Clique na guia Browse e selecione o pacote - CommunityToolkit.Maui, selecione os projetos e clique em Install:

Nota: Marque a opção - Include prerelease.

Ao final do processo teremos os 3 pacotes instalados no projeto.

Com os pacotes Nugets instalados vamos abrir o MauiProgram.cs e incluir o código que vai permitir usar o recurso em nosso projeto.

using CommunityToolkit.Maui;

namespace Maui_ToolKit;

public static class MauiProgram
{
             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");
                           });
                         return builder.Build();
               }
}

Agora vamos abrir o arquivo MainPage.xaml onde iremos usar o recurso DrawingView do Toolkit que fornece uma superfície que permite o desenho de linhas através do uso de toque ou interação do mouse.

O resultado de um desenho de usuário pode ser salvo como uma imagem. Um caso de uso comum para isso é fornecer uma caixa de assinatura em um aplicativo.

Assim teremos que incluir no arquivo XAML o seguinte código para habilitar o uso do toolkit :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="Maui_ToolKit.MainPage">

    <toolkit:DrawingView 
            IsMultiLineModeEnabled="True"
            LineColor="Red"
            LineWidth="5" />

</ContentPage>
 

Executando o projeto teremos o resultado abaixo:

E estamos conversados...

"Quem nos separará do amor de Cristo? A tribulação, ou a angústia, ou a perseguição, ou a fome, ou a nudez, ou o perigo, ou a espada?"
Romanos 8:35

Referências:

José Carlos Macoratti