工具與樣品

卡牌設計師

需要一個工具來設計你的卡片嗎？ 不妨看看瀏覽器版的自適應卡片設計 https://adaptivecards.microsoft.com/designer器。

設計師截圖

將設計師嵌入你的應用程式中

但為什麼要讓使用者去那裡，當你可以直接用我們的 JavaScript 函式庫 將卡片設計器嵌入你的網頁 應用程式呢？

查看 adaptivecards-designer 套件以便開始。

結構描述驗證

結構驗證是讓撰寫更簡便並啟用工具的強大方式。

我們提供了完整的 JSON 架構檔案 ，用於編輯和驗證 JSON 中的自適應卡片。 請注意，結構 URL 有版本限制，較新的 Adaptive Cards 版本會有對應的 URL。

在 Visual Studio 和 Visual Studio Code 中，只要加入 $schema 參考，就能自動取得 Intellisense。

很糟

自動補全

Example

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

Visual Studio 程式碼擴充

自適應卡片工作室

市集

使用 AdaptiveCards Studio 你可以直接在 Visual Studio Code 中製作卡片。 擴充功能會自動偵測你工作空間內的所有自適應卡，讓你輕鬆編輯卡片範本和範例資料。

在 Visual Studio Code 市集中閱讀更多並安裝

自適應卡片檢視器

我們建立了 Visual Studio 程式碼擴充功能，讓你能在編輯器內即時視覺化你正在編輯的卡片。

延伸

要安裝，打開擴充市場並搜尋 Adaptive Card Viewer。

市場平台

Usage

當你編輯帶有 Adaptive Card $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 範例專案可透過 WPF 從命令列將任何卡片轉成 PNG。

  • Last updated on