Инструменты и примеры

Конструктор карточек

Требуется инструмент для разработки карточек? Вам не стоит искать дальше, чем браузерный конструктор https://adaptivecards.microsoft.com/designer адаптивных карт.

Внедрение конструктора в приложение

Но зачем отправлять пользователей туда, когда вы можете внедрить конструктор карточек непосредственно в веб-приложение с помощью нашей библиотеки JavaScript.

Ознакомьтесь с пакетом adaptivecards-designer, чтобы приступить к работе.

Проверка схемы

Проверка схемы — это мощный способ упрощения разработки и обеспечения работы инструментов.

Мы предоставили полный файл схемы JSON для редактирования и проверки адаптивных карточек в json. Обратите внимание, что URL-адрес схемы имеет версию; более новые версии адаптивных карт будут иметь соответствующий URL-адрес.

В Visual Studio и Visual Studio Code вы можете получить автоматическую функцию Intellisense, включив ссылку $schema .

Плохо

Автозаполнение

Example

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Расширения для Visual Studio Code

Адаптивные карточки Studio

Маркетплейс

С помощью AdaptiveCards Studio вы можете создавать карточки непосредственно в Visual Studio Code. Расширение автоматически обнаруживает все адаптивные карточки в рабочем пространстве и позволяет легко редактировать шаблон карты и образцы данных.

Узнайте больше и установите его из Visual Studio Code Marketplace

Средство просмотра адаптивных карточек

Мы создали расширение кода Visual Studio, которое позволяет визуализировать карточку, которую вы редактируете в режиме реального времени внутри самого редактора.

Расширение

Чтобы установить, откройте Extensions Marketplace и выполните поиск Adaptive Card Viewer.

Маркетплейс

Usage

При редактировании файла .json с использованием свойства адаптивной карточки $schema вы можете просмотреть его с помощью Ctrl+Shift+V A.

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Options

Следующий параметр Visual Studio Code доступен для средства просмотра Адаптивных карточек. Это можно задать в параметрах пользователя или параметрах рабочей области.

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

Пример визуализатора WPF

Пример проекта визуализатора WPF позволяет визуализировать карточки с помощью WPF/Xaml на компьютере Windows. hostconfig Редактор встроен для редактирования и просмотра параметров конфигурации узла. Сохраните эти параметры в формате JSON, чтобы использовать их при отрисовке в приложении.

Визуализатор wpf

Образец применения ImageRender WPF

Пример проекта ImageRender преобразует любую карточку в PNG из командной строки с помощью WPF.

Last updated on 2025-12-18