Reutilizar efeitos no .NET MAUI

Artigo
05/14/2024

Embora haja muitos benefícios em usar manipuladores do .NET MAUI (Interface do usuário de aplicativo multiplataforma do .NET) para personalizar controles, ainda é possível usar efeitos do Xamarin.Forms em aplicativos do .NET MAUI. Para obter mais informações sobre efeitos, consulte Efeitos do Xamarin.Forms.

O processo para migrar um efeito do Xamarin.Forms para o .NET MAUI é:

Remova os atributos de efeito de suas classes de efeito. Para obter mais informações, consulte Remover atributos de efeito.
Remova as diretivas using de efeito. Para obter mais informações, consulte Remover diretivas using.
Adicione o código de efeito ao local apropriado em seu projeto de aplicativo do .NET MAUI. Para obter mais informações, consulte Adicionar o código de efeito.
Registre o efeito. Para obter mais informações, consulte Registrar o efeito.
Consuma o efeito do .NET MAUI. Para obter mais informações, confira Consumir o efeito.

Remover atributos de efeito

Quaisquer atributos ResolutionGroupNameAttribute e ExportEffectAttribute devem ser removidos de suas classes de efeito.

Remover diretivas using

Todas as referências aos namespaces Xamarin.Forms e Xamarin.Forms.Platform.* devem ser removidas das classes de efeito.

Adicionar o código de efeito

Se você estiver usando um projeto de vários destinos do .NET MAUI, seu código de efeito deverá ser combinado em um único arquivo e colocado fora da pasta Plataforms. Isso exige que você combine sua implementação RoutingEffect e implementações PlatformEffect em apenas um arquivo, usando a compilação condicional em torno do código da plataforma. No entanto, se sua solução tiver projetos separados por plataforma, você deverá mover os arquivos de efeito específicos da plataforma para os projetos correspondentes.

No .NET MAUI, a classe RoutingEffect está no namespace Microsoft.Maui.Controls. Esse namespace é uma das diretivas global using implícitas do .NET MAUI e, portanto, você não precisa adicionar uma diretiva using para ele. No entanto, a classe PlatformEffect está no namespace Microsoft.Maui.Controls.Platform, para o qual você precisa adicionar uma diretiva using.

O seguinte exemplo de código mostra uma classe FocusRoutingEffect e as respectivas implementações de plataforma combinadas em apenas um arquivo:

using Microsoft.Maui.Controls.Platform;

namespace MyMauiApp.Effects;

internal class FocusRoutingEffect : RoutingEffect
{
}

#if ANDROID
internal class FocusPlatformEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        // Customize the control here
    }

    protected override void OnDetached()
    {
        // Cleanup the control customization here
    }
}
#elif IOS
internal class FocusPlatformEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        // Customize the control here
    }

    protected override void OnDetached()
    {
        // Cleanup the control customization here
    }
}
#elif WINDOWS
internal class FocusPlatformEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        // Customize the control here
    }

    protected override void OnDetached()
    {
        // Cleanup the control customization here
    }
}
#endif

Registrar o efeito

Em seu projeto de aplicativo do .NET MAUI, abra MauiProgram.cs e chame o método ConfigureEffects no objeto MauiAppBuilder no método CreateMauiApp:

public static MauiApp CreateMauiApp()
{
  var builder = MauiApp.CreateBuilder();
  builder
    .UseMauiApp<App>()
    .ConfigureEffects(effects =>
    {
      effects.Add<FocusRoutingEffect, FocusPlatformEffect>();
    });

  return builder.Build();
}

O efeito é registrado com o método ConfigureEffects, cujo configureDelegate registra a implementação PlatformEffect na respectiva implementação RoutingEffect.

Consumir o efeito

O efeito pode ser consumido em um aplicativo do .NET MAUI adicionando-o à coleção Effects de um controle:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyMauiApp.Effects"
             x:Class="MyMauiApp.MainPage">
    <VerticalStackLayout>
        <Entry Text="Enter your text">
            <Entry.Effects>
                <local:FocusRoutingEffect />
            </Entry.Effects>
        </Entry>
    </VerticalStackLayout>
</ContentPage>

Compartilhar via