Ferramentas e exemplos

Designer de Cartão

Precisa de uma ferramenta para criar seus cartões? Não procure mais, utilize a ferramenta de design de cartões adaptáveis baseada em navegador em https://adaptivecards.microsoft.com/designer.

Inserir o designer em seu aplicativo

Mas por que enviar seus usuários para lá quando você pode inserir o designer de cartão diretamente em seu aplicativo Web usando nossa biblioteca JavaScript.

Confira o pacote adaptivecards-designer para começar.

Validação de esquema

A validação de esquema é uma maneira poderosa de facilitar a criação e habilitar ferramentas.

Fornecemos um arquivo de esquema JSON completo para editar e validar cartões adaptáveis no json. Observe que a URL do esquema é versionada; versões mais recentes dos cartões adaptáveis terão URLs correspondentes.

No Visual Studio e no Visual Studio Code, você pode obter o Intellisense automático incluindo uma $schema referência.

Ruim

Autocomplete

Example

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

Extensões do Visual Studio Code

Adaptive Cards Studio

Marketplace

Com o AdaptiveCards Studio, você pode criar cartões diretamente no Visual Studio Code. A Extensão detecta automaticamente todos os Cartões Adaptáveis em seu espaço de trabalho e permite editar facilmente o modelo de cartão e os dados de exemplo.

Visualizador de Cartão Adaptável

Criamos uma extensão de código do Visual Studio que permite visualizar o cartão que você está editando em tempo real dentro do próprio editor.

Extensão

Para instalar, abra o Extensions Marketplace e pesquise o Visualizador de Cartão Adaptável.

Marketplace

Usage

Ao editar um arquivo .json com a propriedade de um Adaptive Card $schema, você pode visualizá-lo utilizando Ctrl+Shift+V A.

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

Opções

A seguinte configuração do Visual Studio Code está disponível para o Visualizador de Cartões Adaptáveis. Isso pode ser definido nas Configurações do Usuário ou nas Configurações do Workspace.

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

Exemplo de Visualizador do WPF

O projeto de exemplo do visualizador do WPF permite visualizar cartões usando WPF/Xaml em um computador Windows. Um hostconfig editor é integrado para editar e exibir as configurações de configuração do host. Salve essas configurações como um JSON para usá-las na renderização em seu aplicativo.

Visualizador WPF

Exemplo de WPF ImageRender

O projeto de exemplo ImageRender transforma qualquer cartão em um PNG da linha de comando usando o WPF.

Last updated on 2025-12-18