maui chat app Download - maui chat app Source Code herunterladen

maui chat app

Anderer Quellcode

1.0.0

Herunterladen

Verwenden Sie Devexpress .NET MAUI -Komponenten, um eine Chat -Ansicht zu erstellen

In diesem Beispiel werden Devexpress .NET MAUI -Komponenten verwendet, um eine Chat -Ansicht mit Absendungs- und Empfängernachrichten, vorgeschlagenen schnellen Antworten und Antwortsteuerungen für Antworteingänge anzuzeigen.

Devexpress -Chat für .net Maui

Enthalten Kontrollen und ihre Eigenschaften

DxContentPresenter: Inhalt, horizontale Optionen
DXBORDER: Vertikaloptionen, ist sichtbar
Etikett: Text
DxCollectionView: GroupHeaDeTemplate, DengingGroupCollapse, itemsSource, itemTemplate
SafeKeyboardAreAView
Chipgroup: Chiptapcommand, itemsSource, Ismultilin, DisplayMember
Textedit: placeholdText, text
DXButton: Befehl, Symbol

Implementierungsdetails

Verwenden Sie eine SafeKeyboardAreaView als Stamm für das Ansichtslayout. Wenn die Geräte-Tastatur auf diese Weise implementiert wird, überlappt sie die Nachrichtenansicht nicht, wenn sie auf dem Bildschirm angezeigt wird.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

Verwenden Sie das DXCollectionView -Steuerelement, um Nachrichten anzuzeigen. Geben Sie die Datenquelle und die Elementvorlagen an (verwenden Sie verschiedene Vorlagen für Sender und Empfänger). Gruppiert Elemente, die einen integrierten Algorithmus verwenden, der Datums-/Uhrzeitbereiche verwendet ("Today", "gestern", "letzte Woche" usw.). Geben Sie eine Vorlage für Gruppenheader an.

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

Verwenden Sie DXContentPresenter -Komponenten, um Vorlagen für Absender- und Empfängernachrichten zu definieren.

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

Rufen Sie die Methode DXCollectionView.ScrollTo() auf, um die Ansicht auf die letzte Nachricht zu scrollen.

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

Verwenden Sie die ChipGroup -Steuerung, um kurze Antworten anzuzeigen.

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

Verwenden Sie das TextEdit -Steuerelement, um ein Feld für die Eingabe von Textnachrichten zu erstellen/anzuzeigen. Um die Nachricht zu senden, geben Sie die DXButton -Steuerung an.

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