Como renderizar cartões dentro do aplicativo

  • Artigo

É fácil renderizar Cartões Adaptáveis dentro do aplicativo. Fornecemos SDKs para todas as plataformas comuns, além de fornecer uma especificação detalhada para a criação de seu próprio renderizador de Cartões Adaptáveis.

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

SDKs de Cartões Adaptáveis

Plataforma Instalar Compilação Docs Status
JavaScript Instalar NPM Origem Docs Status do build
.NET WPF Instalação do Nuget Origem Docs Status do Build
HTML .NET Instalação do Nuget Origem Docs Status do Build
Windows UWP Instalação do Nuget Origem Docs Status do Build
WinUI 3 Instalação do Nuget Origem Docs Status do build
Android Central do Maven Origem Docs Status do Build
iOS CocoaPods Origem Docs Status do Build

Criar uma instância do renderizador

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

Vincular eventos de ação

Por padrão, as ações serão renderizadas como botões no cartão, mas cabe ao aplicativo fazer com que eles se comportem conforme o esperado. Cada SDK tem o equivalente a um evento OnAction que você precisa manipular.

  • Action.OpenUrl – abra o url especificado.
  • Action.Submit – envie o resultado do envio para a origem. O modo como você o envia para a origem do cartão depende inteiramente de você.
  • Action.ShowCard – invoca uma caixa de diálogo e renderiza o subcartão nessa caixa de diálogo. Observe que você só precisará lidar com isso se ShowCardActionMode estiver definido como popup.

Renderizar um cartão

Depois de adquirir um conteúdo de cartão, basta efetuar uma chamada ao renderizador e passar o cartão. Você receberá 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 no 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 de cartões dentro do aplicativo. Ele define itens como tamanhos da fonte, espaçamento entre elementos, cores, número de ações compatíveis, etc.

Estilo de plataforma nativa

A maioria das estruturas de interface do usuário permite que você defina estilos do 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. Em XAML, você pode passar um ResourceDictionary personalizado para um controle refinado da saída.

Personalizar renderização por elemento

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