Compartir a través de

Representación de tarjetas dentro de la aplicación

  • Artículo

Es fácil representar Tarjetas adaptables dentro de la aplicación. Proporcionamos SDK para todas las plataformas comunes, además de proporcionar una especificación detallada para crear tu propio representador de Tarjeta adaptable.

  1. Instala un SDK de representador para la plataforma de destino.
  2. Crea una instancia del representador configurada con el estilo, las reglas y los controladores de eventos de acción de la aplicación.
  3. Representa una tarjeta en la interfaz de usuario nativa: con estilo automáticamente a la aplicación.

SDK de Tarjetas adaptables

Plataforma Instalar Compilar Docs Estado
JavaScript Instalación de npm Origen Documentación Estado de la compilación
.NET WPF Instalación de NuGet Origen Documentación Estado de la compilación
.NET HTML Instalación de NuGet Origen Documentación Estado de la compilación
Windows UWP Instalación de NuGet Origen Documentación Estado de la compilación
WinUI 3 Instalación de NuGet Origen Documentación Estado de la compilación
Android Maven Central Origen Documentación Estado de la compilación
iOS CocoaPods Origen Documentación Estado de la compilación

Creación de una instancia de representador

El paso siguiente es crear una instancia de AdaptiveCardRenderer.

Enlace de eventos de acción

De manera predeterminada, las acciones se representarán como botones en la tarjeta, pero dependerá de la aplicación que se comporten como se espera. Cada SDK tiene el equivalente de un evento OnAction que se debe controlar.

  • Action.OpenUrl: abre el valor de url especificado.
  • Action.Submit: toma el resultado del envío y lo envía al origen. La forma en que se envía al origen de la tarjeta depende totalmente del usuario.
  • Action.ShowCard: invoca un cuadro de diálogo y representa la subtarjeta en dicho cuadro de diálogo. Ten en cuenta que solo necesitas controlar este evento si ShowCardActionMode está establecido en popup.

Representación de una tarjeta

Después de adquirir una carga de tarjeta, solo tienes que llamar al representador y pasar la tarjeta. Obtendrá un objeto de interfaz de usuario nativa compuesto por el contenido de la tarjeta. Ahora, coloca esta interfaz de usuario en algún lugar de la aplicación.

Personalización

Hay varias maneras de personalizar lo que se representa.

HostConfig

HostConfig es un objeto de configuración multiplataforma que controla el estilo y el comportamiento básicos de las tarjetas dentro de la aplicación. Define elementos como los tamaños de fuente, el espaciado entre los elementos, los colores, el número de acciones admitidas, etc.

Estilo de las plataformas nativas

La mayoría de los marcos de interfaz de usuario permiten aplicar estilo a la tarjeta representada mediante el estilo del marco de interfaz de usuario nativa. Por ejemplo, en HTML se pueden especificar clases CSS para el código HTML, o en XAML se puede pasar una instancia de ResourceDictionary personalizada para el control específico de la salida.

Personalización de la representación por elemento

Cada SDK permite invalidar la representación de cualquier elemento, o incluso agregar compatibilidad para los elementos completamente nuevos que se definan. Por ejemplo, puedes cambiar el representador Input.Date para emitir tu propio control personalizado mientras conservas el resto de la salida del representador. También puedes agregar compatibilidad para un elemento Rating personalizado que definas.