Учебник по Editor в Xamarin.Forms

Статья
Developer (Начальный уровень)
8 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.
Руководство по StackLayout.

В этом руководстве описано следующее:

Создайте Xamarin.FormsEditor в XAML.
Отвечать на текст в изменении Editor.
Настраивать поведение Editor.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее, как настроить поведение Editor. На следующих снимках экрана показано готовое приложение.

Вы также будете использовать Горячую перезагрузку XAML для Xamarin.Forms, чтобы просматривать изменения пользовательского интерфейса без перестроения приложения.

Создание Editor

Осталось 7 мин

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте пустое приложение Xamarin.Forms с именем EditorTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем EditorTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте EditorTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Editor в StackLayout. Свойство Editor.Placeholder определяет текст заполнителя, который отображается при первом появлении Editor. Кроме того, свойство HeightRequest указывает высоту Editor в аппаратно-независимых единицах.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Примечание.

В то время, как в Android существует функция, которая указывает высоту Editor, в iOS такая функция отсутствует.

В Visual Studio остановите приложение.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте пустое приложение Xamarin.Forms с именем EditorTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем EditorTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
На Панели решения дважды щелкните файл MainPage.xaml в проекте EditorTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Editor в StackLayout. Свойство Editor.Placeholder определяет текст заполнителя, который отображается при первом появлении Editor. Кроме того, свойство HeightRequest указывает высоту Editor в аппаратно-независимых единицах.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Примечание.

В то время, как в Android существует функция, которая указывает высоту Editor, в iOS такая функция отсутствует.

В Visual Studio для Mac остановите приложение.

Реагирование на изменения текста

Осталось 5 мин

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Editor таким образом, чтобы оно установило обработчик для событий TextChanged и Completed.
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Этот код устанавливает событие TextChanged для обработчика событий OnEditorTextChanged, а Completed — для обработчика OnEditorCompleted. Оба обработчика событий будут созданы на следующем шаге.
В обозревателе решений в проекте EditorTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в файле MainPage.xaml.cs добавьте обработчики событий OnEditorTextChanged и 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;
}
```
Если текст в Editor изменяется, выполняется метод OnEditorTextChanged. Аргумент sender является объектом Editor, ответственным за запуск события TextChanged, и может использоваться для доступа к объекту Editor. Аргумент TextChangedEventArgs содержит старые и новые текстовые значения (до и после изменения текста).

По завершении редактирования выполняется метод OnEditorCompleted. Это достигается путем расфокусировки Editor или дополнительно нажатием кнопки "Готово" на iOS. Аргумент sender является объектом Editor, ответственным за запуск события TextChanged, и может использоваться для доступа к объекту Editor.

Внимание

Любой текст, введенный в Editor, хранится в свойстве Text.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Установите точки останова в два обработчика событий, введите текст в Editor и просмотрите запуск событий TextChanged. Расфокусируйте Editor, чтобы просмотреть запуск событий Completed.

Дополнительные сведения о событиях Editor см. в разделе События и интерактивность руководства Editor в Xamarin.Forms.

В MainPage.xaml измените объявление Editor таким образом, чтобы оно установило обработчик для событий TextChanged и Completed.
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Этот код устанавливает событие TextChanged для обработчика событий OnEditorTextChanged, а Completed — для обработчика OnEditorCompleted. Оба обработчика событий будут созданы на следующем шаге.
На Панели решений в проекте EditorTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в файле MainPage.xaml.cs добавьте обработчики событий OnEditorTextChanged и 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;
}
```
Если текст в Editor изменяется, выполняется метод OnEditorTextChanged. Аргумент sender является объектом Editor, ответственным за запуск события TextChanged, и может использоваться для доступа к объекту Editor. Аргумент TextChangedEventArgs содержит старые и новые текстовые значения (до и после изменения текста).

По завершении редактирования выполняется метод OnEditorCompleted. Это достигается путем расфокусировки Editor или дополнительно нажатием кнопки "Готово" на iOS. Аргумент sender является объектом Editor, ответственным за запуск события TextChanged, и может использоваться для доступа к объекту Editor.

Внимание

Любой текст, введенный в Editor, хранится в свойстве Text.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Установите точки останова в два обработчика событий, введите текст в Editor и просмотрите запуск событий TextChanged. Расфокусируйте Editor, чтобы просмотреть запуск событий Completed.

Дополнительные сведения о событиях Editor см. в разделе События и интерактивность руководства Editor в Xamarin.Forms.

Настройка поведения

Осталось 2 мин

Visual Studio
Visual Studio для Mac

В файле MainPage.xaml измените объявление Editor, чтобы настроить его поведение:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Этот код задает свойства, позволяющие настроить поведение Editor. Свойство AutoSize имеет значение TextChanges; это означает, что высота Editor увеличивается, когда оно заполняется текстом, и уменьшается, когда текст удаляется. Свойство MaxLength ограничивает длину входных данных, допустимую для Editor. Кроме того, свойство IsSpellCheckEnabled задано как false, чтобы отключить проверку орфографии, а свойству IsTextPredictionEnabled задано значение false для отключения прогнозирования текста и автоматического прогнозирования текста.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Введите текст в Editor и обратите внимание, что высота Editor увеличивается по мере его заполнения текстом, а также уменьшается по мере удаления текста; максимальное число вводимых символов — 200:

В Visual Studio остановите приложение.

Дополнительные сведения о настройке поведения Editor см. в руководстве Editor в Xamarin.Forms.

В файле MainPage.xaml измените объявление Editor, чтобы настроить его поведение:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Этот код задает свойства, позволяющие настроить поведение Editor. Свойство AutoSize имеет значение TextChanges; это означает, что высота Editor увеличивается, когда оно заполняется текстом, и уменьшается, когда текст удаляется. Свойство MaxLength ограничивает длину входных данных, допустимую для Editor. Кроме того, свойство IsSpellCheckEnabled задано как false, чтобы отключить проверку орфографии, а свойству IsTextPredictionEnabled задано значение false для отключения прогнозирования текста и автоматического прогнозирования текста.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android. Введите текст в Editor и обратите внимание, что высота Editor увеличивается по мере его заполнения текстом, а также уменьшается по мере удаления текста; максимальное число вводимых символов — 200:

В Visual Studio для Mac остановите приложение.

Дополнительные сведения о настройке поведения Editor см. в руководстве Editor в Xamarin.Forms.

Поделиться через

Учебник по Editor в Xamarin.Forms

Создание Editor

Реагирование на изменения текста

Настройка поведения

Поздравляем!

Следующие шаги

Поделиться через

Учебник по Editor в Xamarin.Forms

Создание Editor

Реагирование на изменения текста

Настройка поведения

Поздравляем!

Следующие шаги

Дополнительные ссылки