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

Отрисовка карточек в приложении

  • Статья

Вы можете легко отображать адаптивные карточки внутри приложения. Мы предоставляем пакеты SDK для всех распространенных платформ, а также предлагаем подробную спецификацию для создания собственного отрисовщика адаптивных карточек.

  1. Установите пакет SDK отрисовщика для целевой платформы.
  2. Создайте экземпляр отрисовщика, настроенный с учетом стиля, правил и обработчиков событий действий своего приложения.
  3. Отобразите карточку в собственном пользовательском интерфейсе, автоматически оформленную в стиле своего приложения.

Пакеты SDK адаптивных карточек

Платформа Установка Сборка Docs Состояние
JavaScript Установка с помощью npm Источник Docs Состояние сборки
.NET WPF Установка с помощью NuGet Источник Docs Состояние сборки
.NET HTML Установка с помощью NuGet Источник Docs Состояние сборки
Универсальная платформа Windows Установка с помощью NuGet Источник Docs Состояние сборки
WinUI 3 Установка с помощью NuGet Источник Docs Состояние сборки
Android Maven Central Источник Docs Состояние сборки
iOS CocoaPods Источник Docs Состояние сборки

Создание экземпляра отрисовщика

Следующий шаг — создание экземпляра AdaptiveCardRenderer.

Перехват событий действий

По умолчанию действия отображаются в виде кнопок на карточке, но приложение может сделать их поведение таким, каким вам требуется. Каждый пакет SDK содержит эквивалент события OnAction, которое необходимо обрабатывать.

  • Action.OpenUrl: открытие указанного url.
  • Action.Submit: получение результата отправки и его пересылка в источник. Способ отправки в источник карточки полностью зависит от вас.
  • Action.ShowCard: вызывает диалоговое окно и отображает в нем вложенную карточку. Обратите внимание на то, что это действие нужно обрабатывать, только если параметр ShowCardActionMode имеет значение popup.

Визуализация карточки

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

Настройка

Есть несколько способов настройки отрисовки объектов.

HostConfig

HostConfig — это общий кроссплатформенный объект конфигурации, управляющий базовым стилем и поведением карточек внутри приложения. Он определяет размеры шрифтов, расстояния между элементами, цвета, число поддерживаемых действий и т. д.

Стиль собственной платформы

Большинство платформ пользовательского интерфейса позволяет оформить отображаемую карточку в стиле платформы собственного пользовательского интерфейса. Например, в HTML можно указать классы CSS для HTML, а в XAML можно передать пользовательский объект ResourceDictionary для точного управления выводом.

Настройка отрисовки каждого элемента

Каждый пакет SDK позволяет переопределить отрисовку любого элемента или даже добавить поддержку совершенно новых определяемых вами элементов. Например, можно изменить отрисовщик Input.Date таким образом, чтобы он выдавал ваш пользовательский элемент управления, сохранив остальные выходные данные отрисовщика. Или можно добавить поддержку настраиваемого элемента Rating, который вы определяете.