Xamarin.Forms: Tutorial zum Editor

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.FormsEditor-Elements in XAML
Darauf reagieren, dass sich Text im Editor ändert
Anpassen des Verhaltens des Editor-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 Editor 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 Editors

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 EditorTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe EditorTutorial 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 EditorTutorial 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die ein Editor in einem StackLayout enthält. Mit der Editor.Placeholder-Eigenschaft wird der Platzhaltertext festgelegt, der bei der Anzeige des Editor-Elements anfänglich zu sehen ist. Mit der HeightRequest-Eigenschaft wird zusätzlich die Höhe des Editor-Elements in geräteunabhängigen Einheiten angegeben.
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:

Hinweis

Unter Android wird die Höhe des Editor-Elements angedeutet. Dies ist unter iOS nicht der Fall.

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 EditorTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe EditorTutorial 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 EditorTutorial 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Dieser Code definiert deklarativ die Benutzeroberfläche für die Seite, die ein Editor in einem StackLayout enthält. Mit der Editor.Placeholder-Eigenschaft wird der Platzhaltertext festgelegt, der bei der Anzeige des Editor-Elements anfänglich zu sehen ist. Mit der HeightRequest-Eigenschaft wird zusätzlich die Höhe des Editor-Elements in geräteunabhängigen Einheiten angegeben.
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.

Hinweis

Unter Android wird die Höhe des Editor-Elements angedeutet. Dies ist unter iOS nicht der Fall.

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 Editor-Deklaration, sodass ein Handler für die TextChanged- und Completed-Ereignisse festgelegt wird:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Dieser Code legt das TextChanged-Ereignis auf einen Ereignishandler mit dem Namen OnEditorTextChanged fest, und das Completed-Ereignis auf einen Handler mit dem Namen OnEditorCompleted. Beide Ereignishandler werden im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Projektmappen-Explorer im Projekt EditorTutorial, 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 OnEditorTextChanged und OnEditorCompleted hinzu:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

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

Nach Abschluss der Bearbeitung wird die OnEditorCompleted-Methode ausgeführt. Dies wird erreicht, indem der Fokus vom Editor genommen oder zusätzlich auf die Schaltfläche „Fertig“ in iOS geklickt wird. Das sender-Argument ist das Editor-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Editor-Objekt verwendet werden kann.

Wichtig

Jeder in einen Editor 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 Editor Text ein, und beobachten Sie das Auslösen des TextChanged-Ereignisses. Nehmen Sie den Fokus vom Editor, um das Auslösen des Completed-Ereignisses zu beobachten.

Weitere Informationen zu Editor-Ereignissen finden Sie unter Ereignisse und Interaktivität im Leitfaden zum Xamarin.Forms-Editor.

Ändern Sie in MainPage.xaml die Editor-Deklaration, sodass ein Handler für die TextChanged- und Completed-Ereignisse festgelegt wird:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Dieser Code legt das TextChanged-Ereignis auf einen Ereignishandler mit dem Namen OnEditorTextChanged fest, und das Completed-Ereignis auf einen Handler mit dem Namen OnEditorCompleted. Beide Ereignishandler werden im nächsten Schritt erstellt.
Erweitern Sie MainPage.xaml im Lösungspad im Projekt EditorTutorial, 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 OnEditorTextChanged und OnEditorCompleted hinzu:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

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

Nach Abschluss der Bearbeitung wird die OnEditorCompleted-Methode ausgeführt. Dies wird erreicht, indem der Fokus vom Editor genommen oder zusätzlich auf die Schaltfläche „Fertig“ in iOS geklickt wird. Das sender-Argument ist das Editor-Objekt, das für das Auslösen des TextChanged-Ereignisses verantwortlich ist und für den Zugriff auf das Editor-Objekt verwendet werden kann.

Wichtig

Jeder in einen Editor 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 Editor Text ein, und beobachten Sie das Auslösen des TextChanged-Ereignisses. Nehmen Sie den Fokus vom Editor, um das Auslösen des Completed-Ereignisses zu beobachten.

Weitere Informationen zu Editor-Ereignissen finden Sie unter Ereignisse und Interaktivität im Leitfaden zum Xamarin.Forms-Editor.

Anpassen des Verhaltens

2 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die Editor-Deklaration, um das Verhalten anzupassen:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
In diesem Codeausschnitt werden Eigenschaften festgelegt, mit denen das Verhalten des Editor-Elements angepasst wird. Die AutoSize-Eigenschaft wird auf TextChanges festgelegt. Damit wird angegeben, dass die Höhe des Editor-Elements beim Hinzufügen von Text zunimmt und beim Entfernen von Text abnimmt. Die MaxLength-Eigenschaft begrenzt die für Editor zulässige Eingabelänge. Zusätzlich wird die IsSpellCheckEnabled-Eigenschaft auf false festgelegt, um die Rechtschreibprüfung zu deaktivieren, während die IsTextPredictionEnabled-Eigenschaft auf false festgelegt wird, um die (automatische) Textvorhersage zu deaktivieren.
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 im Editor-Element Text ein, und beobachten Sie, wie die Höhe des Editor-Elements beim Hinzufügen von Text zunimmt und beim Entfernen von Text abnimmt. Beachten Sie auch, dass maximal 200 Zeichen eingegeben werden können:

Beenden Sie die Anwendung in Visual Studio.

Weitere Informationen zum Anpassen des Verhaltens von Editor finden Sie im Leitfaden zum Xamarin.Forms-Editor.

Ändern Sie in MainPage.xaml die Editor-Deklaration, um das Verhalten anzupassen:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
In diesem Codeausschnitt werden Eigenschaften festgelegt, mit denen das Verhalten des Editor-Elements angepasst wird. Die AutoSize-Eigenschaft wird auf TextChanges festgelegt. Damit wird angegeben, dass die Höhe des Editor-Elements beim Hinzufügen von Text zunimmt und beim Entfernen von Text abnimmt. Die MaxLength-Eigenschaft begrenzt die für Editor zulässige Eingabelänge. Zusätzlich wird die IsSpellCheckEnabled-Eigenschaft auf false festgelegt, um die Rechtschreibprüfung zu deaktivieren, während die IsTextPredictionEnabled-Eigenschaft auf false festgelegt wird, um die (automatische) Textvorhersage zu deaktivieren.
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 im Editor-Element Text ein, und beobachten Sie, wie die Höhe des Editor-Elements beim Hinzufügen von Text zunimmt und beim Entfernen von Text abnimmt. Beachten Sie auch, dass maximal 200 Zeichen eingegeben werden können:

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

Weitere Informationen zum Anpassen des Verhaltens von Editor finden Sie im Leitfaden zum Xamarin.Forms-Editor.

Xamarin.Forms: Tutorial zum Editor

Erstellen eines Editors

Reagieren auf Textänderungen

Anpassen des Verhaltens

Herzlichen Glückwunsch!

Nächste Schritte

Xamarin.Forms: Tutorial zum Editor

Erstellen eines Editors

Reagieren auf Textänderungen

Anpassen des Verhaltens

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links