Конфигурирование виджета "Набор"
Выбор компоновки для виджета "Набор"
Компоновку виджета можно сконфигурировать с помощью свойства Layout.
Гибкая - адаптивная компоновка на основе правил компоновки Flexbox. В этом режиме для каждой строки размещается столько ячеек, сколько может поместиться в доступном пространстве. Когда доступное пространство ограничивается, ячейки автоматически переносятся на новую строку. Каждая ячейка расширяется до заполнения доступного пространства в строке или сжимается до минимального размера, необходимого для отображения содержимого ячейки. Когда достигается этот предел, ячейка переносится на новую строку. Чтобы управлять горизонтальным выравниванием ячеек в последней строке, используйте свойство AlignLastRow.
Сетка - адаптивная компоновка, отображающая набор как сетку с ячейками, организованными в виде строк и столбцов. В этом режиме в каждой строке набора умещается одинаковое число ячеек в зависимости от доступного пространства и ширины ячеек. Если строка не может быть отображена с доступной шириной для строки, последняя ячейка переносится на новую строку, а число столбцов в компоновке уменьшается на единицу. Ширина столбца задается так, чтобы умещалась самая широкая ячейка столбца, а высота строки задается так, чтобы умещалась самая высокая ячейка в строке.
Таблица - ячейки набора отображаются в виде одного столбца.
Можно управлять выравниванием ячеек в строке или столбце, используя свойства VerticalAlignment и HorizontalAlignment. По умолчанию выравнивание по горизонтали в строках задается для распределения ячеек с равным интервалом между ячейками. Пространством между ячейками можно управлять с помощью свойств ColumnGap и RowGap. Чтобы управлять выравниванием последней строки набора в компоновке сетки, используйте свойство LeftAlignLastRow. Чтобы сделать высоту всех строк в наборе одинаковой, задайте для свойства UniformHeight значение true. Высота строки увеличивается так, чтобы она соответствовала самой высокой строке в наборе.
 | Можно комбинировать различные компоновки, используя вложенные виджеты "Набор". Например, можно создать набор верхнего уровня с компоновкой Таблица и вложенный набор с компоновкой Гибкая. |
Группирование строк набора по разделам
Строки набора можно группировать в разделах с верхним и нижним колонтитулами, которые содержат заголовки и метки, визуально разделяющие группы или категории в наборе. Это позволяет упорядочить и пометить части набора, что облегчает пользователям навигацию и чтение данных. Чтобы группировать ячейки в виджете "Набор", необходимо указать столбец с идентификатором категории для соответствующих ячеек в таблице данных набора. Чтобы сгруппировать строки набора, выполните следующие шаги.
1. В источнике данных набора добавьте столбец, содержащий идентификатор категории. Этот столбец должен содержать значения, представляющие категории или группы, которые требуется создать в наборе.
2. Создайте два мэшапа для использования в качестве шаблона для верхних и нижних колонтитулов раздела. Эти мэшапы могут содержать метки, изображения или другие элементы интерфейса пользователя, которые должны использоваться в колонтитулах.
3. Настройте свойства виджета "Набор" на панели Свойства.
◦ Рядом со свойством SectionField выберите имя столбца, который содержит данные категории.
◦ Задайте для свойств SectionHeaders и SectionFooters значения Видимый или Закрепленный. При закреплении верхние и нижние колонтитулы фиксируются в верхней и нижней части порта просмотра во время прокрутки раздела.
◦ Затем для свойств HeaderMashup и FooterMashup выберите мэшап, созданный на шаге 2.
◦ Для сортировки набора можно использовать свойство SortField.
◦ Чтобы задать высоты колонтитулов, укажите числовые значения в свойствах HeaderHeight и FooterHeight.
◦ Если требуется передавать динамическое содержимое в колонтитулы, используйте свойства HeaderSectionParam и FooterSectionParam, чтобы привязать имена столбцов из источника данных к параметрам мэшапа.
4. Сохраните мэшап.
Во время выполнения ячейки группируются на основании столбца таблицы данных, выбранного для свойства SectionField.
Конфигурирование пространства между ячейками набора и вокруг них
Чтобы сконфигурировать пространство между ячейками в наборе, используйте свойства ColumnGap и RowGap.
Чтобы сконфигурировать пространство между набором ячеек и границей виджета, используйте свойства PaddingRight, PaddingLeft, PaddingTop и PaddingBottom.
Добавление кнопки меню в ячейки набора
Можно отобразить кнопку меню под каждой ячейкой в наборе, добавив определение состояния в свойство виджета CellMenu. Кнопка меню позволяет пользователям выполнять ряд действий, специфичных для каждого элемента в наборе. Например, можно определить пункты меню, которые позволяют пользователям править, удалять или просматривать дополнительные сведения о ячейке. Чтобы добавить кнопку меню в набор, выполните следующие шаги.
1. В Composer создайте определение состояния, определяющее каждый пункт меню, который требуется отобразить для ячеек набора.
| | Применение цветов и стилей шрифта или фона к каждому элементу меню с помощью определения стиля не поддерживается. Поддерживаются только значки. |
2. В Mashup Builder выберите виджет "Набор" на канве или с помощью панели Проводник.
3. На панели Свойства укажите определение состояния, созданное для свойства CellMenu.
Для каждого пункта меню, определенного в определении состояния, добавляется событие в следующем формате: CellMenu:<MenuItem>
4. Привяжите события для каждого пункта меню к сервису, функции или виджету, чтобы инициировать действие при щелчке по пункту меню.
5. Щелкните Сохранить, а затем просмотрите мэшап.
Во время выполнения под каждой ячейкой добавляется кнопка меню, и элементы меню отображаются на основе выбранной сущности определения состояния.
