MaskedBehavior: Eingaben in einem bestimmten Format

Für eines meiner letzten Projekte habe ich die Möglichkeit benötigt die Eingabe in einer Editor- oder ein Entry-Feld in einem bestimmten Format, z.B. XXXX-XXXX-XXXX-XXXX für eine Kreditkarte oder XXX-X-XX-XXXXXX-X für eine 13-stellige ISBN. Ich hatte mir hierfür zunächst überlegt ein eigenes Behavior zu schreiben, aber dann habe ich einen Blick auf das Xamarin Community Toolkit geworfen und gesehen, dass es hier bereits ein passendes Behavior gibt, welches ich euch kurz in diesem Beitrag vorstellen möchte.

Ausgangslage bildet ein leeres Xamarin.Forms Projekt für Android, iOS und UWP. Wir müssen das Xamarin Community Toolkit NuGet-Paket allen vier Projekten hinzufügen.

Anschließend können wir die MainPage.xaml öffnen und ein Entry oder einen Editor hinzufügen. In der Property Behaviors können wir nun das MaskedBehavior hinzufügen und die beiden Eigenschaften Mask und UnMaskedCharacter setzen. In der Eigenschaft Mask können wir nun ganz einfach unsere Zeichenfolge, z.B. XXXX-XXXX-XXXX oder XXX-X-XX-XXXXXX-X eingeben. Über die Eigenschaft UnMaskedCharacter können wir angeben, welcher Buchstabe ersetzt werden soll. In meinem Fall nutze ich hier X, aber jeder andere Character kann hier angegeben werden.

<Entry Placeholder="Mask: XXXX-XXXX-XXXX">
    <Entry.Behaviors>
        <xct:MaskedBehavior Mask="XXXX-XXXX-XXXX"
                            UnMaskedCharacter="X" />
    </Entry.Behaviors>
</Entry>

Ich habe noch ein weiteres Entry-Feld auf der MainPage platziert, bei dem ich nicht das Behavior verwende, um die Unterschiede zu zeigen. Der folgende Screenshot zeigt nun die View unter Android und die verschiedenen Entries.

Wir können sehen, dass beim ersten Entry, welches kein Behavior gesetzt hat, eine beliebige Eingabe möglich ist. Beim zweiten Entry sehen wir direkt die Begrenzung und an den passenden Stellen die Bindestriche. Insgesamt eine einfache Möglichkeit, wenn man die Eingabe in einem bestimmten Format benötigt.