Tools und Beispiele

Karten-Designer

Benötigen Sie ein Tool zum Entwerfen Ihrer Karten? Suchen Sie nicht weiter: Der browserbasierte Designer für Adaptive Karten befindet sich unter https://adaptivecards.microsoft.com/designer.

Einbetten des Designers in Ihre App

Warum sollten Sie Ihre Benutzer dorthin schicken, wenn Sie unsere JavaScript-Bibliothek verwenden können, um den Karten-Designer direkt in Ihre Web-App einzubetten?

Schauen Sie sich das Adaptivecards-Designer-Paket an, um zu beginnen.

Schemavalidierung

Die Schemaüberprüfung ist eine leistungsstarke Möglichkeit, die Erstellung zu vereinfachen und Tools zu aktivieren.

Wir haben eine vollständige JSON-Schemadatei zum Bearbeiten und Validieren adaptiver Karten in JSON bereitgestellt. Beachten Sie, dass die Schema-URL versionsiert ist, neuere Versionen von adaptiven Karten verfügen über eine entsprechende URL.

In Visual Studio und Visual Studio Code können Sie automatisch IntelliSense abrufen, indem Sie einen $schema Verweis einschließen.

Example

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

Visual Studio Code-Erweiterungen

Adaptive Cards Studio

Mit AdaptiveCards Studio können Sie Karten direkt in Visual Studio Code erstellen. Die Erweiterung erkennt automatisch alle adaptiven Karten in Ihrem Arbeitsbereich und ermöglicht es Ihnen, die Kartenvorlage und Beispieldaten ganz einfach zu bearbeiten.

Lesen Sie mehr, und installieren Sie es aus dem Visual Studio Code Marketplace

Adaptive Kartenanzeige

Wir haben eine Visual Studio-Codeerweiterung erstellt, mit der Sie die Karte visualisieren können, die Sie in Echtzeit innerhalb des Editors selbst bearbeiten.

Öffnen Sie zum Installieren den Erweiterungs-Marketplace, und suchen Sie nach adaptivem Kartenanzeiger.

Usage

Wenn Sie eine .json Datei mit einer Eigenschaft für adaptive Karten $schema bearbeiten, können Sie sie mithilfe von Ctrl+Shift+V A. anzeigen.

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

Options

Die folgende Visual Studio Code-Einstellung ist für den AdaptiveCards Viewer verfügbar. Dies kann in den Benutzereinstellungen oder Arbeitsbereichseinstellungen festgelegt werden.

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

WPF Visualizer-Beispiel

Mit dem WPF-Visualisierungsbeispielprojekt können Sie Karten mit WPF/Xaml auf einem Windows-Computer visualisieren. Ein hostconfig Editor ist zum Bearbeiten und Anzeigen von Hostkonfigurationseinstellungen integriert. Speichern Sie diese Einstellungen als JSON, um sie beim Rendern in Ihrer Anwendung zu verwenden.

WPF ImageRender-Beispiel

Das ImageRender-Beispielprojekt wandelt jede Karte über die Befehlszeile mithilfe von WPF in eine PNG-Datei um.