閱讀英文

共用方式為


工具與範例

卡片設計工具

需要工具來設計您的卡片嗎? 只需以瀏覽器為基礎的調適型卡片設計工具,網址為 https://adaptivecards.io/designer

designer screenshot

將設計工具內嵌至您的應用程式

但是當您可以使用我們 JavaScript 程式庫,將卡片設計工具直接內嵌到 Web 應用程式時,為什麼還要將您的使用者傳送到該處。

請查看 adaptivecards-designer 套件以開始使用。

結構描述驗證

結構描述驗證是讓撰寫變得更容易和啟用工具的強大方式。

我們提供了完整的 JSON 結構描述檔案,可用於編輯和驗證 JSON 中的調適型卡片。 請注意,結構描述 URL 已建立版本,較新版本的調適型卡片將會有對應的 URL。

在 Visual Studio 和 Visual Studio Code 中,您可以藉由加入 $schema 參考來取得自動化 Intellisense。

bad

autocomplete

範例

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

Visual Studio Code 擴充功能

Adaptive Cards Studio

marketplace

透過 AdaptiveCards Studio,您可以直接在 Visual Studio Code 中撰寫卡片。 此擴充功能會自動偵測您工作空間中的所有調適型卡片,並可讓您輕鬆地編輯卡片範本和範例資料。

閱讀更多內容並從 Visual Studio Code Marketplace 進行安裝

調適型卡片檢視器

我們建立了一個 Visual Studio Code 延伸模組,可讓您以視覺化方式呈現您在編輯器內即時編輯的卡片。

extension

若要安裝,請開啟 Extensions Marketplace 並搜尋 [調適型卡片檢視器]。

marketplace

使用方式

當您使用調適型卡片 $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 設定適用於調適型卡片檢視器。 這可以在 [使用者設定] 或 [工作區設定] 中設定。

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

WPF 視覺特效播放器範例

WPF 視覺特效播放器範例專案 \(英文\) 可讓您使用 Windows 電腦上的 WPF/Xaml 視覺化卡片。 內建 hostconfig 編輯器來編輯和檢視主機設定。 將這些設定儲存為 JSON,以在應用程式中轉譯時使用它們。

wpf visualizer

WPF ImageRender 範例

ImageRender 範例專案 \(英文\) 會使用 WPF,從命令列將任何卡片轉換成 PNG。