Übung: Erstellen eines benutzerdefinierten Elements

10 Minuten

In dieser Übung definieren Sie ein benutzerdefiniertes Element und plattformspezifische Renderer, um eine Zeichenoberfläche zu erstellen.

Der bereitgestellte Assets-Ordner enthält ein benutzerdefiniertes Steuerelement für jede Plattform. Dieses Steuerelement stellt eine Zeichenoberfläche dar, reagiert auf Zeigerereignisse und zeichnet Linien. Ihre Aufgabe besteht darin, das benutzerdefinierte Steuerelement auf jeder Plattform in einem Renderer zu nutzen.

Öffnen der Projektmappe

Diese Übung ist eine Fortsetzung der vorherigen Übung. Sie können Ihre vorhandene Projektmappe verwenden oder mit der Projektmappe aus dem Ordner exercise1final in Ihrer geklonten oder heruntergeladenen Kopie des Übungsrepositorys beginnen.

Erstellen eines benutzerdefinierten Elements

Erstellen Sie im freigegebenen Projekt XFDraw eine neue Klasse namens , die von View abgeleitet ist.
Erstellen Sie eine BindableProperty mit dem Namen InkColorProperty. Legen Sie für propertyNameInkColor, für den Rückgabetyp Color und für den deklarierenden Typ das neue Element fest: SketchView.
Erstellen Sie eine Color-Eigenschaft mit dem Namen InkColor für die bindbare Eigenschaft. Rufen Sie die Methoden GetValue und SetValue mit Übergabe von InkColorProperty im Getter/Setter auf.

class SketchView : View
{
    public static readonly BindableProperty InkColorProperty = BindableProperty.Create("InkColor", typeof(Color), typeof(SketchView), Color.Blue);

    public Color InkColor
    {
        get { return (Color)GetValue(InkColorProperty); }
        set { SetValue(InkColorProperty, value); }
    }
}

Verwenden des benutzerdefinierten Elements

In diesem Abschnitt fügen Sie das benutzerdefinierte Element zu Ihrer Seite für visuelle Inhalte hinzu. Weil Sie jedoch noch keinen plattformspezifischen Renderingcode hinzugefügt haben, wird die Ansicht leer sein.

Öffnen Sie MainPage.xaml im freigegebenen Projekt.
Fügen Sie eine SketchView zum mainLayout-Raster hinzu. Sie können die xmlns verwenden, die Sie für die Hyperlinkbezeichnung definiert haben.
Geben Sie der SketchView den Namen sketchView, damit Sie sie in der CodeBehind-Datei erreichen können.
Legen Sie HorizontalOptions und VerticalOptions auf FillAndExpand fest.
Legen Sie die InkColor-Eigenschaft auf eine Standardfarbe fest. Für diesen Code wird grün verwendet:

<local:SketchView x:Name="sketchView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" InkColor="Green" />

Hinzufügen von benutzerdefinierten Steuerelementen für jede Plattform

Um ein konfigurierbares Zeichnungssteuerelement für jede Plattform zu erstellen, müssen Sie Kenntnisse über jede Plattform besitzen.

Zur Vereinfachung haben wir den Berührung und Gesten unterstützenden Zeichencode für iOS und Android einbezogen. Sie müssen die bereitgestellten Klassen jedem „head“-Projekt hinzufügen.

Fügen Sie die entsprechende PaintView-Klasse jedem plattformspezifischen Projekt hinzu.
Wenn Sie sich dafür interessieren, schauen Sie sich den Code für jede Plattform an. Beachten Sie, dass die PaintView-Klasse einige Gemeinsamkeiten aller Plattformen nutzt:
- Der Klassenname ist PaintView.
- Es gibt eine öffentliche Methode mit dem Namen SetInkColor.
- Es gibt eine öffentliche Methode mit dem Namen Clear.
- Es gibt ein Ereignis mit dem Namen LineDrawn.
Sie werden diese Klassen bei der Erstellung des Renderers für jede Plattform verwenden.

Erstellen der Plattformrenderer

Anschließend erstellen Sie die Renderer zum Anzeigen des benutzerdefinierten PaintView-Steuerelements auf jeder Plattform. Da wir das PaintView-Steuerelement entwickelt haben, um die gleichen öffentlichen Methoden auf jeder Plattform verfügbar zu machen, sind die Schritte zum Erstellen bei jedem Renderer ähnlich. Denken Sie daran, dass dies nicht für alle Renderer gilt.

Wiederholen Sie die folgenden Schritte in jedem plattformspezifischen Projekt. Sie müssen die plattformspezifischen using-Anweisungen beim Erstellen des Renderers hinzufügen.

Erstellen Sie eine neue Klasse namens SketchViewRenderer.
Aktualisieren Sie die Signatur so, dass sie von ViewRenderer abgeleitet wird. Das erste Typargument ist das Element: Verwenden Sie SketchView. Das zweite Typelement ist das native Steuerelement: Verwenden Sie PaintView.
Fügen Sie das ExportRenderer-Assemblyattribut über der Namespacedeklaration hinzu, um SketchViewRenderer mit SketchView zu verbinden.
Nur Android: Erstellen Sie einen Konstruktor, der einen Android- akzeptiert und an den Basiskonstruktor übergibt.

using XFDraw;
using Xamarin.Forms;
using Xamarin.Forms.Platform.[platform];
using XFDraw.[platform];

[assembly: ExportRenderer(typeof(SketchView), typeof(SketchViewRenderer))]
namespace XFDraw.[platform]
{
    class SketchViewRenderer : ViewRenderer<SketchView, PaintView>
    {

    }
}

Erstellen und Festlegen des nativen Steuerelements

Überschreiben Sie in jedem Renderer OnElementChanged.
Erstellen und instanziieren Sie eine lokale PaintView-Instanz mit dem Namen paintView. Für Android müssen Sie den Kontext übergeben: Android.App.Application.Context. Für andere Plattformen nimmt der Konstruktor keine Parameter entgegen.
Legen Sie die Farbe mithilfe der SetInkColor-Methode auf paintView fest. Sie erreichen die bindbare InkColor-Eigenschaft über Element. Android und iOS verfügen über die folgenden Erweiterungsmethoden zum Konvertieren der Xamarin.Forms-Farbe in eine native Farbe: ToUIColor und ToAndroid.
Weisen Sie paintView als natives control mithilfe der SetNativeControl-Methode zu. Für Android müssen Sie den Context übergeben, den Sie im Konstruktor des Renderers empfangen.
Der in diesem Abschnitt beschriebene Code sollte nur einmal ausgeführt werden. Umschließen Sie den Code mit einer if-Anweisung, die if ausgeführt wird, wenn Control den Wert null hat.

Führen Sie die App aus. Sie sollten jetzt durch Ziehen Ihres Fingers zeichnen können.

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

    if (Control == null)
    {
        var paintView = new PaintView();
        paintView.SetInkColor(this.Element.InkColor.ToUIColor()); // Or ToAndroid()
        SetNativeControl(paintView);
    }
}

Reagieren auf Änderungen der Farbeigenschaft

Anschließend muss das native Steuerelement aktualisiert werden, wenn Eigenschaften des Xamarin.Forms-Elements geändert werden.

Überschreiben Sie OnElementPropertyChanged.
Das übergebene PropertyChangedEventArgs verfügt über eine PropertyName-Eigenschaft, die genau das enthält, was Sie erwarten: den Namen der Eigenschaft im Element. Vergleichen Sie ihn mit den Namen Ihrer InkProperty. Um dies auf typsichere Weise zu tun, überprüfen Sie den statischen SketchView.InkColorProperty.PropertyName.
Wenn der Eigenschaftenname richtig ist, aktualisieren Sie die Freihandfarbeigenschaft im nativen Steuerelement mit der InkColor-Eigenschaft des Elements.

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    base.OnElementPropertyChanged(sender, e);

    if (e.PropertyName == SketchView.InkColorProperty.PropertyName)
    {
        Control.SetInkColor(this.Element.InkColor.ToUIColor()); // Or ToAndroid()
    }
}

Ändern der Farbe

In diesem Abschnitt bewirken Sie eine Änderung der Freihandfarbe über Ihre Benutzeroberfläche.

Öffnen Sie MainPage.xaml.cs im freigegebenen Projekt.
Legen Sie fest, dass bei jedem Tippen der Stiftschaltfläche eine neue zufällige Farbe verwendet wird. Die OnColorClicked-Methode wird bereits beim Tippen auf die Schaltfläche aufgerufen, aber der Methodentext ist leer. Weisen Sie mithilfe der bereitgestellten GetRandomColor-Methode der InkColor-Eigenschaft von sketchView eine neue Farbe zu.
```
void OnColorClicked ()
{
    sketchView.InkColor = GetRandomColor();
}
```
Führen Sie die App aus. Tippen Sie auf die Stiftschaltfläche, um die Freihandfarbe zu ändern.

Weiter