Choosing A Custom Control Type (рус: Выбор типа пользовательского компонента UI)

Avalonia позволяет использовать различные способы создания пользовательских компонентов, которые помогают решать конкретные потребности в приложении. Понимание различных типов пользовательских компонентов, поможет вам эффективнее выбирать более подходящий вариант решения проблемы. Тремя самыми распространенными типами являются UserControls (рус: Пользовательские компоненты), lookless controls (рус: компоненты без внешнего вида) и custom-drawn controls (рус: нарисованные компоненты).

UserControl (рус: Пользовательские компоненты)

UserControl (рус: Пользовательские компоненты) - это высокоуровневый подход к созданию пользовательских компонентов в Avalonia. Он позволяет создать компонент, путем объединения существующих и определения макета через XAML. UserControl (рус: Пользовательские компоненты) действует как контейнер, который инкапсулирует несколько компонентов и обеспечивает единый UI.

к сведению

Как правило, UserControls (рус: Пользовательские компоненты) используются для представления в приложении специализированных view, таких как "Сведения о пользователе", и не должны использоваться в UI как элементы общего назначения.

Создание UserControl (рус: Пользовательского компонента) состоит из нескольких шагов:

1. Define the XAML (рус: Определить XAML): Создание XAML-файла для нового UserControl (рус: Пользовательского компонента), в котором определяются макет и внешний вид компонента, путем размещения других компонентов, изменения свойств и применения стилей.

2. Code-behind: Опционально, вы можете добавить code-behind логику для обработки событий, изменения поведения или внесения дополнительной функциональности для создаваемого компонента.

3. Reuse and Customization (рус: Переиспользование и настройка): Новый компонент может быть легко переиспользован и настроен в приложении. Это особенно полезно, если вы хотите инкапсулировать определенный набор компонентов или поведений в переиспользуемом компоненте или view.

Custom Control - Sample on GitHub

Templated (Lookless) Controls (рус: Шаблонные компоненты (без внешнего вида))

Templated controls (рус: Шаблонные компоненты) (также известные как Lookless controls (рус: компоненты без внешнего вида) - это более продвинутые и гибкий подход к созданию пользовательских компонентов в Avalonia. Он отделяет поведение и логику компонента от внешнего вида, что позволяет разработчику создавать стили и шаблоны для компонента.

С помощью templated controls (рус: шаблонных компонентов) вы определяете поведение и свойства комопнента в code-behind классе, в то время как визуальное представление задается с помощью определенных в XAML шаблонов компонента. Такое разделение позволяет разработчику настраивать внешний вид компонента без изменения его базового поведения.

к сведению

Templated controls (рус: Шаблонные компоненты) обычно используются для элементов UI общего назначения, которые не являются специализированными для бизнес-логики и требуют различных тем и стилей. Большинство built-in controls (рус: встроенных компонентов), поддерживаемых Avalonia, являются templated controls (рус: шаблонными компонентами).

Создание templated control (рус: шаблонного компонента) состоит из следующих шагов:

1. Определите класс компонента: Создайте новый класс и наследуйте его от TemplatedControl. Данный класс определяет поведение, свойства и события компонента.

2. Control Template (рус: Шаблон компонента): Для определения внешнего вида и структуры компонента, создайте в XAML ControlTheme (рус: тему компонента). Control template (рус: Шаблон компонента) оопределяет части компонента и его стили.

3. Стилизация и шаблонизация: Разработчик приложения может настроить внешний вид компонента путем изменения control template (рус: шаблона компонента) или применив стили. Это обеспечивает согласованный и унифицированный дизайн интерфейса в приложении.

Templated controls (рус: Шаблонные компоненты) обеспечивают отличную гибкость и возможность переиспользования, что делает их идеальными для ситуаций, где требуется проводить стилизацию под различные темы или адаптировать под предпочтения пользователя.

Custom-drawn Controls (рус: Нарисованные компоненты)

Custom-drawn controls (рус: Нарисованные компоненты) обеспечивают наибольшую гибкость настроек в Avalonia. С помощью него, вы получаете полный контроль над отображением визуальных элементов компонента, что позволяет создавать уникальные и комплексные варианты отображения.

к сведению

Custom-drawn controls (рус: Нарисованные компоненты) обычно используются в ситуациях, когда требуется отобразить не интерактивный графический элемент. Как правило, он не зависит от выбранной темы.

Для создание custom-drawn control (рус: нарисованного компонента), вы должны переопределить метод Render и использовать низкоуровневое API для отрисовки внешнего вида компонета, такое как DrawingContext. Данный подход обеспечивает полный контроль над каждым пикселем отображаемого компонента.

Создание custom-drawn control (рус: нарисованного компонента) состоит из следующих шагов:

1. Определите класс компонента: Создайте новый класс, наследованный от Control. Он будет определять поведение и логику отображения компонента.

2. Переопределите метод отрисовки: В классе Control, переопределите метод Render, а затем используйте DrawingContext для отрисовки его содержимого.