Unduh maui chat app - Unduh Kode Sumber maui chat app

maui chat app

Kode sumber lainnya

1.0.0

Unduh

Gunakan komponen DevExpress .Net Maui untuk membangun tampilan obrolan

Contoh ini menggunakan komponen DevExpress .NET Maui untuk menampilkan tampilan obrolan dengan pesan pengirim dan penerima, balasan cepat yang disarankan, dan kontrol input respons.

Obrolan devexpress untuk .net maui

Kontrol termasuk dan propertinya

DXContentPresenter: Konten, HorizontalOptions
DXBORDER: VerticalOptions, tidak terlihat
Label: Teks
DXCollectionView: GroupHeaderTemplate, AllowGroupCollapse, ItemsSource, ItemTemplate
Safeyboardareaview
ChipGroup: ChiptapCommand, ItemsSource, Ismultiline, DisplayMember
TextEdit: placeholderText, teks
Dxbutton: perintah, ikon

Detail Implementasi

Gunakan SafeKeyboardAreaView sebagai root untuk tata letak tampilan. Saat diimplementasikan dengan cara ini, keyboard perangkat tidak akan tumpang tindih dengan tampilan pesan saat muncul di layar.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

Gunakan kontrol DXCollectionView untuk menampilkan pesan. Tentukan sumber data dan templat item (gunakan templat yang berbeda untuk pengirim dan penerima). Grup item menggunakan algoritma bawaan yang menggunakan rentang tanggal/waktu ("hari ini", "kemarin", "minggu lalu", dll). Tentukan template untuk header grup.

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

Gunakan komponen DXContentPresenter untuk menentukan templat untuk pesan pengirim dan penerima.

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

Hubungi metode DXCollectionView.ScrollTo() untuk menggulir tampilan ke pesan terakhir.

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

Gunakan kontrol ChipGroup untuk menampilkan jawaban singkat.

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

Gunakan kontrol TextEdit untuk membuat/menampilkan bidang input pesan teks. Untuk mengirim pesan, tentukan kontrol DXButton.

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