次の方法で共有


アプリケーション内でのカードのレンダリング

アプリケーション内でアダプティブ カードをレンダリングするのは簡単です。 すべての一般的なプラットフォーム用の SDK と、独自のアダプティブ カード レンダラーを作成するための 詳細な仕様 が用意されています。

  1. ターゲット プラットフォーム用のレンダラー SDK をインストール します。
  2. レンダラー インスタンスを作成 する - アプリのスタイル、ルール、およびアクション イベント ハンドラーを使用して構成します。
  3. ネイティブ UI にカードをレンダリングする - アプリに自動的にスタイル設定されます。

アダプティブ カード SDK

プラットホーム 取り付ける 建築する ドキュメント ステータス
JavaScript npm install ソース ドキュメント ビルドの状態
.NET WPF Nuget のインストール ソース ドキュメント ビルドの状態Build statusBuild statusの
.NET HTML Nuget のインストール ソース ドキュメント ビルドの状態Build statusBuild statusの
Windows UWP Nuget のインストール ソース ドキュメント ビルドの状態
WinUI 3 Nuget のインストール ソース ドキュメント ビルドの状態
Android Maven Central ソース ドキュメント ビルドの状態Build statusBuild statusの
iOS CocoaPods ソース ドキュメント ビルドの状態Build statusBuild statusの

レンダラーのインスタンスを作成する

次の手順では、 AdaptiveCardRendererのインスタンスを作成します。

アクション イベントを接続する

既定では、アクションはカード上のボタンとしてレンダリングされますが、期待どおりに動作させるのはアプリによって異なります。 各 SDK には、処理する必要がある OnAction イベントと同等のものがあります。

  • Action.OpenUrl - 指定した urlを開きます。
  • Action.Submit - 送信 の結果を取得し、ソースに送信します。 カードのソースに送信する方法は、完全にあなた次第です。
  • Action.ShowCard - ダイアログを呼び出し、サブカードをそのダイアログにレンダリングします。 これは、 ShowCardActionModepopup に設定されている場合にのみ処理する必要があることに注意してください。

カードをレンダリングする

カード ペイロードを取得したら、レンダラーを呼び出してカードを渡すだけです。 カードの内容で構成されたネイティブ UI オブジェクトが返されます。 ここで、この UI をアプリ内のどこかに配置します。

カスタマイズ

レンダリングされる内容をカスタマイズするには、いくつかの方法があります。

HostConfig

HostConfig は、アプリ内のカードの基本的なスタイル設定と動作を制御する、共有のクロスプラットフォーム構成オブジェクトです。 フォント サイズ、要素間の間隔、色、サポートされているアクションの数などを定義します。

ネイティブ プラットフォームのスタイル設定

ほとんどの UI フレームワークでは、ネイティブ UI フレームワークのスタイルを使用して、レンダリングされたカードのスタイルを設定できます。 たとえば、HTML では HTML に CSS クラスを指定したり、XAML でカスタム ResourceDictionary を渡して出力をきめ細かく制御したりできます。

要素ごとのレンダリングをカスタマイズする

各 SDK を使用すると、任意の要素のレンダリングをオーバーライドしたり、定義するまったく新しい要素のサポートを追加したりすることもできます。 たとえば、レンダラーの残りの出力を保持したまま、独自のカスタム コントロールを出力するように Input.Date レンダラーを変更できます。 または、定義したカスタム Rating 要素のサポートを追加することもできます。