Xamarin.Forms Renderer personalizzati della shell

  • Articolo

Uno dei vantaggi delle Xamarin.Forms applicazioni Shell è che l'aspetto e il comportamento sono altamente personalizzabili tramite le proprietà e i metodi esposti dalle varie classi shell. Tuttavia, è anche possibile creare un renderer personalizzato shell quando sono necessarie personalizzazioni più estese specifiche della piattaforma. Come nel caso di altri renderer personalizzati, è possibile aggiungere un renderer personalizzato della shell a un progetto per una sola piattaforma per personalizzarne l'aspetto e il comportamento mantenendo il comportamento predefinito nell'altra piattaforma oppure è possibile aggiungere un renderer personalizzato della shell diverso al progetto di ogni piattaforma, per personalizzare l'aspetto e il comportamento sia in iOS che in Android.

Il rendering delle applicazioni shell viene eseguito usando la classe ShellRenderer in iOS e Android. In iOS la classe ShellRenderer è disponibile nello spazio dei nomi Xamarin.Forms.Platform.iOS. In Android la classe ShellRenderer è disponibile nello spazio dei nomi Xamarin.Forms.Platform.Android.

Di seguito è illustrato il processo di creazione di un renderer personalizzato della shell:

  1. Creare sottoclassi della classe Shell. Questa operazione sarà già stata eseguita nell'applicazione shell.
  2. Utilizzare la classe Shell sottoclassata. Questa operazione sarà già stata eseguita nell'applicazione shell.
  3. Creare una classe renderer personalizzata che deriva dalla classe ShellRenderer, nelle piattaforme necessarie.

Creare una classe renderer personalizzata

Di seguito è illustrato il processo di creazione di una classe renderer personalizzata della shell:

  1. Creare una sottoclasse della classe ShellRenderer.
  2. Eseguire l'override dei metodi necessari per la personalizzazione richiesta.
  3. Aggiungere un oggetto ExportRendererAttribute alla sottoclasse ShellRenderer per specificare che verrà usata per eseguire il rendering dell'applicazione shell. Questo attributo viene usato per registrare il renderer personalizzato con Xamarin.Forms.

Nota

È facoltativo fornire un renderer personalizzato della shell nel progetto di ogni piattaforma. Se non viene registrato un renderer personalizzato, verrà usata la classe ShellRenderer predefinita.

La classe ShellRenderer espone i metodi sottoponibili a override seguenti:

iOS Android UWP
SetElementSize
CreateFlyoutRenderer
CreateNavBarAppearanceTracker
CreatePageRendererTracker
CreateShellFlyoutContentRenderer
CreateShellItemRenderer
CreateShellItemTransition
CreateShellSearchResultsRenderer
CreateShellSectionRenderer
CreateTabBarAppearanceTracker
Dispose
OnCurrentItemChanged
OnElementPropertyChanged
OnElementSet
UpdateBackgroundColor		 CreateFragmentForPage
CreateShellFlyoutContentRenderer
CreateShellFlyoutRenderer
CreateShellItemRenderer
CreateShellSectionRenderer
CreateTrackerForToolbar
CreateToolbarAppearanceTracker
CreateTabLayoutAppearanceTracker
CreateBottomNavViewAppearanceTracker
OnElementPropertyChanged
OnElementSet
SwitchFragment
Dispose		 CreateShellFlyoutTemplateSelector
CreateShellHeaderRenderer
CreateShellItemRenderer
CreateShellSectionRenderer
OnElementPropertyChanged
OnElementSet
UpdateFlyoutBackdropColor
UpdateFlyoutBackgroundColor

Le classi FlyoutItem e TabBar sono alias per la classe ShellItem e la classe Tab è un alias per la classe ShellSection. Pertanto, il metodo CreateShellItemRenderer deve essere sottoposto a override durante la creazione di un renderer personalizzato per gli oggetti FlyoutItem e il metodo CreateShellSectionRenderer deve essere sottoposto a override durante la creazione di un renderer personalizzato per gli oggetti Tab.

Importante

Sono disponibili classi del renderer shell aggiuntive, ad esempio ShellSectionRenderer e ShellItemRenderer, in iOS, Android e UWP. Tuttavia, queste classi renderer aggiuntive vengono create tramite override nella classe ShellRenderer. La personalizzazione del comportamento di queste classi renderer aggiuntive può quindi essere ottenuta tramite la creazione di loro sottoclassi e la creazione di un'istanza della sottoclasse nell'override appropriato nella classe ShellRenderer sottoclassata.

Esempio iOS

L'esempio di codice seguente illustra un oggetto ShellRenderer sottoclassato, per iOS, che imposta un'immagine di sfondo nella barra di spostamento dell'applicazione 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 esegue l'override del metodo CreateShellSectionRenderer e recupera il renderer creato dalla classe base. Modifica quindi il renderer impostando un'immagine di sfondo nella barra di spostamento, prima di restituire il renderer.

Esempio Android

L'esempio di codice seguente mostra un oggetto ShellRenderer sottoclassato, per Android, che imposta un'immagine di sfondo nella barra di spostamento dell'applicazione 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 esegue l'override del metodo CreateToolbarAppearanceTracker e restituisce un'istanza della classe MyShellToolbarAppearanceTracker. La classe MyShellToolbarAppearanceTracker, che deriva dalla classe ShellToolbarAppearanceTracker, è illustrata nell'esempio seguente:

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 esegue l'override del metodo SetAppearance e modifica la barra degli strumenti impostando su di essa un'immagine di sfondo.

Importante

È necessario solo aggiungere ExportRendererAttribute a un renderer personalizzato che deriva dalla classe ShellRenderer. Vengono create classi renderer della shell sottoclassate aggiuntive tramite la classe ShellRenderer sottoclassata.