Réutiliser des effets dans .NET MAUI

Article
05/14/2024

Bien qu’il y ait de nombreux avantages à utiliser les gestionnaires .NET Multi-platform App UI (.NET MAUI) pour personnaliser les contrôles, il est toujours possible d’utiliser les effets Xamarin.Forms dans les applications .NET MAUI. Pour plus d’informations sur les effets, consultez effets Xamarin.Forms.

Le processus de migration d’un effet Xamarin.Forms vers .NET MAUI consiste à :

Supprimez les attributs d’effet de vos classes d’effet. Pour plus d’informations, consultez Supprimer les attributs d’effet.
Supprimez les using directives d’effet. Pour plus d’informations, consultez Supprimer en utilisant des directives.
Ajoutez le code d’effet à l’emplacement approprié dans votre projet d’application .NET MAUI. Pour plus d’informations, voir Ajouter un code d’effet.
Inscrire l’effet. Pour plus d’informations, consultez Inscrire l’effet.
Consommez votre effet .NET MAUI. Pour plus d’informations, consultez Consommer l’effet.

Supprimer les attributs d’effet

Tous les attributs ResolutionGroupNameAttribute et ExportEffectAttribute doivent être supprimés de vos classes d’effet.

Supprimer en utilisant des directives

Toutes les références aux espaces de noms Xamarin.Forms et Xamarin.Forms.Platform.* doivent être supprimées de vos classes d’effet.

Ajouter le code d’effet

Si vous utilisez un projet multi-ciblé .NET MAUI, votre code d’effet doit être combiné en un seul fichier et placé en dehors du dossier Plateformes. Cela vous oblige à combiner votre RoutingEffectimplémentation et PlatformEffect implémentations dans un fichier unique, à l’aide de la compilation conditionnelle autour du code de plateforme. Toutefois, si votre solution comporte des projets distincts pour chaque plate-forme, vous devez déplacer les fichiers d’effets spécifiques à la plate-forme dans les projets correspondants.

Dans .NET MAUI, la classe RoutingEffect est dans l’espace de noms Microsoft.Maui.Controls. Cet espace de noms est l’une des directives implicites global using de .NET MAUI, et vous n’avez donc pas besoin d’ajouter une directive using pour celle-ci. Toutefois, la classe PlatformEffect se trouve dans l’espace de noms Microsoft.Maui.Controls.Platform, pour laquelle vous devez ajouter une directive using.

L’exemple de code suivant montre une classe FocusRoutingEffect et ses implémentations de plateforme combinées dans un seul fichier :

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

Inscrire l’effet

Dans votre projet d’application .NET MAUI, ouvrez MauiProgram.cs et appelez la méthode ConfigureEffects sur l’objet MauiAppBuilder dans la méthode CreateMauiApp :

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

  return builder.Build();
}

L’effet est inscrit auprès de la méthode ConfigureEffects, dont configureDelegate inscrit l’implémentation PlatformEffect sur son implémentation RoutingEffect.

Consommer l’effet

L’effet peut être consommé dans une application .NET MAUI en l’ajoutant à la collection Effects d’un contrôle :

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

Partager via