Téléchargement maui chat app - Téléchargement du code source maui chat app Téléchargement

maui chat app

Autre code source

1.0.0

Télécharger

Utilisez les composants Maui devexpress .net pour créer une vue de chat

Cet exemple utilise les composants Maui devexpress .net pour afficher une vue de chat avec des messages de l'expéditeur et du récepteur, des réponses rapides suggérées et des contrôles d'entrée de réponse.

Devexpress Chat pour .net Maui

Les contrôles inclus et leurs propriétés

Dxcontentpresenter: contenu, horizontaloptions
Dxborder: verticaloptions, isvisible
Étiqueter: texte
DXCOllectionView: GroupheaderTemplate, AllowGroupCollapse, itemsSource, itemTemplate
SafeKeyBoardAreView
Chipgroup: ChiptapCommand, ItemsSource, Ismultiline, DisplayMember
Textedit: PlanholderText, texte
Dxbutton: commande, icône

Détails de la mise en œuvre

Utilisez un SafeKeyboardAreaView comme racine de la disposition de la vue. Lorsqu'il est implémenté de cette manière, le clavier de périphérique ne chevauchera pas la vue du message lorsqu'il apparaît à l'écran.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

Utilisez le contrôle DXCollectionView pour afficher les messages. Spécifiez les modèles de source de données et d'élément (utilisez différents modèles pour l'expéditeur et le récepteur). Groupe les éléments utilisant un algorithme intégré qui utilise des plages de dat / temps ("aujourd'hui", "hier", "la semaine dernière", etc.). Spécifiez un modèle pour les en-têtes de groupe.

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

Utilisez les composants DXContentPresenter pour définir des modèles pour les messages de l'expéditeur et du récepteur.

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

Appelez la méthode DXCollectionView.ScrollTo() pour faire défiler la vue sur le dernier message.

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

Utilisez le contrôle ChipGroup pour afficher de courtes réponses.

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

Utilisez le contrôle TextEdit pour créer / afficher un champ de saisie du message texte. Pour envoyer le message, spécifiez le contrôle DXBUTTON.

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