Xamarin.Forms Convertisseurs personnalisés shell

L’un des avantages des Xamarin.Forms applications Shell est que leur apparence et leur comportement sont hautement personnalisables par le biais des propriétés et méthodes exposées par les différentes classes Shell. Toutefois, il est également possible de créer un renderer personnalisé Shell quand des personnalisations spécifiques à la plateforme sont requises. Comme avec d’autres renderers personnalisés, un renderer Shell personnalisé peut être ajouté à un projet de plateforme unique afin de personnaliser son apparence et son comportement, tout en autorisant le comportement par défaut sur l’autre plate-forme ; ou un renderer Shell différent peut être ajouté à chaque projet de plateforme pour personnaliser son apparence et son comportement à la fois sur iOS et Android.

Les applications Shell sont rendues à l’aide de la classe ShellRenderer sur iOS et Android. Sur iOS, la classe ShellRenderer figure dans l’espace de noms Xamarin.Forms.Platform.iOS. Sur Android, la classe ShellRenderer figure dans l’espace de noms Xamarin.Forms.Platform.Android.

Le processus de création d’un renderer personnalisé Shell est le suivant :

1. Créez une sous-classe de la classe Shell. Cette opération sera déjà effectuée dans votre application Shell.
2. Consommez la classe Shell définie comme une sous-classe. Cette opération sera déjà effectuée dans votre application Shell.
3. Créez une classe de renderer personnalisée dérivée de la classe ShellRenderer, sur les plateformes requises.

Créer une classe de renderer personnalisée

Le processus de création d’une classe de renderer personnalisée Shell est le suivant :

1. Créez une sous-classe de la classe ShellRenderer.
2. Remplacez les méthodes requises pour effectuer la personnalisation nécessaire.
3. Ajoutez un élément ExportRendererAttribute à la sous-classe ShellRenderer pour indiquer qu’elle est utilisée pour le rendu de l’application Shell. Cet attribut est utilisé pour inscrire le renderer personnalisé avec Xamarin.Forms.

La classe ShellRenderer expose les méthodes substituables suivantes :

Les classes FlyoutItem et TabBar sont des alias pour la classe ShellItem, et la classe Tab est un alias pour la classe ShellSection. La méthode CreateShellItemRenderer doit donc être substituée lors de la création d’un renderer personnalisé pour des objets FlyoutItem et la méthode CreateShellSectionRenderer doit être substituée lors de la création d’un renderer personnalisé pour des objets Tab.

Exemple iOS

L’exemple de code suivant montre une classe ShellRenderer sous-classée pour iOS, qui définit une image d’arrière-plan dans la barre de navigation de l’application Shell :

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(Xaminals.AppShell), typeof(Xaminals.iOS.MyShellRenderer))]
namespace Xaminals.iOS
{
    public class MyShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer != null)
            {
                (renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);
            }
            return renderer;
        }
    }
}

La classe MyShellRenderer remplace la méthode CreateShellSectionRenderer, puis récupère le renderer créé par la classe de base. Elle modifie ensuite le renderer en définissant une image d’arrière-plan dans la barre de navigation, avant de retourner le renderer.

Exemple Android

L’exemple de code suivant montre une classe ShellRenderer sous-classée pour Android, qui définit une image d’arrière-plan dans la barre de navigation de l’application Shell :

using Android.Content;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xaminals.AppShell), typeof(Xaminals.Droid.MyShellRenderer))]
namespace Xaminals.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new MyShellToolbarAppearanceTracker(this);
        }
    }
}

La classe MyShellRenderer remplace la méthode CreateToolbarAppearanceTracker, puis retourne une instance de la classe MyShellToolbarAppearanceTracker. La classe MyShellToolbarAppearanceTracker qui dérive de la classe ShellToolbarAppearanceTracker, est illustrée dans l’exemple suivant :

using AndroidX.AppCompat.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace Xaminals.Droid
{
    public class MyShellToolbarAppearanceTracker : ShellToolbarAppearanceTracker
    {
        public MyShellToolbarAppearanceTracker(IShellContext context) : base(context)
        {
        }

        public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
            base.SetAppearance(toolbar, toolbarTracker, appearance);
            toolbar.SetBackgroundResource(Resource.Drawable.monkey);
        }
    }
}

La classe MyShellToolbarAppearanceTracker remplace la méthode SetAppearance, puis modifie la barre d’outils en définissant une image d’arrière-plan sur celle-ci.

Liens connexes

• Xamarin.Forms Renderers personnalisés