Displaying Cards inside your application
To add the ability to display cards in your application:
- Add a renderer library - add a reference to a renderer library appropriate to your application.
- Create an instance - of the renderer configured with your app's style, and with action event handlers
- Render your card -ask the renderer to render a card to your UI framework
Add a renderer
In the adaptive cards Github repo we have implemented a number of renderers that target various environments.
- Android native
- iOS native
- Html in browser
- Html server side
- Xamarin Forms
- UWP Windows/Xaml
- WPF Windows/Xaml
- Image renderer
Create an instance of the renderer
The next step is to create an instance of the renderer library.
Hook up action events
If you want to the action buttons to do something, hook up an action handler.
- Action.OpenUrl - opens the
- Action.Submit - takes the result of the submit and send it to the source. How you send it to the source of the card is entirely up to you.
- Action.ShowCard invokes a dialog and renders the sub-card into that dialog. Note that you only need to handle this if
ShowCardActionModeis set to
Render a card
After you acquire a card from some source, simply call the renderer and pass in the card. You will to get back a native UI object which represents your card rendered into your UI framework. Add the card to your UI and you are done.
There are several ways you can customize what is rendered.
The HostConfig is a cross-library, cross-platform group of settings which control how the cards are rendered. Through this object you can define things like font sizes, separation between elements, colors, and so forth.
Change per-element rendering
Most libraries allow you to override the rendering of any element, making it easy for you to substitute your own rendering
for that element. For example, you can change the
Input.Date renderer to emit your own custom control while still retaining
the rest of the output of the renderer.
Style UI Framework
Most UI frameworks allow you to style the output further using UI framework styling. For example, in HTML you can style the output of the renderer using CSS, and in XAML you can style the output of the renderer using XAML Styles.