Xamarin.Forms Samouczek edytora
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.Forms
Editor
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
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 obiekcieStackLayout
. WłaściwośćEditor.Placeholder
określa tekst zastępczy pokazywany po pierwszym wyświetleniu obiektuEditor
. Ponadto właściwośćHeightRequest
określa wysokość obiektuEditor
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.
Reagowanie na zmiany w tekście
W pliku MainPage.xaml zmodyfikuj deklarację obiektu
Editor
tak, aby określała program obsługi dla zdarzeńTextChanged
iCompleted
:<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 nazwieOnEditorTextChanged
, a dla zdarzeniaCompleted
— program obsługi zdarzeń o nazwieOnEditorCompleted
. 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
iOnEditorCompleted
: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 metodaOnEditorTextChanged
. Argumentsender
jest obiektemEditor
odpowiedzialnym za uruchamianie zdarzeniaTextChanged
i może posłużyć do uzyskiwania dostępu do obiektuEditor
. ArgumentTextChangedEventArgs
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 obiektuEditor
lub, dodatkowo, przez naciśniecie przycisku „Gotowe” w systemie iOS. Argumentsender
jest obiektemEditor
odpowiedzialnym za uruchamianie zdarzeniaTextChanged
i może posłużyć do uzyskiwania dostępu do obiektuEditor
.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 zdarzeniaTextChanged
. Usuń fokus obiektuEditor
w celu obserwowania uruchamiania zdarzeniaCompleted
.Aby uzyskać więcej informacji na temat zdarzeń, zobacz Zdarzenia i interakcyjność w przewodniku edytoraXamarin.Forms.
Editor
Dostosowywanie zachowania
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ść obiektuEditor
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 obiektuEditor
. 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ść obiektuEditor
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.
Gratulacje!
Gratulujemy ukończenia tego samouczka, w którym przedstawiono sposób wykonywania następujących czynności:
- Utwórz element Xamarin.Forms
Editor
w języku XAML. - Reagowanie na zmianę tekstu w obiekcie
Editor
. - Dostosowywanie zachowania obiektu
Editor
.
Następne kroki
Aby dowiedzieć się więcej na temat podstaw tworzenia aplikacji Xamarin.Formsmobilnych w usłudze , przejdź do samouczka Obraz.
Pokrewne łącza
Widzisz problem w tej sekcji? W takim przypadku prześlij opinię, abyśmy mogli udoskonalić tę sekcję.