Перейти к основному содержимому

Компоненты

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

Что такое компоненты?​

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

  • Кнопки: Кнопки обычно используются для запуска действий при нажатии. Они могут содержать текст, иконки или и то, и другое, и часто используются для таких задач, как отправка форм, открытие диалоговых окон или выполнение команд.
  • Текстовые поля: Текстовые поля позволяют пользователям вводить и редактировать текст. Они используются для получения пользовательского ввода, такого как имена пользователей, пароли или любая форма текстовой информации. Текстовые поля также могут быть настроены для определенных шаблонов ввода и валидации.
  • Метки: Метки используются для отображения статического текста или подписей для других элементов управления. Они предоставляют дополнительную информацию или контекст пользователю и обычно не интерактивны.
  • Флажки и Переключатели: Флажки и переключатели используются для выбора и многовариантных опций. Флажки позволяют пользователям выбрать один или несколько вариантов, в то время как переключатели позволяют выбрать только один вариант из группы.
  • Ползунки: Ползунки используются для выбора значения из диапазона. Они обеспечивают визуальное представление значения, которое можно регулировать, перетаскивая ручку вдоль дорожки. Ползунки обычно используются для настроек, таких как регулировка громкости или настройка изображения.
  • Списки и Выпадающие списки: Списки и выпадающие списки позволяют пользователям выбирать элемент из списка или выпадающего меню. Списки отображают несколько элементов одновременно, в то время как выпадающие списки изначально показывают один элемент и раскрываются для отображения списка при нажатии.

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

Начало работы со встроенными компонентами​

Чтобы начать использовать компоненты в Avalonia UI, вы можете обратиться к документации для каждого типа компонентов. Документация предоставляет подробные объяснения, примеры и фрагменты кода, чтобы помочь вам понять и эффективно использовать компоненты.

Изучив эти ресурсы, вы получите прочную основу для использования компонентов в Avalonia UI и сможете создавать богатые и интерактивные пользовательские интерфейсы для ваших приложений.

Типы встроенных компонентов​

Встроенные компоненты Avalonia UI можно условно классифицировать на следующие типы:

  • Отрисовываемые компоненты
  • Компоненты компоновки
  • Пользовательские компоненты*
  • Шаблонизированные компоненты
    • Полностью настраиваемые
    • Частично настраиваемые

*Пользовательские компоненты доступны только для приложений.

примечание

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

Drawn Controls​

Drawn controls are those that are responsible for generating their own geometry or bitmaps and rendering themselves. Examples of these controls include Border, TextBlock and Image. Drawn controls are the foundational controls used to construct everything else.

Most drawn controls have standard properties that can be used to adjust their appearance and size but they do not allow re-templating. This means as an app developer you can’t change the functionality or style of these controls without dropping into C#, deriving a new version of the control and intercepting the rendering methods.

Компоненты компоновки​

Компоненты компоновки особенны тем, что сами по себе не имеют внешнего вида. Компоненты компоновки, такие как Grid, StackPanel и другие, отвечают за определение расположения своих дочерних элементов и выступают в роли родительского контейнера. Дочерние компоненты отвечают за отрисовку пользовательского интерфейса, в то время как родительский компонент компоновки просто устанавливает размер и положение (которые сами по себе не имеют внешнего вида).

Для разработчиков приложений не очень характерно изменение компонентов компоновки, предоставляемых фреймворком.

примечание

Некоторые компоненты компоновки, такие как Grid, имеют свойства, например, Background, для упрощения типичных случаев использования. Использование этих свойств придает некоторый внешний вид этим компонентам.

Пользовательские компоненты​

Avalonia UI сама по себе никогда не предоставляет UserControl, поскольку они не считаются универсальными. Для получения дополнительной информации о создании и использовании UserControl в вашем приложении см. раздел Выбор типа пользовательского компонента.

Шаблонизированные компоненты​

Большинство стандартных компонентов в Avalonia UI являются шаблонизированными компонентами, что означает, что их визуальный вид определяется в шаблоне компонента XAML, отделенном от функциональности. Это основа концепции безвнешних компонентов, которая возникла в WPF.

Разработчики приложений могут изменить шаблон XAML шаблонизированного компонента и сделать его совершенно другим. Эта функциональность доступна не во всех UI-фреймворках и является одной из самых мощных возможностей фреймворков пользовательского интерфейса на основе XAML.

примечание

Изменение шаблонов компонентов - это последнее средство для разработчиков приложений. Это также означает, что вы будете отвечать за обновление шаблона при любых изменениях в исходном коде. Вместо этого лучше:

  1. Попытаться использовать существующие свойства для настройки компонента
  2. Создать новый стиль с использованием чрезвычайно мощных селекторов стилей Avalonia UI для изменения того, что вам нужно в существующем шаблоне
  3. В крайнем случае, изменить шаблон

Fully Customizable​

The majority of templated controls in Avalonia UI are fully customizable. This means it is possible to completely replace the control’s template and change its appearance. The Button control is a good example but all templated controls in Avalonia UI try to be fully customizable by default. With a fully customizable templated control the app has near total ability to style or change everything you see drawn in the UI.

Частично настраиваемые​

На практике иметь полностью заменяемые шаблоны компонентов не всегда возможно. Существует спектр в дизайне компонентов между легкой поддержкой общих случаев использования и созданием полностью перешаблонизируемого компонента. Для компонентов высокой сложности, таких как DataGrid, спектр смещается в сторону поддержки предполагаемых случаев использования, и компонент не может и не должен быть полностью перешаблонизирован. Эти компоненты также обычно имеют очень большое количество частей шаблона (необходимых элементов, которые напрямую используются реализацией компонента на C#).

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

Частично настраиваемые шаблонизированные компоненты порядка DataGrid редки в качестве компонентов первого уровня, предоставляемых самим фреймворком.

Создание компонентов​

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