Anpassen eines Eintrags

Das Beispiel herunterladen

Mit dem Entry-Steuerelement von Xamarin.Forms kann eine einzelne Textzeile bearbeitet werden. In diesem Artikel wird veranschaulicht, wie Sie einen benutzerdefinierten Renderer für das Entry-Steuerelement erstellen, sodass Entwickler das native Standardrendering mit ihrem eigenen plattformspezifischen Rendering überschreiben können.

Jedes Xamarin.Forms-Steuerelement verfügt über einen entsprechenden Renderer für jede Plattform, die eine Instanz eines nativen Steuerelements erstellt. Beim Rendern eines Entry-Steuerelements durch eine Xamarin.Forms-App wird in iOS die EntryRenderer-Klasse instanziiert, wodurch wiederum ein natives UITextField-Steuerelement instanziiert wird. Auf der Android-Plattform instanziiert die EntryRenderer-Klasse ein EditText-Steuerelement. Auf der Universellen Windows-Plattform (UWP) instanziiert die EntryRenderer-Klasse ein TextBox-Steuerelement. Weitere Informationen zu den Renderern und Klassen nativer Steuerelemente, auf die Xamarin.Forms-Steuerelemente verweisen, finden Sie unter Rendererbasisklassen und native Steuerelemente.

Das folgende Diagramm veranschaulicht die Beziehungen zwischen dem Entry-Steuerelement und den entsprechenden nativen Steuerelementen, die dieses implementieren:

Der Renderingprozess kann genutzt werden, um plattformspezifische Anpassungen zu implementieren, indem für das Entry-Steuerelement auf jeder Plattform ein benutzerdefinierter Renderer erstellt wird. Gehen Sie hierfür folgendermaßen vor:

1. Erstellen Sie ein benutzerdefiniertes Xamarin.Forms-Steuerelement.
2. Nutzen Sie das benutzerdefinierte Steuerelement über Xamarin.Forms.
3. Erstellen Sie den benutzerdefinierten Renderer für das Steuerelement auf jeder Plattform.

Im Folgenden wird auf jeden dieser Punkte ausführlicher eingegangen, um zu veranschaulichen, wie Sie ein Entry-Steuerelement implementieren können, das auf jeder Plattform eine andere Hintergrundfarbe aufweist.

Wichtig

In diesem Artikel wird erläutert, wie Sie einen einfachen benutzerdefinierten Renderer erstellen. Es ist jedoch nicht erforderlich, einen benutzerdefinierten Renderer zu erstellen, um ein Entry-Steuerelement zu implementieren, das auf jeder Plattform eine andere Hintergrundfarbe aufweist. Dies erreichen Sie einfacher, indem Sie mithilfe der Device-Klasse oder der OnPlatform-Markuperweiterung plattformspezifische Werte angeben. Weitere Informationen finden Sie unter Providing Platform-Specific Values (Angeben plattformspezifischer Werte) und OnPlatform Markup Extension (OnPlatform-Markuperweiterung).

Erstellen des benutzerdefinierten Entry-Steuerelements

Ein benutzerdefiniertes Entry-Steuerelement kann erstellt werden, indem Sie das Entry-Steuerelement wie in folgendem Codebeispiel als Unterklasse verwenden:

public class MyEntry : Entry
{
}

Das MyEntry-Steuerelement wird im .NET-Standard-Bibliotheksprojekt erstellt. Es handelt sich dabei einfach um ein Entry-Steuerelement. Die Anpassung des Steuerelements erfolgt im benutzerdefinierten Renderer, sodass keine zusätzliche Implementierung im MyEntry-Steuerelement erforderlich ist.

Nutzen des benutzerdefinierten Steuerelements

Sie können auf das Steuerelement MyEntry in XAML im .NET Standard-Bibliotheksprojekt verweisen, indem Sie einen Namespace für seine Position deklarieren und das Namespacepräfix für das Steuerelement verwenden. Das folgende Codebeispiel veranschaulicht, wie das Steuerelement MyEntry von der XAML-Seite genutzt werden kann:

<ContentPage ...
    xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
    ...>
    ...
    <local:MyEntry Text="In Shared Code" />
    ...
</ContentPage>

Das local-Namespacepräfix kann beliebig benannt werden. Die Werte clr-namespace und assembly müssen jedoch mit den Angaben des benutzerdefinierten Steuerelements übereinstimmen. Wenn der Namespace deklariert wurde, wird das Präfix verwendet, um auf das benutzerdefinierte Steuerelement zu verweisen.

Das folgende Codebeispiel veranschaulicht, wie das benutzerdefinierte Steuerelement MyEntry von einer C#-Seite genutzt werden kann:

public class MainPage : ContentPage
{
  public MainPage ()
  {
    Content = new StackLayout {
      Children = {
        new Label {
          Text = "Hello, Custom Renderer !",
        },
        new MyEntry {
          Text = "In Shared Code",
        }
      },
      VerticalOptions = LayoutOptions.CenterAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };
  }
}

Dieser Code instanziiert ein neues ContentPage-Objekt, das ein Label- und MyEntry-Steuerelement anzeigt, die auf der Seite vertikal und horizontal zentriert sind.

Ein benutzerdefinierter Renderer kann nun zu jedem Anwendungsprojekt hinzugefügt werden, um die Darstellung des Steuerelements auf jeder Plattform anzupassen.

Erstellen des benutzerdefinierten Renderers auf jeder Plattform

Gehen Sie folgendermaßen vor, um eine Klasse für einen benutzerdefinierten Renderer zu erstellen:

1. Erstellen Sie eine Unterklasse der EntryRenderer-Klasse, die das native Steuerelement rendert.
2. Überschreiben Sie die OnElementChanged-Methode, die die native Seite rendert, und schreiben Sie Logik, um das Steuerelement anzupassen. Diese Methode wird aufgerufen, wenn das entsprechende Xamarin.Forms-Steuerelement erstellt wird.
3. Fügen Sie der benutzerdefinierten Rendererklasse ein ExportRenderer-Attribut hinzu, um anzugeben, dass sie zum Rendern des Xamarin.Forms-Steuerelements verwendet werden soll. Dieses Attribut wird verwendet, um den benutzerdefinierten Renderer bei Xamarin.Forms zu registrieren.

Hinweis

Optional kann ein benutzerdefinierter Renderer in jedem Plattformprojekt bereitgestellt werden. Wenn kein benutzerdefinierter Renderer registriert wurde, wird der Standardrenderer für die Basisklasse des Steuerelements verwendet.

Das folgende Diagramm veranschaulicht die Zuständigkeiten jedes Projekts in der Beispielanwendung sowie deren Beziehungen zueinander:

Das Steuerelement MyEntry wird von plattformspezifischen MyEntryRenderer-Klassen gerendert, die alle von der EntryRenderer-Klasse für jede Plattform abgeleitet werden. Dies führt dazu, dass jedes MyEntry-Steuerelement mit einer plattformspezifischen Hintergrundfarbe gerendert wird. Dies wird in folgenden Screenshots veranschaulicht:

Die Klasse EntryRenderer macht die Methode OnElementChanged verfügbar, die bei der Erstellung des Xamarin.Forms-Steuerelements aufgerufen wird, um das entsprechende native Steuerelement zu rendern. Diese Methode akzeptiert einen ElementChangedEventArgs-Parameter, der die Eigenschaften OldElement und NewElement enthält. Diese Eigenschaften stellen jeweils das Xamarin.Forms-Element, an das der Renderer angefügt war, und das Xamarin.Forms-Element dar, an das der Renderer angefügt ist. In der Beispielanwendung ist die OldElement-Eigenschaft null, und die NewElement-Eigenschaft enthält einen Verweis auf das MyEntry-Steuerelement.

Das native Steuerelement sollte in der überschriebenen Version der OnElementChanged-Methode in der MyEntryRenderer-Klasse angepasst werden. Über die Control-Eigenschaft können Sie auf einen typisierten Verweis auf das native Steuerelement zugreifen, das auf der Plattform verwendet wird. Darüber hinaus kann über die Eigenschaft Element ein Verweis auf das Xamarin.Forms-Steuerelement abgerufen werden, das gerendert wird, obwohl diese in der Beispielanwendung nicht verwendet wird.

Jede benutzerdefinierte Rendererklasse ist mit einem ExportRenderer-Attribut versehen, das den Renderer bei Xamarin.Forms registriert. Das Attribut benötigt zwei Parameter: den Typnamen des zu rendernden Xamarin.Forms-Steuerelements und den Typnamen des benutzerdefinierten Renderers. Das Präfix assembly für das Attribut gibt an, dass das Attribut für die gesamte Assembly gilt.

In den folgenden Abschnitten wird die Implementierung jeder plattformspezifischen, benutzerdefinierten MyEntryRenderer-Rendererklasse erläutert.

Erstellen des benutzerdefinierten Renderers unter iOS

Im folgenden Codebeispiel wird der benutzerdefinierte Renderer für die iOS-Plattform veranschaulicht:

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged (e);

            if (Control != null) {
                // do whatever you want to the UITextField here!
                Control.BackgroundColor = UIColor.FromRGB (204, 153, 255);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}

Der Aufruf der OnElementChanged-Methode der Basisklasse instanziiert ein iOS-UITextField-Steuerelement, wobei der Control-Eigenschaft des Renderers ein Verweis auf das Steuerelement zugewiesen wird. Die Hintergrundfarbe wird dann mithilfe der UIColor.FromRGB-Methode auf „hellviolett“ festgelegt.

Erstellen des benutzerdefinierten Renderers unter Android

Im folgenden Codebeispiel wird der benutzerdefinierte Renderer für die Android-Plattform veranschaulicht:

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.Android
{
    class MyEntryRenderer : EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

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

            if (Control != null)
            {
                Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
            }
        }
    }
}

Der Aufruf der OnElementChanged-Methode der Basisklasse instanziiert ein Android-EditText-Steuerelement, wobei der Control-Eigenschaft des Renderers ein Verweis auf das Steuerelement zugewiesen wird. Die Hintergrundfarbe wird dann mithilfe der Control.SetBackgroundColor-Methode auf „hellgrün“ festgelegt.

Erstellen des benutzerdefinierten Renderers auf der UWP

Im folgenden Codebeispiel wird der benutzerdefinierte Renderer für die UWP veranschaulicht:

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.UWP
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Cyan);
            }
        }
    }
}

Der Aufruf der OnElementChanged-Methode der Basisklasse instanziiert ein TextBox-Steuerelement, wobei der Control-Eigenschaft des Renderers ein Verweis auf das Steuerelement zugewiesen wird. Die Hintergrundfarbe wird dann durch Erstellen einer SolidColorBrush-Instanz auf „zyanblau“ festgelegt.

Zusammenfassung

In diesem Artikel wurde gezeigt, wie Sie einen benutzerdefinierten Steuerelementrenderer für das Xamarin.FormsEntry Steuerelement erstellen, sodass Entwickler das native Standardrendering mit ihrem eigenen plattformspezifischen Rendering überschreiben können. Benutzerdefinierte Renderer sind eine praktische Methode zum Anpassen der Darstellung von Xamarin.Forms-Steuerelementen. Sie können für geringfügige Formatierungsänderungen oder für umfangreiche, plattformspezifische Anpassungen des Layouts und Verhaltens verwendet werden.

Verwandte Links

• CustomRendererEntry (Beispiel)