Renderizando cartões dentro de seu aplicativo

É fácil renderizar Cartões Adaptáveis dentro de seu aplicativo. Fornecemos SDKs para todas as plataformas comuns, bem como fornecemos uma especificação detalhada para criar seu próprio renderizador de Cartão Adaptável.

1. Instale um SDK do renderizador para sua plataforma de destino.
2. Crie uma instância do renderizador – configurada com o estilo, as regras e os manipuladores de eventos de ação do aplicativo.
3. Renderize um cartão para a interface do usuário nativa – estilizado automaticamente em seu aplicativo.

SDKs de cartões adaptáveis

Plataforma	Instalar	Construir	Documentos	Situação
JavaScript		Fonte	Documentação
WPF do .NET		Fonte	Documentação
HTML do .NET		Fonte	Documentação
Windows UWP		Fonte	Documentação
WinUI 3		Fonte	Documentação
Android		Fonte	Documentação
iOS		Fonte	Documentação

Criar uma instância do renderizador

A próxima etapa é criar uma instância de um AdaptiveCardRenderer.

Conectar eventos de ação

Por padrão, as ações serão renderizadas como botões no cartão, mas cabe ao seu aplicativo fazê-las se comportarem como você espera. Cada SDK tem o equivalente a um OnAction evento que você deve manipular.

• Action.OpenUrl – abra o endereço especificado.url
• Action.Submit – pegue o resultado do envio e envie-o para a origem. Como você envia para a origem do cartão é inteiramente por sua escolha.
• Action.ShowCard – invoca uma caixa de diálogo e renderiza o sub-cartão nessa caixa de diálogo. Observe que você só precisa lidar com isso se ShowCardActionMode estiver definido como popup.

Renderizar um cartão

Depois de adquirir o payload do cartão, é só chamar o renderizador e passar o cartão. Você receberá de volta um objeto de interface do usuário nativo composto pelo conteúdo do cartão. Agora, basta colocar essa interface do usuário em algum lugar em seu aplicativo.

Personalização

Há várias maneiras de personalizar o que é renderizado.

HostConfig

Um HostConfig é um objeto de configuração multiplataforma compartilhado que controla o estilo básico e o comportamento dos cartões dentro de seu aplicativo. Ele define coisas como tamanhos de fonte, espaçamento entre elementos, cores, número de ações com suporte etc.

Estilo de plataforma nativa

A maioria das estruturas de interface do usuário permite que você estilize o cartão renderizado usando o estilo da estrutura de interface do usuário nativa. Por exemplo, em HTML, você pode especificar classes CSS para o HTML ou, em XAML, você pode passar um ResourceDictionary personalizado para controle refinado da saída.

Personalizar a renderização por elemento

Cada SDK permite substituir a renderização de qualquer elemento ou até mesmo adicionar suporte para elementos totalmente novos que você definir. Por exemplo, você pode alterar o Input.Date renderizador para emitir seu próprio controle personalizado, mantendo o restante da saída do renderizador. Ou você pode adicionar suporte para um elemento personalizado Rating que você definir.