Xamarin.Forms: Tutorial zu Eingaben

Artikel
Developer (Anfänger)
8 Minuten bis zum Abschluss

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:

Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App
Das Tutorial zu StackLayout

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

Erstellen eines Xamarin.FormsEntry-Elements in XAML
Darauf reagieren, dass sich Text im Entry ändert
Anpassen des Verhaltens des Entry-Elements

Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie das Verhalten eines Entry anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:

Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.

Erstellen eines Eintrags

7 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.

Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen EntryTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe EntryTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt EntryTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die ein Entry in einem StackLayout enthält. Mit der Entry.Placeholder-Eigenschaft wird der Platzhaltertext festgelegt, der bei der Anzeige des Entry-Elements anfänglich zu sehen ist.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Beenden Sie die Anwendung in Visual Studio.

Für dieses Tutorial benötigen Sie Visual Studio für Mac (neuestes Release) mit Plattformunterstützung für iOS und Android. Zudem ist Xcode (neuestes Release) erforderlich. Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.

Starten Sie Visual Studio für Mac, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen EntryTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe EntryTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Lösungspad im Projekt EntryTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die ein Entry in einem StackLayout enthält. Mit der Entry.Placeholder-Eigenschaft wird der Platzhaltertext festgelegt, der bei der Anzeige des Entry-Elements anfänglich zu sehen ist.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Beenden Sie die Anwendung in Visual Studio für Mac.

Reagieren auf Textänderungen

5 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die Entry-Deklaration, sodass ein Handler für die TextChanged- und Completed-Ereignisse festgelegt wird:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Dieser Code legt das TextChanged-Ereignis auf einen Ereignishandler mit dem Namen OnEntryTextChanged fest, und das Completed-Ereignis auf einen Handler mit dem Namen OnEntryCompleted. Beide Ereignishandler werden im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt EntryTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie anschließend in der Datei MainPage.xaml.cs der Klasse die Ereignishandler OnEntryTextChanged und OnEntryCompleted hinzu:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Wenn sich der Text im Entry ändert, wird die OnEntryTextChanged-Methode ausgeführt. Das sender-Argument ist das Entry-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Entry-Objekt verwendet werden kann. Das TextChangedEventArgs-Argument stellt die alten und neuen Textwerte, vor und nach der Textänderung, bereit.

Wenn Sie den Text im Entry mit der Eingabetaste abschließen, wird die OnEntryCompleted-Methode ausgeführt. Das sender-Argument ist das Entry-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Entry-Objekt verwendet werden kann.

Wichtig

Jeder in einen Entry eingegebene Text wird in der Text-Eigenschaft gespeichert.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Legen Sie Breakpoints in den beiden Ereignishandlern fest, geben Sie in den Entry Text ein, und beobachten Sie das Auslösen der TextChanged- und Completed-Ereignisse.

Weitere Informationen zu Entry-Ereignissen finden Sie unter Ereignisse und Interaktivität im Leitfaden zu Xamarin.Forms-Einträgen.

Ändern Sie in MainPage.xaml die Entry-Deklaration, sodass ein Handler für die TextChanged- und Completed-Ereignisse festgelegt wird:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Dieser Code legt das TextChanged-Ereignis auf einen Ereignishandler mit dem Namen OnEntryTextChanged fest, und das Completed-Ereignis auf einen Handler mit dem Namen OnEntryCompleted. Beide Ereignishandler werden im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Lösungspad im Projekt EntryTutorial, und doppelklicken Sie dann auf die Datei MainPage.xaml.cs, um sie zu öffnen. Fügen Sie anschließend in der Datei MainPage.xaml.cs der Klasse die Ereignishandler OnEntryTextChanged und OnEntryCompleted hinzu:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Wenn sich der Text im Entry ändert, wird die OnEntryTextChanged-Methode ausgeführt. Das sender-Argument ist das Entry-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Entry-Objekt verwendet werden kann. Das TextChangedEventArgs-Argument stellt die alten und neuen Textwerte, vor und nach der Textänderung, bereit.

Wenn Sie den Text im Entry mit der Eingabetaste abschließen, wird die OnEntryCompleted-Methode ausgeführt. Das sender-Argument ist das Entry-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Entry-Objekt verwendet werden kann.

Wichtig

Jeder in einen Entry eingegebene Text wird in der Text-Eigenschaft gespeichert.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Legen Sie Breakpoints in den beiden Ereignishandlern fest, geben Sie in den Entry Text ein, und beobachten Sie das Auslösen der TextChanged- und Completed-Ereignisse.

Weitere Informationen zu Entry-Ereignissen finden Sie unter Ereignisse und Interaktivität im Leitfaden zu Xamarin.Forms-Einträgen.

Anpassen des Verhaltens

2 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die Entry-Deklaration, um das Verhalten anzupassen:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
In diesem Codeausschnitt werden Eigenschaften festgelegt, mit denen das Verhalten des Entry-Elements angepasst wird. Die MaxLength-Eigenschaft begrenzt die Eingabelänge für Entry, und die IsSpellCheckEnabled-Eigenschaft ist auf false festgelegt, um die Rechtschreibprüfung zu deaktivieren. Ebenso wird die IsTextPredictionEnabled-Eigenschaft auf false festgelegt, um die (automatische) Textvorhersage zu deaktivieren. Darüber hinaus stellt die IsPassword-Eigenschaft sicher, dass eingegebene Zeichen mithilfe eines Kennwortzeichens (schwarzer Kreis) maskiert werden.

Hinweis

Bei einigen Texteingabeszenarios wie der Eingabe eines Kennworts sind die Rechtschreibprüfung und die Textvorhersage störend und sollten daher deaktiviert werden.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten. Geben Sie Text in Entry ein. Wie Sie beobachten können, wird jedes Zeichen durch ein Zeichen zur Kennwortmaskierung ersetzt. Es können maximal 15 Zeichen eingegeben werden:

Beenden Sie die Anwendung in Visual Studio.

Weitere Informationen zum Anpassen des Verhaltens von Entry finden Sie im Leitfaden zu Xamarin.Forms-Einträgen.

Ändern Sie in MainPage.xaml die Entry-Deklaration, um das Verhalten anzupassen:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
In diesem Codeausschnitt werden Eigenschaften festgelegt, mit denen das Verhalten des Entry-Elements angepasst wird. Die MaxLength-Eigenschaft begrenzt die Eingabelänge für Entry, und die IsSpellCheckEnabled-Eigenschaft ist auf false festgelegt, um die Rechtschreibprüfung zu deaktivieren. Ebenso wird die IsTextPredictionEnabled-Eigenschaft auf false festgelegt, um die (automatische) Textvorhersage zu deaktivieren. Darüber hinaus stellt die IsPassword-Eigenschaft sicher, dass eingegebene Zeichen mithilfe eines Kennwortzeichens (schwarzer Kreis) maskiert werden.

Hinweis

Bei einigen Texteingabeszenarios wie der Eingabe eines Kennworts sind die Rechtschreibprüfung und die Textvorhersage störend und sollten daher deaktiviert werden.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten. Geben Sie Text in Entry ein. Wie Sie beobachten können, wird jedes Zeichen durch ein Zeichen zur Kennwortmaskierung ersetzt. Es können maximal 15 Zeichen eingegeben werden:

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zum Anpassen des Verhaltens von Entry finden Sie im Leitfaden zu Xamarin.Forms-Einträgen.

Xamarin.Forms: Tutorial zu Eingaben

Erstellen eines Eintrags

Reagieren auf Textänderungen

Anpassen des Verhaltens

Herzlichen Glückwunsch!

Nächste Schritte

Xamarin.Forms: Tutorial zu Eingaben

Erstellen eines Eintrags

Reagieren auf Textänderungen

Anpassen des Verhaltens

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links