Efectos de reutilización en .NET MAUI

Aunque hay muchas ventajas en el uso de controladores de .NET Multi-platform App UI (.NET MAUI) para personalizar controles, todavía es posible usar efectos de Xamarin.Forms en aplicaciones .NET MAUI. Para obtener más información sobre los efectos, consulta Xamarin.Forms effects.

El proceso para migrar un efecto de Xamarin.Forms a .NET MAUI es el siguiente:

1. Quita los atributos de efecto de las clases de efecto. Para obtener más información, consulta Remove effect attributes.
2. Quita las directivas de efecto using. Para obtener más información, consulta Remove using directives.
3. Agrega el código de efecto a la ubicación adecuada en el proyecto de aplicación .NET MAUI Para obtener más información, consulta Add the effect code.
4. Registra el efecto. Para obtener más información, consulta Register the effect.
5. Consumo del efecto .NET MAUI. Para obtener más información, consulta Consume the effect.

Quitar atributos de efecto

Los atributos ResolutionGroupNameAttribute y ExportEffectAttribute deben quitarse de las clases de efecto.

Quitar usando directivas

Las referencias a los espacios de nombres Xamarin.Forms y Xamarin.Forms.Platform.* deben quitarse de las clases de efecto.

Adición del código de efecto

Si usas un proyecto .NET MAUI con varios destinos, el código de efecto debe combinarse en un único archivo y colocarse fuera de la carpeta Plataformas. Esto requiere que combines la implementación RoutingEffect y las implementaciones PlatformEffect en un único archivo usando la compilación condicional en torno al código de la plataforma. Sin embargo, si tu solución tiene proyectos independientes por plataforma, debes mover los archivos de efecto específicos de la plataforma a los proyectos correspondientes.

En .NET MAUI, la clase RoutingEffect se encuentra en el espacio de nombres Microsoft.Maui.Controls. Este espacio de nombres es una de las directivas global using implícitas de .NET MAUI, por lo que no es necesario agregar una directiva using para este. Sin embargo, la clase PlatformEffect se encuentra en el espacio de nombres Microsoft.Maui.Controls.Platform para el que debes agregar una directiva using.

En el ejemplo de código siguiente se muestra una clase FocusRoutingEffect y sus implementaciones de plataforma combinadas en un único archivo:

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

Registro del efecto

En el proyecto de aplicación .NET MAUI, abre MauiProgram.cs y llama al método ConfigureEffects en el objeto MauiAppBuilder del método CreateMauiApp:

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

  return builder.Build();
}

El efecto se registra con el método ConfigureEffects, cuya implementación configureDelegate registra la implementación PlatformEffect en su implementación RoutingEffect.

Consumo del efecto

El efecto se puede consumir en una aplicación .NET MAUI agregándolo a la colección Effects de un control:

<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>