Reutilizar renderizadores personalizados no .NET MAUI

Navegue pelo exemplo

Embora haja muitos benefícios em usar manipuladores .NET Multi-platform App UI (.NET MAUI) para personalizar e criar controles, ainda é possível usar renderizadores personalizados Xamarin.Forms em aplicativos .NET MAUI. Para obter mais informações sobre renderizadores personalizados, consulte Renderizadores personalizados Xamarin.Forms.

Renderizadores Shimmed

O .NET MAUI fornece renderizadores shimmed que permitem a reutilização fácil de renderizadores personalizados do Xamarin.Forms, desde que o renderizador derive de FrameRenderer, , ShellRenderer no iOS e Android, ListViewRendererTableViewRenderere VisualElementRenderer.

O processo para migrar um renderizador personalizado Xamarin.Forms que deriva de FrameRenderer, , , TableViewRendererListViewRendererShellRenderere VisualElementRenderer para um renderizador shimmed do .NET MAUI é:

1. Adicione o código de renderizador personalizado no local apropriado em seu(s) projeto(s) .NET MAUI. Para obter mais informações, consulte Adicionar o código.
2. Modifique as using diretivas e remova ExportRenderer atributos. Para obter mais informações, consulte Modificar usando diretivas e outro código.
3. Registre os renderizadores. Para obter mais informações, consulte Registrar renderizadores.
4. Consuma os renderizadores. Para obter mais informações, consulte Consumir os renderizadores personalizados.

Para demonstrar o uso de renderizadores personalizados no .NET MAUI, considere um controle Xamarin.Forms chamado PressableView. Esse controle expõe Pressed e Released eventos com base em gestos específicos da plataforma. A implementação do renderizador personalizado é composta de 3 arquivos:

• PressableView.cs - a classe multiplataforma que se estende ContentView.
• PressableViewRenderer.cs - a implementação do Android, que deriva do VisualElementRenderer.
• PressableViewRenderer.cs - a implementação do iOS, que deriva do VisualElementRenderer.

Observação

Uma alternativa ao uso de um renderizador personalizado Xamarin.Forms no .NET MAUI é migrar o renderizador personalizado para um manipulador .NET MAUI. Para obter mais informações, consulte Migrar um renderizador personalizado Xamarin.Forms para um manipulador MAUI do .NET.

Adicionar o código

Se você estiver usando um projeto multi-direcionado do .NET MAUI, o arquivo de plataforma cruzada poderá ser movido para qualquer lugar fora da pasta Plataformas e os arquivos de implementação específicos da plataforma deverão ser movidos para a pasta Plataforma correspondente:

Se sua solução tiver projetos separados por plataforma, você deverá mover os arquivos de implementação específicos da plataforma para os projetos correspondentes.

Modificar usando diretivas e outros códigos

Qualquer referência aos Xamarin.Forms.* namespaces precisa ser removida e, em seguida, você pode resolver os tipos relacionados ao Microsoft.Maui.*. Isso precisa ocorrer em todos os arquivos adicionados ao(s) projeto(s) .NET MAUI.

Você também deve remover todos os ExportRenderer atributos, pois eles não serão necessários no .NET MAUI. Por exemplo, o seguinte deve ser removido:

[assembly: ExportRenderer(typeof(PressableView), typeof(PressableViewRenderer))]

Registrar renderizadores

O controle multiplataforma e seus renderizadores devem ser registrados em um aplicativo antes que ele possa ser consumido. Isso deve ocorrer no CreateMauiApp método na MauiProgram classe em seu projeto de aplicativo, que é o ponto de entrada entre plataformas para o aplicativo:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers((handlers) =>
            {
#if ANDROID
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.Droid.Renderers.PressableViewRenderer));
#elif IOS
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.iOS.Renderers.PressableViewRenderer));
#endif
            });

        return builder.Build();
    }
}

Os renderizadores são registrados com o ConfigureMauiHandlers método and AddHandler . Esse primeiro argumento para o método é o tipo de controle de plataforma cruzada, com o AddHandler segundo argumento sendo seu tipo de renderizador.

Importante

Somente renderizadores que derivam de FrameRenderer, , no iOS e Android, ListViewRendererTableViewRendererShellRenderer e VisualElementRenderer podem ser registrados com o AddHandler método.

Consumir os renderizadores personalizados

O renderizador personalizado pode ser consumido em um aplicativo .NET MAUI como um controle personalizado:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:XamarinCustomRenderer.Controls"
             x:Class="MauiCustomRenderer.MainPage">
    <Grid BackgroundColor="#f1f1f1">
        <controls:PressableView Pressed="Handle_Pressed"
                                Released="Handle_Released"
                                HorizontalOptions="Center"
                                VerticalOptions="Center">
            <Grid BackgroundColor="#202020"
                  HorizontalOptions="Center"
                  VerticalOptions="Center">
                <Label Text="Press Me"
                       FontSize="16"
                       TextColor="White"
                       Margin="24,20"
                       HorizontalTextAlignment="Center" />
            </Grid>
        </controls:PressableView>
    </Grid>
</ContentPage>