Riutilizzare i renderer personalizzati in .NET MAUI

Articolo
05/14/2024

Sfogliare l'esempio. Esplorare l'esempio

Anche se esistono molti vantaggi nell'uso dei gestori dell'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) per personalizzare e creare controlli, è comunque possibile usare renderer personalizzati Xamarin.Forms nelle app MAUI .NET. Per altre informazioni sui renderer personalizzati, vedere Renderer personalizzati di Xamarin.Forms.

Renderer sottoposti a shim

.NET MAUI fornisce renderer sottoposti a shim che consentono di riutilizzare facilmente i renderer personalizzati di Xamarin.Forms, purché il renderer derivi da FrameRenderer, ListViewRenderer, ShellRenderer in iOS e Android, TableViewRenderere VisualElementRenderer.

Il processo per la migrazione di un renderer personalizzato Xamarin.Forms che deriva da FrameRenderer, ListViewRendererShellRenderer, TableViewRenderer, e VisualElementRenderer a un renderer sottoposto a shim MAUI .NET consiste nel:

Aggiungere il codice del renderer personalizzato nel percorso appropriato nei progetti MAUI .NET. Per altre informazioni, vedere Aggiungere il codice.
Modificare le using direttive e rimuovere ExportRenderer gli attributi. Per altre informazioni, vedere Modificare direttive using e altro codice.
Registrare i renderer. Per altre informazioni, vedere Registrare i renderer.
Utilizzare i renderer. Per altre informazioni, vedere Utilizzare i renderer personalizzati.

Per illustrare l'uso di renderer personalizzati in .NET MAUI, prendere in considerazione un controllo Xamarin.Forms denominato PressableView. Questo controllo espone Pressed ed Released eventi basati su movimenti specifici della piattaforma. L'implementazione del renderer personalizzato è costituita da 3 file:

PressableView.cs : classe multipiattaforma che estende ContentView.
PressableViewRenderer.cs : implementazione di Android, che deriva da VisualElementRenderer.
PressableViewRenderer.cs : implementazione di iOS, che deriva da VisualElementRenderer.

Nota

Un'alternativa all'uso di un renderer personalizzato Xamarin.Forms in .NET MAUI consiste nel eseguire la migrazione del renderer personalizzato a un gestore MAUI .NET. Per altre informazioni, vedere Eseguire la migrazione di un renderer personalizzato Xamarin.Forms a un gestore MAUI .NET.

Aggiunta del codice

Se si usa un progetto con più destinazioni MAUI .NET, il file multipiattaforma può essere spostato in qualsiasi punto all'esterno della cartella Piattaforme e i file di implementazione specifici della piattaforma devono essere spostati nella cartella Platform corrispondente:

Spostare i file del renderer.

Se la soluzione include progetti separati per ogni piattaforma, è necessario spostare i file di implementazione specifici della piattaforma nei progetti corrispondenti.

Modificare le direttive using e altro codice

È necessario rimuovere qualsiasi riferimento agli Xamarin.Forms.* spazi dei nomi e quindi risolvere i tipi correlati in Microsoft.Maui.*. Questo deve verificarsi in tutti i file aggiunti ai progetti MAUI .NET.

È anche consigliabile rimuovere tutti ExportRenderer gli attributi perché non saranno necessari in .NET MAUI. Ad esempio, è necessario rimuovere quanto segue:

[assembly: ExportRenderer(typeof(PressableView), typeof(PressableViewRenderer))]

Registrare i renderer

Il controllo multipiattaforma e i relativi renderer devono essere registrati con un'app prima che possa essere utilizzato. Questo dovrebbe verificarsi nel CreateMauiApp metodo nella MauiProgram classe nel progetto di app, che è il punto di ingresso multipiattaforma per l'app:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers((handlers) =>
            {
#if ANDROID
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.Droid.Renderers.PressableViewRenderer));
#elif IOS
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.iOS.Renderers.PressableViewRenderer));
#endif
            });

        return builder.Build();
    }
}

I renderer vengono registrati con il ConfigureMauiHandlers metodo e AddHandler . Questo primo argomento del AddHandler metodo è il tipo di controllo multipiattaforma, con il secondo argomento come tipo di renderer.

Importante

Solo i renderer che derivano da , , in iOSShellRenderer, in iOS e Android, TabbedRenderer in iOS, TableViewRenderere VisualElementRenderer possono essere registrati con il AddHandler metodo . NavigationRenderer ListViewRendererFrameRenderer

Utilizzare i renderer personalizzati

Il renderer personalizzato può essere usato in un'app MAUI .NET come controllo personalizzato:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:XamarinCustomRenderer.Controls"
             x:Class="MauiCustomRenderer.MainPage">
    <Grid BackgroundColor="#f1f1f1">
        <controls:PressableView Pressed="Handle_Pressed"
                                Released="Handle_Released"
                                HorizontalOptions="Center"
                                VerticalOptions="Center">
            <Grid BackgroundColor="#202020"
                  HorizontalOptions="Center"
                  VerticalOptions="Center">
                <Label Text="Press Me"
                       FontSize="16"
                       TextColor="White"
                       Margin="24,20"
                       HorizontalTextAlignment="Center" />
            </Grid>
        </controls:PressableView>
    </Grid>
</ContentPage>

Condividi tramite