Скачать maui chat app - Загрузить исходный код maui chat app

maui chat app

Другой исходный код

1.0.0

Скачать

Используйте компоненты DeVexPress .net Maui, чтобы создать представление в чате

В этом примере используются компоненты DeVexPress .net Maui для отображения представления чата с сообщениями отправителя и приемника, предложенных быстрых ответов и элементов управления ввода ответа.

DeVexpress Chat для .net maui

Включены элементы управления и их свойства

Dxcontentpresenter: содержание, горизонталопции
DXBORDER: VerticalOptions, Isvisible
Этикетка: текст
DxcollectionView: groupheadertemplate, AllingGroupCollApse, ItemsSource, ItemTemplate
Safekeyboardareaview
Chipgroup: Chiptapcommand, itemssource, Ismultiline, Displaymember
Textedit: PlaceholderText, текст
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 >