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 >