Встроенные компоненты
Ниже представлены некоторые из наиболее часто используемых компонентов Avalonia, организованные по категориям:
Компоненты компоновки
| Компонент | Описание |
|---|---|
| Border | Оформляет один дочерний элемент границей и фоном. |
| Canvas | Отображает дочерние компоненты в указанных позициях. |
| Dock Panel | Размещает дочерние компоненты вдоль указанных краев (верхний, нижний, левый, правый), при этом один из них заполняет оставшееся пространство. |
| Expander | Имеет область заголовка (всегда видимую) и сворачиваемую секцию содержимого (один дочерний элемент). |
| Grid | Размещает дочерние компоненты в ячейках сетки, расположенных по строкам и столбцам. Ячейки могут охватывать несколько строк и столбцов. |
| Grid Splitter | Может быть добавлен в сетку, чтобы позволить пользователю изменять размер строк или столбцов во время выполнения. |
| Panel | Укладывает дочерние компоненты друг на друга. |
| Relative Panel | Позволяет размещать несколько дочерних компонентов. Положение и выравнивание дочерних компонентов можно указать относительно самой панели или относительно других дочерних компонентов. Размер дочерних компонентов может быть указан явно или вычислен на основе отношений и выравниваний. |
| Scroll Viewer | Добавляет полосы прокрутки и поведение прокрутки, если (единственный) дочерний элемент больше доступного пространства. |
| Split View | Добавляет сворачиваемую панель к краю своей зоны содержимого (один дочерний элемент). |
| Stack Panel | Позволяет размещать несколько дочерних компонентов, расположенных последовательно, горизонтально или вертикально. |
| Tab Control | Компонент вкладок позволяет разделить представление на элементы вкладок. |
| Uniform Grid | Позволяет размещать несколько дочерних компонентов в сетке с ячейками одинакового размера столбцов и строк. |
| Wrap Panel | Располагает дочерние компоненты последовательно слева направо, пока они помещаются по ширине. Начинает новую строку, когда не остается места. |
Кнопки
| Компонент | Описание |
|---|---|
| Button | Базовый компонент кнопки - может отображать текст, значок или и то, и другое. Имеет стандартное поведение при нажатии. |
| Repeat Button | Кнопка, которая многократно вызывает событие нажатия, когда её нажимают и удерживают. |
| Radio Button | Кнопка, которая имеет выбранное состояние. Может быть помещена в группу, так что выбор одной кнопки отменяет выбор всех остальных в группе. |
| Toggle Button | Кнопка, которая имеет выбранное и невыбранное состояния. Последующие нажатия 'переключают' это состояние. Псевдокласс 'checked' позволяет применять различные стили к выбранному и невыбранному состояниям. |
| Button Spinner | Компонент с двумя кнопками вращения и зоной содержимого. |
| Split Button | Функционирует как кнопка с основной и дополнительной частями, которые могут быть нажаты независимо друг от друга. Основная часть работает как стандартная кнопка, а дополнительная открывает всплывающую панель с дополнительными действиями. |
| Toggle Split Button | Функционирует как кнопка с основной и дополнительной частями, которые могут быть нажаты независимо друг от друга. Основная часть работает как переключаемая кнопка, а дополнительная открывает всплывающую панель с допо лнительными действиями. |
Компоненты повторяющихся данных
Эти компоненты отображают повторяющиеся данные в табличном или списочном формате:
| Компонент | Описание |
|---|---|
| Data Grid | Отображает данные в настраиваемой сетке. |
| Items Control | Отображает коллекцию элементов из привязанного источника данных. |
| Items Repeater | Отображает повторяющиеся данные из привязанного источника данных. Имеет как шаблон компоновки, так и шаблон данных. |
| List Box | Компонент с элементами, которые могут быть выбраны. |
| Combo Box | Компонент с выпадающим списком, элементы которого могут быть выбраны. |
Отображение и редактирование текста
| Компонент | Описание |
|---|---|
| Auto Complete Box | Компонент, который показывает текстовое поле для ввода пользователем и выпадающий список, содержащий возможные совпадения на основе того, что было введено. |
| Text Block | Компонент, который отображает блок текста. Только для чтения. |
| Text Box | Используется для отображения или редактирования текста без ограничений форматирования. |
| Masked Text Box | Используется для отображения текста в формате, содержащемся в маске; или для редактирования текста с использованием маски формата, чтобы предотвратить неверный ввод пользователем. |
Выбор значений
| Компонент | Тип | Описание |
|---|---|---|
| Check Box | Boolean | Значение 'истина' представлено как отметка. Взаимодействие с помощью нажатия переключает значение. Имеет возможность отображать 'неизвестное' значение. |
| Slider | Double | Относительное значение в сравнении с максимальным и минимальным значениями, представленное как положение вдоль длины дорожки ползунка. Перетаскивание кнопки ползунка может изменять значение между максимальным и минимальным значениями. Взаимодействие с клавиатурой и нажатия также могут изменять значение. |
| Calendar | DateTime | Календарь - это компонент для выбора пользователями дат или диапазонов дат. |
| Calendar Date Picker | DateTime | Расширение компонента календаря, которое включает текстовое поле и кнопку. |
| Color Picker | Color / HsvColor | Выбор цвета поддерживает выбор и редактирование цветов пользователем с помощью спектра, палитры и ползунков компонентов. Он также поддерживает необязательный альфа-компонент, цветовые модели RGB или HSV и шестнадцатеричные значения цветов. |
| Date Picker | DateTime | Выбор даты имеет три компонента 'прокрутки', которые позволяют пользователю выбрать значение даты. |
| Time Picker | TimeSpan | Выбор времени имеет три компонента 'прокрутки', которые позволяют пользователю выбрать время из часов, минут и секунд. |
Отображение изображений
| Компонент | Описание |
|---|---|
| Image | Отображает растровое или векторное изображение. |
| Path Icon | Рисует векторное изображение, используя текущий Foreground. |
Меню и всплывающие окна
| Компонент | Описание |
|---|---|
| Menu | Отображает меню приложения. |
| Flyouts | Прикрепляет всплывающее окно или контекстное меню к компоненту. |
| Tool Tip | Отображает всплывающую подсказку при наведении на компонент. |