Descargar maui chat app - Descargar código fuente maui chat app

maui chat app

Otro código fuente

1.0.0

Descargar

Use componentes Devexpress .NET Maui para crear una vista de chat

Este ejemplo utiliza componentes Devexpress .NET MAUI para mostrar una vista de chat con mensajes de remitente y receptor, respuestas rápidas sugeridas y controles de entrada de respuesta.

Devexpress chat para .net maui

Incluidos los controles y sus propiedades

DxContentPresenter: contenido, horizontaloptions
DXBORDER: verticalOptions, ISVISIBLE
Etiqueta: texto
DxCollectionView: GroUpheaderTemplate, iModgroupCollapse, ElementSsource, itemtemplate
SafeKeyboardareAview
CHIPGROUP: ChiptapCommand, ElementSsource, Ismultiline, DisplayMember
TextEdit: Text, texto, texto
DxButton: comando, icono

Detalles de implementación

Use un SafeKeyboardAreaView como raíz para el diseño de la vista. Cuando se implementa de esta manera, el teclado del dispositivo no superpondrá la vista de mensaje cuando aparezca en la pantalla.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

Use el control DXCollectionView para mostrar mensajes. Especifique la fuente de datos y las plantillas de elementos (use diferentes plantillas para el remitente y el receptor). Agrupe elementos que usan un algoritmo incorporado que usa rangos de fecha/hora ("Today", "ayer", "la semana pasada", etc.). Especifique una plantilla para los encabezados 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 plantillas para los mensajes de remitente y 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>

Llame al método DXCollectionView.ScrollTo() para desplazar la vista al último mensaje.

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

Use el control ChipGroup para mostrar respuestas cortas.

< 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 el control TextEdit para crear/mostrar un campo de entrada de mensaje de texto. Para enviar el mensaje, especifique el control DXButton.

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