通过

工具和示例

卡片设计器

需要一个工具来设计卡片？ 不妨选择基于浏览器的自适应卡片设计器，地址是 https://adaptivecards.microsoft.com/designer。

设计器屏幕截图

将设计器嵌入应用

为什么要将用户发送到那里，而不是使用我们的 JavaScript 库将卡片设计器直接嵌入到您的 Web应用中呢？

请查看 自适应卡片设计器 包以开始使用。

架构验证

架构验证是一种功能强大的方法，用于简化创作和启用工具。

我们提供了完整的 JSON 架构文件 ，用于在 json 中编辑和验证自适应卡片。 请注意，架构 URL 已进行版本化，较新版本的自适应卡将具备相应的 URL。

在 Visual Studio 和 Visual Studio Code 中，通过包含 $schema 引用，可以获得自动的 Intellisense。

坏

autocomplete

Example

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

Visual Studio Code 扩展

自适应卡片设计器

市场

借助 AdaptiveCards Studio，可以直接在 Visual Studio Code 中创作卡片。 扩展会自动检测工作区中的所有自适应卡片，并允许轻松编辑卡片模板和示例数据。

从 Visual Studio Code 市场阅读详细信息并安装它

自适应卡片查看器

我们创建了一个 Visual Studio 代码扩展，使你可以在编辑器本身内实时可视化正在编辑的卡片。

扩展

若要安装，请打开扩展市场并搜索 自适应卡片查看器。

市场

Usage

在编辑具有自适应卡片 $schema 属性的 .json 文件时，可以使用 Ctrl+Shift+V A 进行查看。

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

选项

以下 Visual Studio Code 设置可用于 AdaptiveCards 查看器。 可以在“用户设置”或“工作区设置”中设置此设置。

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

WPF 可视化工具示例

WPF 可视化工具示例项目允许你在 Windows 计算机上使用 WPF/Xaml 可视化卡片。 hostconfig编辑器内置用于编辑和查看主机配置设置。 将这些设置保存为 JSON，以在应用程序中的呈现中使用这些设置。

wpf 可视化工具

WPF ImageRender 示例

ImageRender 示例项目使用 WPF 从命令行将任何卡片转换为 PNG。

  • Last updated on