ดาวน์โหลด maui chat app - ดาวน์โหลด maui chat app Source Source

maui chat app

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

ใช้ส่วนประกอบ DevExpress .NET MAUI เพื่อสร้างมุมมองแชท

ตัวอย่างนี้ใช้ส่วนประกอบ DevExpress .NET MAUI เพื่อแสดงมุมมองการแชทกับข้อความผู้ส่งและตัวรับสัญญาณการตอบกลับอย่างรวดเร็วที่แนะนำและการควบคุมการตอบสนองการตอบสนอง

DevExpress Chat สำหรับ. net maui

รวมการควบคุมและคุณสมบัติของพวกเขา

dxContentPresenter: เนื้อหา, horizontaloptions
dxBorder: VerticalOptions, isvisible
ฉลาก: ข้อความ
DxCollectionView: GroupheaderTemplate, NowlgroupCollapse, itemsSource, itemTemplate
SafeKeyBoardAreaview
ChipGroup: ChiptapCommand, ItemsSource, Ismultiline, DisplayMember
TextEdit: PlaceHolderText, Text
dxButton: คำสั่งไอคอน

รายละเอียดการใช้งาน

ใช้ SafeKeyboardAreaView เป็นรูทสำหรับเค้าโครงมุมมอง เมื่อนำไปใช้ในลักษณะนี้คีย์บอร์ดอุปกรณ์จะไม่ทับซ้อนมุมมองข้อความเมื่อปรากฏบนหน้าจอ
```
< dx : SafeKeyboardAreaView > 
    ... 
</ dx : SafeKeyboardAreaView >
```
ใช้ DXCollectionView Control เพื่อแสดงข้อความ ระบุแหล่งข้อมูลและเทมเพลตรายการ (ใช้เทมเพลตที่แตกต่างกันสำหรับผู้ส่งและตัวรับสัญญาณ) รายการกลุ่มที่ใช้อัลกอริทึมในตัวที่ใช้ช่วงวันที่/เวลา ("วันนี้", "เมื่อวาน", "สัปดาห์ที่แล้ว" ฯลฯ ) ระบุเทมเพลตสำหรับส่วนหัวของกลุ่ม
```
< 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 >