Редактор текста в Xamarin.Forms

Автор:

learn.microsoft.com

Установка и чтение текста

Редактор (Editor), как и другие представления, отображающие текст, открывает свойство Text. Это свойство можно использовать для установки и чтения текста, представляемого редактором. Следующий пример демонстрирует установку свойства Text в XAML:

<Editor x:Name="editor" Text="I am an Editor" />

В C#:

var editor = new Editor { Text = "I am an Editor" };

Чтобы прочитать текст, обратитесь к свойству Text в C#:

var text = editor.Text;

Установка текста-заместителя

Редактор (Editor) может быть настроен на отображение текста-заполнителя, когда он не хранит пользовательский ввод. Это достигается установкой свойства Placeholder в строку и часто используется для указания типа содержимого, подходящего для редактора. Кроме того, можно управлять цветом текста-заглушки, установив свойство PlaceholderColor в значение Color:

XAML

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

В C#:

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

Запрет ввода текста

Запретить пользователям изменять текст в редакторе можно, установив свойство IsReadOnly, которое по умолчанию имеет значение false, в true:

XAML

<Editor Text="This is a read-only Editor"
       IsReadOnly="true" />

В C#:

var editor = new Editor { Text = "This is a read-only Editor", IsReadOnly = true });

Примечание. Свойство IsReadonly не изменяет визуальный вид редактора, в отличие от свойства IsEnabled, которое также изменяет визуальный вид редактора на серый.

Преобразование текста

Редактор (Editor) может преобразовать регистр текста, хранящегося в свойстве Text. Для этого необходимо установить для свойства TextTransform значение из перечисления TextTransform. Это перечисление имеет четыре значения:

  • None означает, что текст не будет преобразован.
  • Default означает, что будет использовано поведение по умолчанию для данной платформы. Это значение свойства TextTransform по умолчанию.
  • Lowercase указывает, что текст будет преобразован в нижний регистр.
  • Uppercase указывает, что текст будет преобразован в верхний регистр.

В следующем примере показано преобразование текста в верхний регистр:

XAML

<Editor Text="This text will be displayed in uppercase."
       TextTransform="Uppercase" />

Эквивалентный код на языке C# имеет вид:

Editor editor = new Editor
{
   Text = "This text will be displayed in uppercase.",
   TextTransform = TextTransform.Uppercase
};

Ограничение длины вводимых данных

Свойство MaxLength может быть использовано для ограничения длины входного сигнала, разрешенного для редактора. Это свойство должно быть установлено в целое положительное число:

XAML

<Editor ... MaxLength="10" />

В C#:

var editor = new Editor { ... MaxLength = 10 };

Значение свойства MaxLength, равное 0, означает, что ввод не будет разрешен, а значение int.MaxValue, которое является значением по умолчанию для редактора, указывает на отсутствие эффективного ограничения на количество символов, которые могут быть введены.

Интервал между символами

Интервал между символами может быть применен к редактору путем установки свойства Editor.CharacterSpacing в двойное значение:

XAML

<Editor ...
       CharacterSpacing="10" />

Эквивалентный код на языке C# имеет вид:

Editor editor = new editor { CharacterSpacing = 10 };

В результате символы в тексте, отображаемом редактором, будут отстоять друг от друга на независимые от устройства единицы CharacterSpacing.

Примечание. Значение свойства CharacterSpacing применяется к тексту, отображаемому с помощью свойств Text и Placeholder.

Авторазмер редактора

Редактор может быть автоматически изменен по размеру в соответствии с его содержимым путем установки свойства Editor.AutoSize в значение TextChanges, которое является значением перечисления EditorAutoSizeOption. Это перечисление имеет два значения:

  • Disabled указывает на то, что автоматическое изменение размеров отключено, и является значением по умолчанию.
  • TextChanges указывает на то, что автоматическое изменение размеров включено.

В коде это может быть реализовано следующим образом:

XAML

<Editor Text="Enter text here" AutoSize="TextChanges" />

В C#:

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

При включении функции автоматического изменения размеров высота редактора будет увеличиваться при заполнении его текстом и уменьшаться при удалении текста.

Примечание. Редактор не будет автоматически изменять размер, если установлено свойство HeightRequest.

Настройка клавиатуры

Клавиатура, отображаемая при взаимодействии пользователя с редактором, может быть программно настроена через свойство Keyboard на одно из следующих свойств класса Keyboard:

  • Chat – используется для текстовых сообщений и мест, где полезны emoji.
  • Default – клавиатура по умолчанию.
  • Email – используется при вводе адресов электронной почты.
  • Numeric – используется при вводе чисел.
  • Plain – используется при вводе текста без указания каких-либо флагов KeyboardFlags.
  • Telephone – используется при вводе телефонных номеров.
  • Text – используется при вводе текста.
  • Url – используется для ввода путей к файлам и веб-адресов.

В XAML это можно реализовать следующим образом:

<Editor Keyboard="Chat" />

Эквивалентный код на языке C# имеет вид:

var editor = new Editor { Keyboard = Keyboard.Chat };

Класс Keyboard также имеет фабричный метод Create, который можно использовать для настройки клавиатуры, задавая параметры капитализации, проверки орфографии и поведения предложений. В качестве аргументов метода указываются значения перечисления KeyboardFlags, а возвращается настроенная клавиатура. Перечисление KeyboardFlags содержит следующие значения:

  • None – клавиатура не добавляет никаких функций.
  • CapitalizeSentence – указывает, что первая буква первого слова каждого вводимого предложения будет автоматически выделяться заглавными буквами.
  • Проверка орфографии – указывает на то, что при вводе текста будет выполняться проверка орфографии.
  • Предложения – указывает на то, что при вводе текста будут предлагаться варианты завершения слов.
  • CapitalizeWord – указывает, что первая буква каждого слова будет автоматически набираться с заглавной буквы.
  • CapitalizeCharacter – указывает, что каждый символ будет автоматически набираться с заглавной буквы.
  • CapitalizeNone – указывает на то, что автоматическая капитализация производиться не будет.
  • All – указывает, что при вводе текста будет выполняться проверка орфографии, завершение слов и капитализация предложений.

В следующем примере кода XAML показано, как настроить клавиатуру по умолчанию, чтобы она предлагала завершение слов и прописывала все введенные символы заглавными буквами:

<Editor>
   <Editor.Keyboard>
       <Keyboard x:FactoryMethod="Create">
           <x:Arguments>
               <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
           </x:Arguments>
       </Keyboard>
   </Editor.Keyboard>
</Editor>

Эквивалентный код на языке C# имеет вид:

var editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Включение и отключение проверки орфографии

Свойство IsSpellCheckEnabled определяет, включена ли проверка орфографии. По умолчанию это свойство имеет значение true. При вводе пользователем текста опечатки отображаются.

Однако для некоторых сценариев ввода текста, например, для ввода имени пользователя, проверка орфографии вызывает негативные ощущения, поэтому ее следует отключить, установив свойство IsSpellCheckEnabled в false:

XAML

<Editor ... IsSpellCheckEnabled="false" />

В C#

var editor = new Editor { ... IsSpellCheckEnabled = false };

Примечание. Если свойство IsSpellCheckEnabled имеет значение false, а пользовательская клавиатура не используется, то встроенная программа проверки орфографии будет отключена. Однако если задана клавиатура, на которой отключена проверка правописания, например, Keyboard.Chat, свойство IsSpellCheckEnabled игнорируется. Поэтому это свойство нельзя использовать для включения проверки орфографии для клавиатуры, которая явно отключена.

Включение и отключение предсказания текста

Свойство IsTextPredictionEnabled определяет, включено ли предсказание текста и автоматическая коррекция текста. По умолчанию это свойство имеет значение true. При вводе текста пользователю представляются предсказания слов.

Однако для некоторых сценариев ввода текста, например, для ввода имени пользователя, предсказание и автоматическая коррекция текста создают негативные впечатления, и их следует отключить, установив свойство IsTextPredictionEnabled в false:

XAML

<Editor ... IsTextPredictionEnabled="false" />

C#

var editor = new Editor { ... IsTextPredictionEnabled = false };

Примечание. Если свойство IsTextPredictionEnabled имеет значение false, а пользовательская клавиатура не используется, то предсказание текста и автоматическая коррекция текста отключены. Однако если была задана клавиатура, на которой отключено предсказание текста, свойство IsTextPredictionEnabled игнорируется. Поэтому данное свойство нельзя использовать для включения предсказания текста для клавиатуры, в которой оно явно отключено.

Цвета

Редактор может быть настроен на применение пользовательского цвета фона с помощью свойства BackgroundColor. Особое внимание необходимо уделить тому, чтобы цвета были пригодны для использования на каждой платформе. Поскольку для каждой платформы используются различные значения цвета текста по умолчанию, может потребоваться задать собственный цвет фона для каждой платформы.

В C#:

public partial class EditorPage : ContentPage
{
   public EditorPage ()
   {
       InitializeComponent ();
       var layout = new StackLayout { Padding = new Thickness(5,10) };
       this.Content = layout;
       //dark blue on UWP & Android, light blue on iOS
       var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
       layout.Children.Add(editor);
   }
}

В 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="TextSample.EditorPage"
   Title="Editor Demo">
   <ContentPage.Content>
       <StackLayout Padding="5,10">
           <Editor>
               <Editor.BackgroundColor>
                   <OnPlatform x:TypeArguments="x:Color">
                       <On Platform="iOS" Value="#a4eaff" />
                       <On Platform="Android, UWP" Value="#2c3e50" />
                   </OnPlatform>
               </Editor.BackgroundColor>
           </Editor>
       </StackLayout>
   </ContentPage.Content>
</ContentPage>


На завершенное событие можно подписаться как в коде, так и в XAML:

В C#:

public partial class EditorPage : ContentPage
{
   public EditorPage ()
   {
       InitializeComponent ();
       var layout = new StackLayout { Padding = new Thickness(5,10) };
       this.Content = layout;
       var editor = new Editor ();
       editor.Completed += EditorCompleted;
       layout.Children.Add(editor);
   }
}

В 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="TextSample.EditorPage"
Title="Editor Demo">
   <ContentPage.Content>
       <StackLayout Padding="5,10">
           <Editor Completed="EditorCompleted" />
       </StackLayout>
   </ContentPage.Content>
</Contentpage>

TextChanged

Событие TextChanged вызывается при изменении текста в редакторе. Обработчик этого события принимает экземпляр TextChangedEventArgs. TextChangedEventArgs предоставляет доступ к старому и новому значениям текста редактора через свойства OldTextValue и NewTextValue:

C#

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
   var oldText = e.OldTextValue;
   var newText = e.NewTextValue;
}

На завершенное событие можно подписаться как в коде, так и в XAML:

В коде:

C#

public partial class EditorPage : ContentPage
{
   public EditorPage ()
   {
       InitializeComponent ();
       var layout = new StackLayout { Padding = new Thickness(5,10) };
       this.Content = layout;
       var editor = new Editor ();
       editor.TextChanged += EditorTextChanged;
       layout.Children.Add(editor);
   }
}

В 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="TextSample.EditorPage"
Title="Editor Demo">
   <ContentPage.Content>
       <StackLayout Padding="5,10">
           <Editor TextChanged="EditorTextChanged" />
       </StackLayout>
   </ContentPage.Content>
</ContentPage>
Оглавление

Материалы по теме