Gerade wenn man in einer App ein Formular integriert, dann kann die Eingabe der Daten für den Nutzer teilweise schwierig sein, da man nicht bequem per TAB in das nächste Feld springen kann, wie es beim Desktop der Fall ist. Auch ein Drücken der Return-Taste führt nicht automatisch zum Fokussieren des nächsten Eingabefeldes. In diesem Beitrag möchte ich nun zeigen, wie wir das bestehende Xamarin.Forms Entry Control mit wenig Aufwand erweitern, so dass beim Drücken der Return-Taste (fast) automatisch in das nächste Entry gewechselt wird.
Zunächst starten wir entweder mit einem Xamarin.Forms-Projekt in Visual Studio oder öffnen ein bereits vorhandenes Projekt. Wir wollen nun das bestehende Entry Control erweitern. Dafür legen wir im Ordner Controls eine neue Klasse mit dem Namen NextEntry und der Basis-Klasse Entry an.
public class NextEntry : Entry
{
}
Nun benötigen wir noch eine BindableProperty, welche später eine Referenz beinhalten wird, welche beim Drücken von Return fokussiert werden soll. Diese trägt den Namen NextViewProperty und ist vom Typ View.
public class NextEntry : Entry
{
public static readonly BindableProperty NextViewProperty =
BindableProperty.Create(nameof(NextView), typeof(View), typeof(NextEntry));
public View NextView
{
get => (View)GetValue(NextViewProperty);
set => SetValue(NextViewProperty, value);
}
}
Zu guter Letzt fehlt uns jetzt nur die Logik, welche das Fokussieren übernimmt. Hierfür überschreiben wir die Methode OnPropertyChanged und registrieren das Completed-Event, welches dann den Fokus auf NextView setzt.
public class NextEntry : Entry
{
public static readonly BindableProperty NextViewProperty =
BindableProperty.Create(nameof(NextView), typeof(View), typeof(NextEntry));
public View NextView
{
get => (View)GetValue(NextViewProperty);
set => SetValue(NextViewProperty, value);
}
protected override void OnPropertyChanged(
[CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
Completed += (sender, e) => NextView?.Focus();
}
}
Nun sind wir tatsächlich schon fertig und können das neue Control verwenden. Als Beispiel verwende ich hier drei Eingabefelder, welche beim Drücken von Return automatisch rotiert werden. Für dieses Szenario ergibt sich der folgende Xaml Code.
<StackLayout>
<controls:NextEntry x:Name="FirstEntry"
Placeholder="First"
NextView="{x:Reference SecondEntry}" />
<controls:NextEntry x:Name="SecondEntry"
Placeholder="Second"
NextView="{x:Reference ThirdEntry}" />
<controls:NextEntry x:Name="ThirdEntry"
Placeholder="Third"
NextView="{x:Reference FirstEntry}" />
</StackLayout>
Schauen wir uns das Ergebnis einmal an. Hier ein kurzes Video von dem Verhalten auf Android:
Aber auch unter iOS und sogar unter UWP funktioniert unser selbst geschriebene Erweiterung vom Entry ohne Problem. Somit haben wir eine kleine, aber feine Möglichkeit geschaffen, welche Formular-Eingaben für den Nutzer auf einem Smartphone etwas angenehmer machen. Das komplette Beispiel (inkl. der hier verwendeten Styles) liegt auf GitHub bereit.
