syncfusion-maui-chat について
Syncfusion SfChat を使う .NET MAUI 開発者向けのガイドです。チャットボット、カスタマーサポート、多人数メッセージ画面に向けて、メッセージ形式やデータ連携、操作、スタイル、アクセシビリティを説明します。
主な機能
- 01テキスト、画像、カード、日時メッセージ
- 02MVVM によるメッセージのデータバインド
- 03入力ビュー、候補、入力中インジケーター
- 04履歴の追加読み込みと自動スクロール
- 05メッセージのスタイル、テーマ、ローカライズ、RTL
活用シーン
- 01チャットボットやサポート画面の構築
- 02リッチコンテンツを含む複数人の会話表示
- 03過去のメッセージ読み込みと入力状態の表示
- 04メッセージの外観とローカライズの調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-chatインストール後、Claude Code で/syncfusion-maui-chatを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility-localization.mdadvanced-features.mddata-binding.mdevents.mdgetting-started.mdload-more.mdmessages.mdscrolling.mdstyles.mdsuggestions.mdtyping-indicator.md詳細
Syncfusion® .NET MAUI Chat (SfChat)
Syncfusion .NET MAUI Chat コントロール(SfChat)は、チャットボットのインターフェイス、カスタマーサポート画面、複数ユーザーのメッセージング機能を構築するための、現代的な会話型 UI を提供します。リッチメッセージ、リアルタイムの入力インジケーター、候補、履歴の追加読み込み、スワイプ、詳細なスタイル設定に対応しています。
このスキルを使用する場面
- .NET MAUI でチャット UI、チャットボットのインターフェイス、またはメッセージング画面を構築するとき
- 2 人以上のユーザー間の会話を表示するとき
- テキスト、画像、カード、ハイパーリンク、日付/時刻ピッカーのメッセージを送受信するとき
- 入力インジケーター、メッセージ候補、または履歴の追加読み込みを実装するとき
- メッセージの外観、形状、配信状態、またはテーマをカスタマイズするとき
- スワイプ操作、時間区切りによるグループ化、または添付ファイルボタンを追加するとき
- チャット UI をローカライズするとき、またはアクセシビリティ機能を有効にするとき
コンポーネントの概要
SfChat は、強力でカスタマイズ可能な会話型コントロールです。次の機能を備えています。
- チャットレイアウトで受信メッセージと送信メッセージを表示します
- テキスト、アバター、タイムスタンプ、カスタムメッセージデザインに対応しています
- ItemsSource と MVVM を使用してデータに簡単にバインドできます
- テンプレートとスタイルで UI をカスタマイズできます
- ユーザーのメッセージと他のユーザーのメッセージを自動的に整列・グループ化します
- 送信機能を備えた組み込みのテキスト入力を含みます
- メッセージの送信やタップなどの操作に対応しています
- 画像やカスタムレイアウトなどのリッチコンテンツを表示できます
- スムーズなスクロールと新しいメッセージへの自動スクロールを提供します
- 外観(色、フォント、吹き出し)を完全に制御できます
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- NuGet のインストール(
Syncfusion.Maui.Chat) MauiProgram.csでのハンドラー登録- XAML と C# での基本的な
SfChatの初期化 MessagesとCurrentUserを使用した ViewModel の設定- メッセージをチャットコントロールにバインドする
- アプリケーションの実行
メッセージ
📄 参照: references/messages.md
TextMessage、DatePickerMessage、TimePickerMessage、CalendarMessageHyperlinkMessage、ImageMessage、CardMessage- 配信状態(
ShowDeliveryState、DeliveryState列挙型、カスタムアイコン) - メッセージのピン留め(
AllowPinning、PinnedMessages、イベント、テンプレート) - メッセージテンプレートと
ChatMessageTemplateSelector - カスタマイズ可能な受信ビュー/送信ビュー
- メッセージの間隔、形状、タイムスタンプ形式、アバター/作成者の表示設定
- メッセージの送信、キーボード、複数行入力、入力ビューの非表示
データバインディング
📄 参照: references/data-binding.md
ObservableCollection<object>をMessagesにバインドするCurrentUserによる送信者/受信者の識別IMessage/ITextMessageを使用したカスタムデータモデル- 外部モデルのバインディングに使用する
ItemsSourceConverter - 実行時にメッセージを動的に更新する
候補
📄 参照: references/suggestions.md
- チャットレベルの候補(
SfChat.Suggestions) - メッセージレベルの候補(
TextMessage.Suggestions) SuggestionItemSelectedイベントとコマンド- 候補項目のテンプレートをカスタマイズする
入力インジケーター
📄 参照: references/typing-indicator.md
- 入力インジケーターを有効にする(
ShowTypingIndicator) TypingIndicatorに作成者とメッセージを設定する- 外観をカスタマイズする
- 動的に表示/非表示にする
追加読み込み
📄 参照: references/load-more.md
- 追加読み込みを有効にする(
LoadMoreBehavior) LoadMoreイベントとLoadMoreCommand- スクロール時に古いメッセージを読み込む
IsLazyLoadingプロパティ- すべてのメッセージを読み込んだ後に無効にする
イベントとコマンド
📄 参照: references/events.md
SendMessage/SendMessageCommandImageTapped/ImageTappedCommandCardTapped/CardCommandSuggestionItemSelectedMessagePinned/MessageUnpinnedLoadMore/LoadMoreCommand- イベント引数を処理してキャンセルする
スタイルと外観
📄 参照: references/styles.md
- 受信メッセージと送信メッセージのスタイル
- メッセージ入力ビューのスタイル
- 時間区切りと入力インジケーターのスタイル
- 候補ビューのスタイル
MessageShapeのオプション- テーマのサポート(Material 3、Fluent)
アクセシビリティとローカライズ
📄 参照: references/accessibility-localization.md
- WCAG 2.0 への準拠
- キーボードナビゲーションとスクリーンリーダーのサポート
- UI テスト用の
AutomationId .resxリソースファイルによるローカライズ- ローカライズ可能な文字列
- RTL レイアウトのサポート
スクロール
📄 参照: references/scrolling.md
- 特定のメッセージへのプログラムによるスクロール(
ScrollToMessage) - 新しいメッセージが届いたときに最下部へ自動スクロール(
CanAutoScrollToBottom) - 最下部へスクロールするフローティングボタン(
ShowScrollToBottomButton) - 最下部へスクロールするボタンのカスタマイズ(
ScrollToBottomButtonTemplate) ScrolledイベントとChatScrolledEventArgs(IsBottomReached、IsTopReached、ScrollOffset)
高度な機能
📄 参照: references/advanced-features.md
- メッセージのスワイプ(左/右、
SwipeStarted、SwipeEnded、スワイプテンプレート) - 時間区切りのグループ化(カスタムの時間区切りテンプレート)
- 添付ファイルボタン(追加、カスタマイズ、
AttachmentButtonView) - リキッドグラス効果(有効化、プラットフォームのサポート、カスタマイズ)
MessageSpacingの設定- メッセージ入力ビューを非表示にする(
ShowMessageInputView)