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

Настройка элемента управления Entry

  • Статья

Элемент управления Xamarin.Forms Entry допускает редактирование одной строки текста. В этой статье показано, как создать пользовательский отрисовщик для элемента управления Entry, чтобы переопределить собственный способ отрисовки по умолчанию с помощью настройки для конкретной платформы.

Каждый элемент управления Xamarin.Forms имеет сопутствующий отрисовщик для каждой платформы, который создает экземпляр собственного элемента управления. Когда элемент управления Entry отображается в приложении Xamarin.Forms, в iOS создается экземпляр класса EntryRenderer, который, в свою очередь, создает собственный элемент управления UITextField. На платформе Android класс EntryRenderer создает элемент управления EditText. На универсальной платформе Windows (UWP) класс EntryRenderer создает элемент управления TextBox. Дополнительные сведения об отрисовщике и классах собственных элементов управления, с которыми сопоставляются элементы управления Xamarin.Forms, см. в статье Базовые классы и собственные элементы управления отрисовщика.

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

Связь между элементом управления Entry и реализующими нативными элементами управления

Процесс отрисовки можно использовать для реализации настроек для конкретных платформ путем создания пользовательского отрисовщика для элемента управления Entry на каждой платформе. Этот процесс выглядит следующим образом:

  1. Создание пользовательского элемента управления Xamarin.Forms.
  2. Использование пользовательского элемента управления в Xamarin.Forms.
  3. Создание пользовательского отрисовщика для элемента управления на каждой платформе.

Мы рассмотрим каждый пункт по порядку, чтобы реализовать элемент управления Entry с разным цветом фона на каждой платформе.

Внимание

В этой статье описывается, как создать простой пользовательский отрисовщик. Однако чтобы реализовать элемент управления Entry с разным цветом фона на каждой платформе, создавать пользовательский отрисовщик необязательно. Проще будет воспользоваться классом Device или расширением разметки OnPlatform, указав значения для конкретных платформ. Дополнительные сведения см. в разделах Указание значений для конкретных платформ и Расширение разметки OnPlatform.

Создание пользовательского элемента управления Entry

Пользовательский элемент управления Entry можно создать путем создания подкласса элемента управления Entry, как показано в следующем примере кода.

public class MyEntry : Entry
{
}

Элемент управления MyEntry создается в проекте библиотеки .NET Standard и представляет собой попросту элемент управления Entry. Настройка элемента управления будет осуществляться в пользовательском отрисовщике, поэтому дополнительная реализация в элементе управления MyEntry не требуется.

Использование пользовательского элемента управления

На элемент управления MyEntry можно ссылаться в XAML в проекте библиотеки .NET Standard, объявив пространство имен для его расположения и используя префикс пространства имен в элементе управления. В следующем примере кода показано, как элемент управления MyEntry может использоваться страницей XAML.

<ContentPage ...
    xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
    ...>
    ...
    <local:MyEntry Text="In Shared Code" />
    ...
</ContentPage>

Префикс пространства имен local может иметь любое имя. Тем не менее значения clr-namespace и assembly должны соответствовать данным пользовательского элемента управления. После объявления пространства имен префикс используется для ссылки на пользовательский элемент управления.

В следующем примере кода показано, как элемент управления MyEntry может использоваться страницей C#:

public class MainPage : ContentPage
{
  public MainPage ()
  {
    Content = new StackLayout {
      Children = {
        new Label {
          Text = "Hello, Custom Renderer !",
        },
        new MyEntry {
          Text = "In Shared Code",
        }
      },
      VerticalOptions = LayoutOptions.CenterAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };
  }
}

Этот код создает объект ContentPage, который отображает элементы управления Label и MyEntry, размещаемые в центре страницы как по вертикали, так и по горизонтали.

Теперь в каждый проект приложения можно добавить пользовательский отрисовщик для настройки внешнего вида элемента управления на каждой платформе.

Создание пользовательского отрисовщика на каждой платформе

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

  1. Создайте подкласс класса EntryRenderer, который отрисовывает собственный элемент управления.
  2. Переопределите метод OnElementChanged, который отрисовывает собственный элемент управления, и напишите логику для его настройки. Этот метод вызывается при создании соответствующего элемента управления Xamarin.Forms.
  3. Добавьте атрибут ExportRenderer в класс настраиваемого отрисовщика, чтобы указать, что он будет использоваться для отрисовки элемента управления Xamarin.Forms. Этот атрибут используется для регистрации пользовательского отрисовщика в Xamarin.Forms.

Примечание.

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

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

Задачи проекта пользовательского отрисовщика MyEntry

Элемент управления MyEntry отрисовывается с помощью зависящих от платформы классов MyEntryRenderer, которые являются производными от класса EntryRenderer для каждой платформы. Это приводит к тому, что каждый элемент управления MyEntry отрисовывается с использованием цвета фона для конкретной платформы, как показано на следующих снимках экрана.

Элемент управления MyEntry на каждой платформе

Класс EntryRenderer предоставляет метод OnElementChanged, который вызывается при создании элемента управления Xamarin.Forms для отрисовки соответствующего собственного элемента управления. Этот метод принимает параметр ElementChangedEventArgs, содержащий свойства OldElement и NewElement. Эти свойства представляют элемент Xamarin.Forms, к которому был присоединен отрисовщик, и элемент Xamarin.Forms, к которому присоединен отрисовщик, соответственно. В примере приложения свойство OldElement будет иметь значение null, а свойство NewElement будет содержать ссылку на элемент управления MyEntry.

Настройка собственного элемента управления выполняется в переопределенной версии метода OnElementChanged в классе MyEntryRenderer. Типизированную ссылку на собственный элемент управления, используемый на платформе, можно получить через свойство Control. Кроме того, ссылку на отрисовываемый элемент управления Xamarin.Forms можно получить с помощью свойства Element, хотя оно не используется в примере приложения.

Каждый класс пользовательского отрисовщика дополняется атрибутом ExportRenderer, который регистрирует отрисовщик в Xamarin.Forms. Атрибут принимает два параметра — имя типа отрисовываемого элемента управления Xamarin.Forms и имя типа пользовательского отрисовщика. Префикс assembly в атрибуте указывает, что атрибут применяется ко всей сборке.

В следующих разделах рассматривается реализация класса пользовательского отрисовщика MyEntryRenderer для каждой платформы.

Создание пользовательского отрисовщика в iOS

В следующем примере кода показан пользовательский отрисовщик для платформы iOS:

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged (e);

            if (Control != null) {
                // do whatever you want to the UITextField here!
                Control.BackgroundColor = UIColor.FromRGB (204, 153, 255);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}

В результате вызова метода OnElementChanged базового класса создается элемент управления iOS UITextField со ссылкой на элемент управления, присваиваемый свойству Control отрисовщика. Затем с помощью метода UIColor.FromRGB задается светло-сиреневый цвет фона.

Создание пользовательского отрисовщика в Android

В следующем примере кода показан пользовательский отрисовщик для платформы Android:

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.Android
{
    class MyEntryRenderer : EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
            }
        }
    }
}

В результате вызова метода OnElementChanged базового класса создается элемент управления Android EditText со ссылкой на элемент управления, присваиваемый свойству Control отрисовщика. Затем с помощью метода Control.SetBackgroundColor задается светло-зеленый цвет фона.

Создание пользовательского отрисовщика на универсальной платформе Windows

В следующем примере кода показан пользовательский отрисовщик для платформы UWP:

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.UWP
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Cyan);
            }
        }
    }
}

В результате вызова метода OnElementChanged базового класса создается элемент управления TextBox со ссылкой на элемент управления, присваиваемый свойству Control отрисовщика. Затем путем создания экземпляра SolidColorBrush задается голубой цвет фона.

Итоги

В этой статье показано, как создать пользовательский отрисовщик элементов управления для Xamarin.FormsEntry элемента управления, что позволяет разработчикам переопределить встроенную отрисовку по умолчанию с помощью собственной отрисовки для конкретной платформы. Пользовательские отрисовщики обеспечивают удобный подход к настройке внешнего вида элементов управления Xamarin.Forms. Они могут использоваться для незначительных изменений стиля или сложной настройки макетов и поведения в зависимости от платформы.