maui chat app

Devexpress .Net Mauiコンポーネントを使用して、チャットビューを構築する

この例では、devexpress .NET MAUIコンポーネントを使用して、送信者と受信者メッセージ、迅速な返信、および応答入力コントロールとのチャットビューを表示します。

含まれているコントロールとそのプロパティが含まれています

• dxContentPresenter：コンテンツ、horizo​​ntaloptions
• dxborder：垂直、isvisible
• ラベル：テキスト
• dxcollectionView：groupheadertemplate、aladggroupCollapse、itemsource、itemtemplate
• safekeyboardareaeaview
• Chipgroup：chiptapcommand、itemssource、ismultiline、displaymember
• TextEdit：Placeholdertext、Text
• dxbutton：コマンド、アイコン

実装の詳細

1. View LayoutのルートとしてSafeKeyboardAreaViewを使用してください。この方法で実装すると、デバイスキーボードは画面上に表示されるときにメッセージビューと重複しません。

   < dx : SafeKeyboardAreaView > 
       ... 
   </ dx : SafeKeyboardAreaView >

2. DXCollectionViewコントロールを使用してメッセージを表示します。データソースとアイテムのテンプレートを指定します（送信者と受信機に異なるテンプレートを使用します）。グループ項目は、日付/時刻範囲（「今日」、「昨日」、「先週」などを使用する組み込みアルゴリズムを使用しています。グループヘッダーのテンプレートを指定します。

   < dxcv : DXCollectionView
       ItemsSource = " {Binding Messages} "
       ItemTemplate = " {local:MessageTemplateSelector SenderTemplate=..., RecipientTemplate=...} "
       GroupHeaderTemplate = " {StaticResource dayGroupTemplate} "
       ... 
   >
       < dxcv : DXCollectionView .GroupDescription>
           < dxcv : GroupDescription FieldName = " SentAt " GroupInterval = " DateRange " />
       </ dxcv : DXCollectionView .GroupDescription>
   </ dxcv : DXCollectionView >

3. DXContentPresenterコンポーネントを使用して、送信者と受信者メッセージのテンプレートを定義します。

   < ContentPage .Resources>
       < DataTemplate x : Key = " senderMessageTemplate "  x : DataType = " {x:Type local:Message} " >
           < dx : DXContentPresenter ... >
           </ dx : DXContentPresenter >
       </ DataTemplate >
       < DataTemplate x : Key = " recipientMessageTemplate " x : DataType = " {x:Type local:Message} " >
           < dx : DXContentPresenter ... >
           </ dx : DXContentPresenter >
       </ DataTemplate >
       ...
   </ ContentPage .Resources>

4. DXCollectionView.ScrollTo()メソッドを呼び出して、最後のメッセージのビューをスクロールします。

    public partial class MainPage : ContentPage {
       // ...
       void OnMessagesCollectionChanged ( object sender , NotifyCollectionChangedEventArgs e ) {
           chatSurface . ScrollTo ( chatSurface . GetItemHandle ( vm . Messages . Count - 1 ) ) ;
       }
   }

5. ChipGroupコントロールを使用して、短い回答を表示します。

   < dxe : ChipGroup ...      
       DisplayMember = " Text "
       ItemsSource = " {Binding SuggestedActions} " />

    public ChatViewModel ( ) {
       // ...
       SuggestedActions = new ObservableCollection < SuggestedAction > ( ) {
           new SuggestedAction ( ) { Message = new Message ( ) { Sender = Me , SentAt = DateTime . Now , Text = "Sure" } , Text = "Sure" } ,
           new SuggestedAction ( ) { Message = new Message ( ) { Sender = Me , SentAt = DateTime . Now , Text = "Great" } , Text = "Great" } ,
           new SuggestedAction ( ) { Message = new Message ( ) { Sender = Me , SentAt = DateTime . Now , Text = "Thank you" } , Text = "Thank you" } ,
           new SuggestedAction ( ) { Message = new Message ( ) { Sender = Me , SentAt = DateTime . Now , Text = "My pleasure" } , Text = "My pleasure" }
       } ;
   }

6. TextEditコントロールを使用して、テキストメッセージ入力フィールドを作成/表示します。メッセージを送信するには、dxbuttonコントロールを指定します。

   < Grid ... >
       < dxe : TextEdit ...
           x : Name = " messageEditor "
           Text = " {Binding EditMessageText} " />
       < dx : DXButton ... 
           Command = " {Binding SendMessageCommand} "
           CommandParameter = " {Binding EditMessageText} " />
   </ Grid >

レビューするファイル

• mainpage.xaml
• mainpage.xaml.cs
• chatviewmodel.cs

ドキュメント

• dxcontentpresenter
• dxcollectionView
• dxborder
• safekeyboardareaeaview
• チップグループ
• Textedit

その他の例

• Devexpress .Net Maui Demo Center
• Blazor AIチャット
• ストックアプリ
• データグリッド
• データフォーム
• データエディター
• チャート
• スケジューラ
• タブページ
• タブビュー
• 引き出しページ
• 引き出しビュー
• コレクションビュー
• ポップアップ

この例は、開発の要件/目的に対処していますか？

（あなたはあなたの応答を送信するためにdevexpress.comにリダイレクトされます）