Xamarin.Forms Samouczek edytora

Artykuł
Developer (Początkujący)
Czas do ukończenia: 8 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsEditor w języku XAML.
Reagowanie na zmianę tekstu w obiekcie Editor.
Dostosowywanie zachowania obiektu Editor.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak dostosować zachowanie elementu Editor. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Użyjesz również Przeładowywanie na gorąco XAML, Xamarin.Forms aby zobaczyć zmiany interfejsu użytkownika bez ponownego kompilowania aplikacji.

Tworzenie obiektu editor

Pozostały czas: 7 min

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie EditorTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę EditorTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie EditorTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Editor w obiekcie StackLayout. Właściwość Editor.Placeholder określa tekst zastępczy pokazywany po pierwszym wyświetleniu obiektu Editor. Ponadto właściwość HeightRequest określa wysokość obiektu Editor w jednostkach niezależnych od urządzenia.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Uwaga

System Android określa wysokość obiektu Editor, a system iOS tego nie robi.

Zatrzymaj aplikację w programie Visual Studio.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie EditorTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę EditorTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie EditorTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Editor w obiekcie StackLayout. Właściwość Editor.Placeholder określa tekst zastępczy pokazywany po pierwszym wyświetleniu obiektu Editor. Ponadto właściwość HeightRequest określa wysokość obiektu Editor w jednostkach niezależnych od urządzenia.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Uwaga

System Android określa wysokość obiektu Editor, a system iOS tego nie robi.

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Reagowanie na zmiany w tekście

Pozostały czas: 5 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Editor tak, aby określała program obsługi dla zdarzeń TextChanged i Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
W tym kodzie dla zdarzenia TextChanged ustawiono program obsługi zdarzeń o nazwie OnEditorTextChanged, a dla zdarzenia Completed — program obsługi zdarzeń o nazwie OnEditorCompleted. Oba programy obsługi zdarzeń zostaną utworzone w następnym kroku.
W Eksploratorze rozwiązań w projekcie EditorTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy programy obsługi zdarzeń OnEditorTextChanged i OnEditorCompleted:
```
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;
}
```
Gdy tekst w obiekcie Editor ulegnie zmianie, zostanie wykonana metoda OnEditorTextChanged. Argument sender jest obiektem Editor odpowiedzialnym za uruchamianie zdarzenia TextChanged i może posłużyć do uzyskiwania dostępu do obiektu Editor. Argument TextChangedEventArgs zawiera stare i nowe wartości tekstowe sprzed zmiany tekstu i po niej.

Po zakończeniu edycji wykonywana jest metoda OnEditorCompleted. Jest to osiągane przez usunięcie fokusu obiektu Editor lub, dodatkowo, przez naciśniecie przycisku „Gotowe” w systemie iOS. Argument sender jest obiektem Editor odpowiedzialnym za uruchamianie zdarzenia TextChanged i może posłużyć do uzyskiwania dostępu do obiektu Editor.

Ważne

Dowolny tekst wprowadzony w obiekcie Editor jest przechowywany we właściwości Text.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Ustaw punkty przerwania w dwóch programach obsługi zdarzeń, wprowadź tekst w obiekcie Editor, a następnie obserwuj uruchamianie zdarzenia TextChanged. Usuń fokus obiektu Editor w celu obserwowania uruchamiania zdarzenia Completed.

Aby uzyskać więcej informacji na temat zdarzeń, zobacz Zdarzenia i interakcyjność w przewodniku edytora Xamarin.Forms.Editor

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Editor tak, aby określała program obsługi dla zdarzeń TextChanged i Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
W tym kodzie dla zdarzenia TextChanged ustawiono program obsługi zdarzeń o nazwie OnEditorTextChanged, a dla zdarzenia Completed — program obsługi zdarzeń o nazwie OnEditorCompleted. Oba programy obsługi zdarzeń zostaną utworzone w następnym kroku.
W okienku rozwiązania w projekcie EditorTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy programy obsługi zdarzeń OnEditorTextChanged i OnEditorCompleted:
```
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;
}
```
Gdy tekst w obiekcie Editor ulegnie zmianie, zostanie wykonana metoda OnEditorTextChanged. Argument sender jest obiektem Editor odpowiedzialnym za uruchamianie zdarzenia TextChanged i może posłużyć do uzyskiwania dostępu do obiektu Editor. Argument TextChangedEventArgs zawiera stare i nowe wartości tekstowe sprzed zmiany tekstu i po niej.

Po zakończeniu edycji wykonywana jest metoda OnEditorCompleted. Jest to osiągane przez usunięcie fokusu obiektu Editor lub, dodatkowo, przez naciśniecie przycisku „Gotowe” w systemie iOS. Argument sender jest obiektem Editor odpowiedzialnym za uruchamianie zdarzenia TextChanged i może posłużyć do uzyskiwania dostępu do obiektu Editor.

Ważne

Dowolny tekst wprowadzony w obiekcie Editor jest przechowywany we właściwości Text.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Ustaw punkty przerwania w dwóch programach obsługi zdarzeń, wprowadź tekst w obiekcie Editor, a następnie obserwuj uruchamianie zdarzenia TextChanged. Usuń fokus obiektu Editor w celu obserwowania uruchamiania zdarzenia Completed.

Aby uzyskać więcej informacji na temat zdarzeń, zobacz Zdarzenia i interakcyjność w przewodniku edytora Xamarin.Forms.Editor

Dostosowywanie zachowania

Pozostały czas: 2 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Editor, aby dostosować jego zachowanie:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Ten kod ustawia właściwości, które dostosowują zachowanie obiektu Editor. Właściwość AutoSize jest ustawiona na wartość TextChanges, co oznacza, że wysokość obiektu Editor zwiększy się po wypełnieniu go tekstem i zmniejszy po usunięciu tekstu. Właściwość MaxLength ogranicza długość wprowadzanego tekstu dozwoloną dla obiektu Editor. Ponadto właściwość IsSpellCheckEnabled jest ustawiona na wartość false w celu wyłączenia sprawdzania pisowni, natomiast właściwość IsTextPredictionEnabled jest ustawiona na wartość false w celu wyłączenia przewidywania tekstu i automatycznego przewidywania tekstu.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Wprowadź tekst w obiekcie Editor i zauważ, że wysokość obiektu Editor zwiększa się w miarę wypełniania tekstem i zmniejsza podczas usuwania tekstu, a maksymalna liczba znaków, które można wprowadzić, wynosi 200:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat dostosowywania Editor zachowania, zobacz Przewodnik edytoraXamarin.Forms.

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Editor, aby dostosować jego zachowanie:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Ten kod ustawia właściwości, które dostosowują zachowanie obiektu Editor. Właściwość AutoSize jest ustawiona na wartość TextChanges, co oznacza, że wysokość obiektu Editor zwiększy się po wypełnieniu go tekstem i zmniejszy po usunięciu tekstu. Właściwość MaxLength ogranicza długość wprowadzanego tekstu dozwoloną dla obiektu Editor. Ponadto właściwość IsSpellCheckEnabled jest ustawiona na wartość false w celu wyłączenia sprawdzania pisowni, natomiast właściwość IsTextPredictionEnabled jest ustawiona na wartość false w celu wyłączenia przewidywania tekstu i automatycznego przewidywania tekstu.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Wprowadź tekst w obiekcie Editor i zauważ, że wysokość obiektu Editor zwiększa się w miarę wypełniania tekstem i zmniejsza podczas usuwania tekstu, a maksymalna liczba znaków, które można wprowadzić, wynosi 200:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat dostosowywania Editor zachowania, zobacz Przewodnik edytoraXamarin.Forms.

Xamarin.Forms Samouczek edytora

Tworzenie obiektu editor

Reagowanie na zmiany w tekście

Dostosowywanie zachowania

Gratulacje!

Następne kroki

Xamarin.Forms Samouczek edytora

Tworzenie obiektu editor

Reagowanie na zmiany w tekście

Dostosowywanie zachowania

Gratulacje!

Następne kroki

Pokrewne łącza