Partager via

Rendu de cartes à l’intérieur de votre application

  • Article

Il est facile d’afficher des cartes adaptatives à l’intérieur de votre application. Nous fournissons des SDK pour toutes les plateformes courantes, ainsi qu’une spécification détaillée pour créer votre propre renderer de carte adaptative.

  1. Installez un SDK de renderer pour votre plateforme cible.
  2. Créez une instance de renderer configurée avec le style, les règles et les gestionnaires d’événements d’actions de votre application.
  3. Affichez une carte dans l’interface utilisateur native, affectée automatiquement du style de votre application.

SDK de cartes adaptatives

Plateforme Installer Build Docs État
JavaScript Installation npm Source Docs État de la build
.NET WPF Installation NuGet Source Docs État de la build
.NET HTML Installation NuGet Source Docs État de la build
Windows UWP Installation NuGet Source Docs État de la build
WinUI 3 Installation NuGet Source Docs État de la build
Téléphone Maven Central Source Docs État de la build
iOS CocoaPods Source Docs État de la build

Créer une instance du renderer

L’étape suivante consiste à créer une instance de AdaptiveCardRenderer.

Raccorder des événements d’actions

Par défaut, les actions s’affichent sous la forme de boutons sur la carte, mais c’est à votre application de faire en sorte qu’elles se comportent comme prévu. Chaque SDK a l’équivalent d’un événement OnAction que vous devez gérer.

  • Action.OpenUrl : ouvrir le url spécifié.
  • Action.Submit : prendre le résultat de l’envoi et l’envoyer à la source. La façon dont vous l’envoyez à la source de la carte dépend entièrement de vous.
  • Action.ShowCard : appelle une boîte de dialogue et affiche la sous-carte dans cette boîte de dialogue. Notez que vous devez uniquement gérer cela si ShowCardActionMode a la valeur popup.

Effectuer le rendu d’une carte

Une fois que vous avez acquis une charge utile de carte, il vous suffit d’appeler le renderer et de transmettre la carte. Vous récupérerez un objet d’interface utilisateur natif composé du contenu de la carte. Maintenant, il vous suffit de placer cette interface utilisateur quelque part dans votre application.

Personnalisation

Il existe plusieurs façons de personnaliser ce qui est rendu.

HostConfig

Un HostConfig est un objet de configuration multiplateforme et partagé qui contrôle le style et le comportement de base des cartes à l’intérieur de votre application. Il définit des éléments tels que les tailles de police, l’espacement entre les éléments, les couleurs, le nombre d’actions prises en charge, et ainsi de suite.

Style de plateforme native

La plupart des frameworks d’interface utilisateur vous permettent d’appliquer un style à la carte rendue à l’aide du style de framework d’interface utilisateur natif. Par exemple, en HTML vous pouvez spécifier des classes CSS pour le code HTML, et en XAML vous pouvez passer un ResourceDictionary personnalisé pour obtenir un contrôle affiné de la sortie.

Personnaliser le rendu par élément

Chaque SDK vous permet de remplacer le rendu d’un élément, ou même d’ajouter la prise en charge d’éléments entièrement nouveaux que vous définissez. Par exemple, vous pouvez modifier le renderer Input.Date pour émettre votre propre contrôle personnalisé tout en conservant le reste de la sortie du renderer. Vous pouvez aussi ajouter la prise en charge d’un élément Rating personnalisé que vous définissez.