Zusammenfassung von Kapitel 15. Die interaktive Benutzeroberfläche

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Hinweis

Dieses Buch wurde im Frühjahr 2016 veröffentlicht und seitdem nicht aktualisiert. Wenngleich ein großer Teil des Buchs weiterhin relevante Informationen liefert, sind einige Abschnitte veraltet, und einige Themen sind nicht mehr korrekt oder vollständig.

In diesem Kapitel werden acht View-Ableitungen besprochen, die eine Interaktion mit dem Benutzer ermöglichen.

„View“ (Ansicht) – Übersicht

Xamarin.Forms enthält 20 instanziierbare Klassen, die von View abgeleitet werden, aber nicht von Layout. Sechs davon wurden in den vorherigen Kapiteln behandelt:

Die acht Ansichten in diesem Kapitel gestatten dem Benutzer effektiv die Interaktion mit grundlegenden .NET-Datentypen:

Datentyp Ansichten
Double Slider, Stepper
Boolean Switch
String Entry, Editor, SearchBar
DateTime DatePicker, TimePicker

Sie können sich diese Ansichten als visuell interaktive Darstellungen der zugrunde liegenden Datentypen vorstellen. Dieses Konzept wird im nächsten Kapitel, Kapitel 16, „Datenbindung“, näher untersucht.

Die verbleibenden sechs Ansichten werden in den folgenden Kapiteln behandelt:

„Slider“ (Schieberegler) und „Stepper“ (Schritte)

Sowohl Slider als auch Stepper gestatten Benutzern die Auswahl eines numerischen Werts aus einem Bereich. Slider ist ein fortlaufender Bereich, während Stepper diskrete Werte umfasst.

„Slider“-Grundlagen

Slider ist eine horizontale Leiste, die einen Wertebereich von einem Mindestwert (links) bis zu einem Höchstwert (rechts) darstellt. Er definiert drei öffentliche Eigenschaften:

  • Value vom Typ double, der Standardwert ist 0.
  • Minimum vom Typ double, der Standardwert ist 0.
  • Maximum vom Typ double, der Standardwert ist 1.

Die bindbaren Eigenschaften, die diese Eigenschaften unterstützen, stellen sicher dass sie konsistent sind:

  • Für alle drei Eigenschaften stellt die für die bindbare Eigenschaft angegebene coerceValue-Methode sicher, dass Value zwischen Minimum und Maximum liegt.
  • Die validateValue-Methode mit MinimumProperty gibt false zurück, wenn Minimum auf einen Wert größer als oder gleich Maximum festgelegt wird, und ähnliches gilt für MaximumProperty. Die Rückgabe von false von der validateValue-Methode führt dazu, dass eine ArgumentException ausgelöst wird.

Slider löst das ValueChanged-Ereignis mit einem ValueChangedEventArgs-Argument aus, wenn sich die Value-Eigenschaft programmgesteuert oder durch Manipulation von Slider durch den Benutzer ändert.

Im SliderDemo-Beispiel wird die einfache Verwendung von Slider veranschaulicht.

Häufige Probleme

Sowohl in Code als auch in XAML werden die Eigenschaften Minimum und Maximum in der von Ihnen angegebenen Reihenfolge festgelegt. Stellen Sie sicher, dass Sie diese Eigenschaften initialisieren, sodass Maximum immer größer als Minimum ist. Andernfalls wird eine Ausnahme ausgelöst.

Wenn Sie die Slider-Eigenschaften initialisieren, kann dies dazu führen, dass sich die Value-Eigenschaft ändert und dass das ValueChanged-Ereignis ausgelöst wird. Sie sollten sicherstellen, dass der Slider-Ereignishandler nicht auf Ansichten zugreift, die während der Seiteninitialisierung noch nicht erstellt wurden.

Das ValueChanged-Ereignis wird während der Slider-Initialisierung nur dann ausgelöst, wenn sich die Value-Eigenschaft ändert. Sie können den ValueChanged-Handler direkt im Code aufrufen.

Farbauswahl für „Slider“

Das RgbSliders-Programm enthält drei Slider-Elemente, mit denen Sie interaktiv eine Farbe auswählen können, indem Sie ihre RGB-Werte angeben:

Triple Screenshot von R G B-Schiebereglern

Im TextFade-Beispiel werden zwei Slider-Elemente verwendet, um zwei Label-Elemente in einem AbsoluteLayout zu verschieben und dabei das eine in das andere überzublenden.

Der „Stepper“-Unterschied

Der Stepper definiert dieselben Eigenschaften und Ereignisse wie der Slider, aber die Maximum-Eigenschaft wird mit 100 initialisiert, und Stepper definiert eine vierte Eigenschaft:

  • Increment vom Typ double, initialisiert mit 1.

Visuell besteht die Stepper aus zwei Schaltflächen mit der Bezeichnung und+. Drücken – verringert ValueIncrement sich um auf ein Minimum von Minimum. Drücken auf + erhöht Value um Increment bis auf ein Maximum von Maximum.

Dieser Vorgang wird im StepperDemo-Beispiel veranschaulicht.

„Switch“ (Schalter) und „CheckBox“ (Kontrollkästchen)

Switch ermöglicht dem Benutzer die Angabe eines booleschen Werts.

„Switch“-Grundlagen

Visuell besteht der Switch aus einer Umschaltfläche, die ein- und ausgeschaltet werden kann. Die Klasse definiert eine Eigenschaft:

Switch definiert ein Ereignis:

  • Toggled, begleitet von einem ToggledEventArgs-Objekt, das ausgelöst wird, wenn sich die IsToggled-Eigenschaft ändert.

Das SwitchDemo-Programm veranschaulicht den Switch.

Ein traditionelles Kontrollkästchen (CheckBox)

Manche Entwickler ziehen vielleicht ein traditionelleres CheckBox dem Switch vor. Die Bibliothek Xamarin.FormsBook.Toolkit enthält die CheckBox-Klasse, die von ContentView abgeleitet ist. CheckBox wird mit den Dateien CheckBox.xaml und CheckBox.xaml.cs implementiert. CheckBox definiert drei Eigenschaften (Text, FontSize und IsChecked) und ein CheckedChanged-Ereignis.

Dieses CheckBox wird im CheckBoxDemo-Beispiel veranschaulicht.

Eingabe von Text

Xamarin.Forms definiert drei Ansichten, in denen der Benutzer Text eingeben und bearbeiten kann:

  • Entry für eine einzelne Textzeile.
  • Editor für mehrere Textzeilen.
  • SearchBar für eine einzelne Textzeile zu Suchzwecken.

Entry und Editor werden von InputView abgeleitet, die wiederum von View abgeleitet wird. SearchBar wird direkt von View abgeleitet.

Tastatur und Fokus

Bei Telefonen und Tablets ohne physische Tastaturen sorgen die Elemente Entry, Editor und SearchBar dafür, dass eine virtuelle Tastatur angezeigt wird. Das Vorhandensein dieser Tastatur am Bildschirm steht im Zusammenhang mit dem Eingabefokus. Für eine Ansicht müssen ihre beiden Eigenschaften IsVisible und IsEnabled auf true festgelegt sein, um den Eingabefokus zu erhalten.

Zwei Methoden, eine schreibgeschützte Eigenschaft und zwei Ereignisse sind am Eingabefokus beteiligt. Diese werden alle von VisualElement definiert.

  • Die Focus-Methode versucht, den Eingabefokus auf ein Element festzulegen, und gibt bei Erfolg true zurück
  • Die Unfocus-Methode entfernt den Eingabefokus von einem Element.
  • Die schreibgeschützte IsFocused-Eigenschaft zeigt an, ob das Element den Eingabefokus hat.
  • Das Focused-Ereignis zeigt an, wenn ein Element den Eingabefokus erhält.
  • Das Unfocused-Ereignis zeigt an, wenn ein Element den Eingabefokus verliert.

Auswählen der Tastatur

Die InputView-Klasse, von der Entry und Editor abgeleitet werden, definiert nur eine Eigenschaft:

Diese zeigt den Typ der Tastatur an, die angezeigt wird. Manche Tastaturen sind für URIs oder Zahlen optimiert.

Die Keyboard -Klasse ermöglicht das Definieren einer Tastatur mit einer statischen Keyboard.Create Methode mit einem Argument vom Typ KeyboardFlags, einer Enumeration mit den folgenden Bitflags:

Bei Verwendung des mehrzeiligen Editor, wenn ein Absatz oder mehr Text erwartet wird, stellt das Aufrufen von Keyboard.Create einen guten Ansatz zur Auswahl einer Tastatur dar. Für den einzeiligen Entry sind die folgenden statischen, schreibgeschützten Eigenschaften von Keyboard nützlich:

Die KeyboardTypeConverter ermöglicht das Angeben dieser Eigenschaften in XAML, wie im EntryKeyboards-Programm veranschaulicht.

„Entry“-Eigenschaften und -Ereignisse

Der einzeilige Entry definiert die folgenden Eigenschaften:

Entry definiert außerdem zwei Ereignisse:

  • TextChanged mit einem TextChangedEventArgs-Objekt, das immer ausgelöst wird, wenn sich die Text-Eigenschaft ändert.
  • Completed, das ausgelöst wird, wenn der Benutzer fertig ist und die Tastatur geschlossen wird. Der Benutzer zeigt die Fertigstellung auf plattformspezifische Weise an.

Im QuadraticEquations-Beispiel werden diese beiden Ereignisse veranschaulicht.

Der „Editor“-Unterschied

Der mehrzeilige Editor definiert dieselben Eigenschaften Text und Font wie Entry, aber nicht die anderen Eigenschaften. Editor definiert ferner dieselben zwei Eigenschaften wie Entry.

JustNotes ist ein Programm zum Erstellen von Freihandnotizen, das den Inhalt von Editor speichert und wiederherstellt.

SearchBar wird nicht von InputView abgeleitet, weshalb sie keine Keyboard-Eigenschaft besitzt. Sie besitzt aber all die Eigenschaften Text, Font und Placeholder, die Entry definiert. Darüber hinaus definiert SearchBar drei zusätzliche Eigenschaften:

Die plattformspezifische Schaltfläche „Abbrechen“ löscht den Text. Die SearchBar besitzt auch eine plattformspezifische Schaltfläche „Suchen“. Durch das Drücken einer der beiden Schaltflächen wird eins der beiden Ereignisse ausgelöst, die SearchBar definiert:

Die SearchBar wird im SearchBarDemo-Beispiel veranschaulicht.

Datums- und Zeitauswahl

Die Ansichten DatePicker und TimePicker implementieren plattformspezifische Steuerelemente, die Benutzern das Angeben eines Datums oder einer Uhrzeit gestatten.

Die Datumsauswahl (DatePicker)

DatePicker definiert vier Eigenschaften:

  • MinimumDate vom Typ DateTime, initialisiert mit 1. Januar 1900.
  • MaximumDate vom Typ DateTime, initialisiert mit 31. Dezember 2100.
  • Date vom Typ DateTime, initialisiert mit DateTime.Today.
  • Format vom Typ string, mit der .NET-Formatierungszeichenfolge initialisiert mit „d“, dem kurzen Datumsmuster, was zu einer Datumsanzeige wie „20.7.1969“ in Deutschland führt.

Sie können die DateTime-Eigenschaften in XAML festlegen, in dem Sie die Eigenschaften als Eigenschaftselemente ausdrücken und das kulturinvariante kurze Datumsformat verwenden („20.7.1969“).

Im DaysBetweenDates-Beispiel wird die Anzahl der Tage zwischen zwei vom Benutzer ausgewählten Daten berechnet.

Die Uhrzeitauswahl (TimePicker) (oder ist es eine Zeitraumauswahl (TimeSpanPicker)?)

TimePicker definiert zwei Eigenschaften und keine Ereignisse:

  • Time ist eher vom Typ TimeSpan als DateTime, was die seit Mitternacht verstrichene Zeit angibt.
  • Format vom Typ string, mit der .NET-Formatierungszeichenfolge initialisiert mit „t“, dem kurzen Uhrzeitmuster, was zu einer Uhrzeitanzeige wie „13:45“ in Deutschland führt.

Das SetTimer-Programm veranschaulicht, wie Sie TimePicker verwenden, um eine Uhrzeit für einen Timer anzugeben. Das Programm funktioniert nur, wenn Sie es im Vordergrund halten.

SetTimer veranschaulicht auch die Verwendung der DisplayAlert-Methode von Page zur Anzeige eines Warnfelds.