تنزيل maui chat app - maui chat app Source Code Download

maui chat app

شفرة المصدر الأخرى

1.0.0

تنزيل

استخدم مكونات Devexpress .NET Maui لبناء عرض دردشة

يستخدم هذا المثال مكونات DeVexPress .NET MAUI لعرض عرض دردشة مع رسائل المرسل والمستقبل ، وردود سريعة ، وعناصر التحكم في إدخال الاستجابة.

دردشة Devexpress لـ .net maui

ضوابط وشملتها وخصائصها

dxContentPresenter: المحتوى ، الأفقي
dxborder: verticaloptions ، غير مرئي
التسمية: نص
DXCollectionView: groupheadertemplate ، leftgroupcollapse ، heatssource ، itemTemplate
SafeKyboardareaview
Chipgroup: ChiptapCommand ، Selecsource ، Ismultiline ، DisplayMember
TextedIt: نص نائب ، نص
DXButton: Command ، icon

تفاصيل التنفيذ

استخدم SafeKeyboardAreaView كجذر لتخطيط العرض. عند تنفيذها بهذه الطريقة ، لن تتداخل لوحة مفاتيح الجهاز مع عرض الرسالة عندما تظهر على الشاشة.
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```

استخدم عنصر التحكم DXCollectionView لعرض الرسائل. حدد قوالب مصدر البيانات وقوالب العناصر (استخدم قوالب مختلفة للمرسل والمستقبل). مجموعات العناصر التي تستخدم خوارزمية مدمجة تستخدم نطاقات التاريخ/الوقت ("اليوم" ، "أمس" ، "الأسبوع الماضي" ، إلخ). حدد قالب لرؤوس المجموعة.

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

استخدم مكونات DXContentPresenter لتحديد القوالب لرسائل المرسل والمستقبل.

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

اتصل بالطريقة DXCollectionView.ScrollTo() لتمرير العرض إلى الرسالة الأخيرة.

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

استخدم عنصر التحكم ChipGroup لعرض إجابات قصيرة.

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

استخدم عنصر التحكم TextEdit لإنشاء/عرض حقل إدخال رسالة نصية. لإرسال الرسالة ، حدد عنصر تحكم DXButton.

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