Moteurs de rendu Xamarin vers gestionnaires .NET MAUI

Découvrez comment migrer les moteurs de rendu de Xamarin Forms vers les gestionnaires .NET MAUI.

Parmi les points les plus importants de l’évolution de Xamarin.Forms vers .NET MAUI figurent les améliorations qui ont été appliquées en fonction de l’apprentissage obtenu.

Je sais que vous avez travaillé avec des moteurs de rendu personnalisés dans Xamarin.Forms et vous vous demandez probablement comment vous pouvez les utiliser dans .NET MAUI. Vous êtes au bon endroit ! Dans cet article, nous allons apprendre à migrer les rendus personnalisés de Xamarin Forms vers les gestionnaires .NET MAUI.

Apprenez à connaître les gestionnaires

.NET MAUI fournit une interface graphique sur laquelle nous pouvons communiquer avec l’utilisateur de manière plus efficace, en affichant et en envoyant des données. Chacun des contrôles que nous utilisons pour construire cette interface a une représentation d’interface qui résume le contrôle. Les contrôles qui implémentent cette interface sont connus sous le nom de vues natives, qui sont utilisées sur chaque plate-forme.

Les gestionnaires sont responsables de l’instanciation de la vue native sous-jacente et du mappage de l’API de contrôle multiplateforme à l’API de la vue native. Ensuite, vous verrez cette explication graphiquement :

Que sont les mappeurs ?

Les mappeurs sont un concept clé dans les gestionnaires .NET MAUI, fournissant généralement un mappeur de propriétés et parfois un mappeur de commandes, qui mappe l’API du contrôle multiplateforme à l’API de la vue native.

Comprenons un peu plus :

• UN mappeur de propriété est un nouveau concept introduit par les gestionnaires. C’est un Dictionary chargé de décider des actions à entreprendre lorsqu’un changement de propriété se produit dans le champ multiplateforme. Chaque gestionnaire de plate-forme fournit des implémentations d’actions qui gèrent ensuite l’API de vue native. Cela signifie que lorsque vous définissez une propriété sur un contrôle multiplateforme, la vue native sous-jacente est mise à jour selon les besoins.
• UN mappeur de commandes définit les actions à entreprendre lorsque le contrôle multiplateforme envoie des commandes (instructions) aux vues natives. Contrairement aux mappeurs de propriétés, ils permettent de transmettre des données supplémentaires.

L’avantage d’utiliser des mappeurs pour mettre à jour les vues natives est qu’ils peuvent être dissociés des contrôles multiplateformes. Cela élimine le besoin pour les vues natives de s’abonner et de se désabonner des événements de contrôle multiplateformes.

Évolution des rendus Xamarin vers les gestionnaires .NET MAUI

Soulignons quelques-unes des améliorations les plus pertinentes de l’évolution des moteurs de rendu Xamarin vers les gestionnaires .NET MAUI :

Moteurs de rendu Xamarin

• Malgré les améliorations mises en œuvre, il est important de savoir qu’il est toujours possible d’utiliser le modèle de rendu personnalisé pour la personnalisation au niveau de la plate-forme familière aux développeurs Xamarin.Forms. Vous pouvez jeter un oeil à l’article  »
  Utilisation de moteurs de rendu personnalisés dans .NET MAUI.”
• Dans Xamarin Forms, chaque rendu a une référence à l’élément multiplateforme. Cela dépend généralement de INotifyPropertyChanged pour son fonctionnement. .NET MAUI utilise un nouveau modèle appelé gestionnaire.

Moteurs de rendu .NET MAUI

• Parmi les principaux avantages de l’utilisation des gestionnaires sont améliorés performance et extensibilité.
• La nouvelle architecture de gestionnaire dans .NET MAUI réduit le nombre de contrôles d’interface utilisateur requis pour rendre une vue et dissocie les contrôles de plate-forme du framework lui-même en supprimant les paramètres de vue.
• Dans .NET MAUI, les gestionnaires inversent la relation entre le framework et la plate-forme, de sorte que le contrôle de la plate-forme n’a besoin que de gérer les besoins du framework. Cela facilite grandement l’extension ou le remplacement en cas de besoin.

Migration vers une classe de gestionnaires

Pour cette migration, nous allons faire un exemple pour un EditText contrôle sous Android. Nous utiliserons un exemple tiré de la Wiki MAUI sur GitHub.

Nous allons apprendre à le faire étape par étape :

1. Créez une interface qui implémente Iview.

public interface ICustomEntry : IView
{
     public string Text { get; }
     public Color TextColor { get; }
}

2. Créez une sous-classe de la classe ViewHandler.

Cette classe restitue le contrôle de la plate-forme.

public partial class CustomEntryHandler : ViewHandler<ICustomEntry, EditText>
{

}

🗒 Le AfficherHandler La classe fournit des propriétés VirtualView qui sont utilisées pour accéder au contrôle multiplateforme à partir de son contrôleur et la propriété PlatformView qui gère l’accès à la vue native sur chaque plateforme qui implémente le contrôle multiplateforme.

3. Remplacez la méthode CreatePlatformView.

Cette méthode est contenue dans la sous-classe ViewHandler, qui doit créer et renvoyer la vue native qui implémente le contrôle multiplateforme. Cette méthode restitue le contrôle de la plate-forme.

public partial class CustomEntryHandler : ViewHandler<ICustomEntry, EditText>
{ 
    protected override EditText CreatePlatformView()
    { 
	    return new EditText(Context);
    }
}

4. Créez le dictionnaire PropertyMapper.

Ceci est responsable de la définition de l’action qui sera entreprise lorsque la propriété multiplateforme change.

public partial class CustomEntryHandler : ViewHandler<ICustomEntry, EditText>
{
    public static PropertyMapper<ICustomEntry, CustomEntryHandler> CustomEntryMapper = new PropertyMapper<ICustomEntry, CustomEntryHandler>(ViewHandler.ViewMapper)
    { 
	    [nameof(ICustomEntry.Text)] = MapText,
	    
	    [nameof(ICustomEntry.TextColor)] = MapTextColor,
	    
	    };
    
	    protected override EditText CreatePlatformView()
	    {
		    return new EditText(Context);
	    }
    
	    static void MapText(EntryHandler handler, ICustomEntry entry)
	    {
		    handler.PlatformView?.Text = entry.Text;
	    }
    
	    static void MapTextColor(EntryHandler handler, ICustomEntry entry)
	    {
		    handler.PlatformView?.TextColor = entry.TextColor;
	    }
}

5. Créez un contrôle personnalisé en sous-classant la classe View et en implémentant l’interface de contrôle :

public class CustomEntry : View, ICustomEntry
{
    public string Text { get; set; }
    public Color TextColor { get; set; }
}

6. Enregistrez les gestionnaires.

Ceci est accompli en utilisant la méthode AddHandler spécifiquement sur la classe MauiProgram.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
	    var builder = MauiApp.CreateBuilder();
	    builder.UseMauiApp<App>();
	    builder.ConfigureMauiHandlers(collection =>
	    {
	    //#if __ANDROID__
		    handlers.AddHandler(typeof(CustomEntry), typeof(CustomEntryHandler));
	    //#endif
	    });
	    return builder.Build();
    }
}

Et notre exemple est terminé !! 🎊

Abonnement à l’événement

La classe ViewHandler possède également les méthodes :

• ConnectHandler est l’endroit idéal pour initialiser et s’abonner à des événements.
• DisconnectHandler est idéal pour disposer d’objets et d’événements de désinscription, comme vous le verrez dans l’exemple ci-dessous :

public partial class CustomEntryHandler : ViewHandler<ICustomEntry, EditText>
{ 


 protected override void ConnectHandler(EditText platformView)
 {
  _defaultTextColors = platformView.TextColors;
  _defaultPlaceholderColors = platformView.HintTextColors;
  _watcher.Handler = this;
  platformView.AddTextChangedListener(_watcher);
  base.ConnectHandler(platformView);
 }

 protected override void DisconnectHandler(EditText platformView)
 {
  platformView.RemoveTextChangedListener(_watcher);
  _watcher.Handler = null;
  base.DisconnectHandler(platformView);
 }
}

Emballer

J’espère que les informations contenues dans l’article ont fonctionné pour vous et sont très utiles dans .NET MAUI !

À la prochaine! 🙋‍♀️

Références