Teilen über

Erstellen eines Xamarin.Forms visuellen Renderers

  • Artikel

Xamarin.Forms Visual ermöglicht das Erstellen und selektive Anwenden von Renderern auf VisualElement Objekte, ohne dass Sie Unterklassenansichten Xamarin.Forms verwenden müssen. Ein Renderer, der einen IVisual Typ als Teil des ExportRendererAttributeElements angibt, wird verwendet, um angemeldete Ansichten anstelle des Standardrenderers zu rendern. Zur Rendererauswahl wird die Visual Eigenschaft der Ansicht überprüft und in den Rendererauswahlprozess einbezogen.

Wichtig

Visual Die Eigenschaft kann derzeit nicht geändert werden, nachdem die Ansicht gerendert wurde, dies ändert sich jedoch in einer zukünftigen Version.

Der Prozess zum Erstellen und Verwenden eines Xamarin.Forms visuellen Renderers lautet:

  1. Erstellen Sie Plattformrenderer für die erforderliche Ansicht. Weitere Informationen finden Sie unter Erstellen von Renderern.
  2. Erstellen Sie einen Typ, der von IVisual. Weitere Informationen finden Sie unter Erstellen eines IVisual-Typs.
  3. Registrieren Sie den IVisual Typ als Teil der ExportRendererAttribute Renderer. Weitere Informationen finden Sie unter Registrieren des IVisual-Typs.
  4. Verwenden Sie den visuellen Renderer, indem Sie die Visual Eigenschaft für die Ansicht auf den IVisual Namen festlegen. Weitere Informationen finden Sie unter Verwenden des visuellen Renderers.
  5. [optional] Registrieren Sie einen Namen für den IVisual Typ. Weitere Informationen finden Sie unter Registrieren eines Namens für den IVisual-Typ.

Erstellen von Plattformrenderern

Informationen zum Erstellen einer Rendererklasse finden Sie unter "Benutzerdefinierte Renderer". Beachten Sie jedoch, dass ein Xamarin.Forms visueller Renderer auf eine Ansicht angewendet wird, ohne die Ansicht unterklassen zu müssen.

Die hier beschriebenen Rendererklassen implementieren eine benutzerdefinierte Klasse Button , die ihren Text mit einem Schatten anzeigt.

iOS

Das folgende Codebeispiel zeigt den Schaltflächenrenderer für iOS:

public class CustomButtonRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            // Cleanup
        }

        if (e.NewElement != null)
        {
            Control.TitleShadowOffset = new CoreGraphics.CGSize(1, 1);
            Control.SetTitleShadowColor(Color.Black.ToUIColor(), UIKit.UIControlState.Normal);
        }
    }
}

Android

Das folgende Codebeispiel zeigt den Schaltflächenrenderer für Android:

public class CustomButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
    public CustomButtonRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            // Cleanup
        }

        if (e.NewElement != null)
        {
            Control.SetShadowLayer(5, 3, 3, Color.Black.ToAndroid());
        }
    }
}

Erstellen eines IVisual-Typs

Erstellen Sie in Ihrer plattformübergreifenden Bibliothek einen Typ, der von IVisual:

public class CustomVisual : IVisual
{
}

Der CustomVisual Typ kann dann für die Rendererklassen registriert werden, wodurch Button Objekte sich für die Verwendung der Renderer entscheiden können.

Registrieren des IVisual-Typs

Fügen Sie in den Plattformprojekten die ExportRendererAttribute Assemblyebene hinzu:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer), new[] { typeof(CustomVisual) })]
namespace VisualDemos.iOS
{
    public class CustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            // ...
        }
    }
}

In diesem Beispiel für das iOS-Plattformprojekt gibt die ExportRendererAttribute Klasse an, dass die CustomButtonRenderer Klasse verwendet wird, um verbrauchende Button Objekte zu rendern, wobei der IVisual Typ als drittes Argument registriert ist. Ein Renderer, der einen IVisual Typ als Teil des ExportRendererAttributeElements angibt, wird verwendet, um angemeldete Ansichten anstelle des Standardrenderers zu rendern.

Verwenden des visuellen Renderers

Ein Button Objekt kann sich für die Verwendung der Rendererklassen entscheiden, indem die Visual Eigenschaft auf Custom:

<Button Visual="Custom"
        Text="CUSTOM BUTTON"
        BackgroundColor="{StaticResource PrimaryColor}"
        TextColor="{StaticResource SecondaryTextColor}"
        HorizontalOptions="FillAndExpand" />

Hinweis

In XAML entfernt ein Typkonverter die Notwendigkeit, das Suffix "Visual" in den Visual Eigenschaftswert aufzunehmen. Der vollständige Typname kann jedoch auch angegeben werden.

Der entsprechende C#-Code lautet:

Button button = new Button { Text = "CUSTOM BUTTON", ... };
button.Visual = new CustomVisual();

Zur Rendererauswahlzeit wird die Visual Eigenschaft der Button Prüfung und in den Rendererauswahlprozess einbezogen. Wenn sich ein Renderer nicht befindet, wird der Xamarin.Forms Standardrenderer verwendet.

Die folgenden Screenshots zeigen das gerenderte ButtonObjekt, das seinen Text mit einem Schatten anzeigt:

Screenshot der benutzerdefinierten Schaltfläche mit Schattentext unter iOS und Android

Registrieren eines Namens für den IVisual-Typ

Dies VisualAttribute kann verwendet werden, um optional einen anderen Namen für den IVisual Typ zu registrieren. Dieser Ansatz kann verwendet werden, um Namenskonflikte zwischen verschiedenen visuellen Bibliotheken aufzulösen, oder in Situationen, in denen Sie nur mit einem anderen Namen als dem Typnamen auf ein Visuelles Element verweisen möchten.

Dies VisualAttribute sollte auf Assemblyebene entweder in der plattformübergreifenden Bibliothek oder im Plattformprojekt definiert werden:

[assembly: Visual("MyVisual", typeof(CustomVisual))]

Der IVisual Typ kann dann über seinen registrierten Namen genutzt werden:

<Button Visual="MyVisual"
        ... />

Hinweis

Wenn Sie ein Visuelles Element über seinen registrierten Namen verwenden, muss jedes "Visuelle" Suffix eingeschlossen werden.