maui chat app下載-MAUI maui chat app源代碼下載

maui chat app

其他源碼

1.0.0

下載

使用devexpress .net Maui組件來構建聊天視圖

此示例使用DEVEXPRESS .NET MAUI組件來顯示帶有發件人和接收器消息的聊天視圖，建議的快速回復和響應輸入控件。

Devexpress聊天.Net Maui

包括控件及其屬性

dxContentPresenter：內容，水平選擇
DXBORDER：垂直的，可見的
標籤：文字
dxCollectionView：groupheadertemplate，allowGroupCollapse，itempsSource，itemTemplate
SafeKeyBoardAreaview
chipgroup：chiptapcommand，ittemssource，ismultiniline，displaymember
textedit：佔位文本，文字
DxButton：命令，圖標

實施詳細信息

使用SafeKeyboardAreaView作為視圖佈局的根。當以這種方式實現時，設備鍵盤在屏幕上出現時不會重疊消息視圖。
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

使用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 >

使用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>

調用DXCollectionView.ScrollTo()方法以將視圖滾動到最後一條消息。

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

使用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" }
    } ;
}

使用TextEdit控件創建/顯示短信輸入字段。要發送消息，請指定DXButton控件。

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