Download maui chat app - download do código fonte maui chat app

maui chat app

Outro código-fonte

1.0.0

Baixar

Use Devexpress .Net Maui Components para construir uma visualização de bate -papo

Este exemplo usa os componentes do Devexpress .NET MAUI para exibir uma exibição de bate -papo com mensagens de remetente e receptor, respostas rápidas sugeridas e controles de entrada de resposta.

Devexpress Chat para .net Maui

Controles incluídos e suas propriedades

DxContentPresenter: Conteúdo, HorizontalOptions
DXBORDER: VerticalOptions, IsVisible
Etiqueta: texto
DXCollectionView: GroupheadeTemplate, allowGroupCollapse, itensSource, itemTemplate
SafeKeyBoardAReaView
Chipgroup: ChiptapCommand, ItsSource, Ismultiline, DisplayMember
TextEdit: PleasholderText, texto
Dxbutton: comando, ícone

Detalhes da implementação

Use uma SafeKeyboardAreaView como a raiz para o layout de visualização. Quando implementado dessa maneira, o teclado do dispositivo não sobreporá a visualização da mensagem quando aparecer na tela.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

Use o controle DXCollectionView para exibir mensagens. Especifique a fonte de dados e os modelos de item (use modelos diferentes para remetente e receptor). Grupos de itens usando um algoritmo embutido que usa intervalos de data/hora ("Today", "Ontem", "na semana passada", etc.). Especifique um modelo para cabeçalhos de grupo.

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

Use componentes DXContentPresenter para definir modelos para mensagens de remetente e receptor.

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

Ligue para o método DXCollectionView.ScrollTo() para rolar a visualização para a última mensagem.

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

Use o controle ChipGroup para exibir respostas curtas.

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

Use o controle TextEdit para criar/exibir um campo de entrada de mensagem de texto. Para enviar a mensagem, especifique o controle DXButton.

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