maui chat app

DeVexpress .NET Maui 구성 요소를 사용하여 채팅보기를 작성하십시오.

이 예제는 DeVexpress .NET Maui 구성 요소를 사용하여 발신자 및 수신기 메시지, 제안 된 빠른 답장 및 응답 입력 컨트롤과 채팅보기를 표시합니다.

제어 및 그 속성이 포함되어 있습니다

• dxcontentPresenter : 내용, 수평선
• DXBORDER : verticalOptions, isvisible
• 레이블 : 텍스트
• dxCollectionView : GroupheaderTemplate, allowgroupcollapse, itemsource, itemtemplate
• SafeKeyboardareaview
• ChipGroup : Chiptapcommand, Itmessource, Ismultiline, DisplayMember
• TextedIt : 자리 표시 텍스트, 텍스트
• dxbutton : 명령, 아이콘

구현 세부 사항

1. SafeKeyboardAreaView 를 뷰 레이아웃의 루트로 사용하십시오. 이러한 방식으로 구현되면 장치 키보드는 화면에 표시 될 때 메시지보기와 겹치지 않습니다.

   < dx : SafeKeyboardAreaView > 
       ... 
   </ dx : SafeKeyboardAreaView >

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

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

4. DXCollectionView.ScrollTo() 메소드를 호출하여 마지막 메시지로 뷰를 스크롤하십시오.

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

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

6. TextEdit 컨트롤을 사용하여 문자 메시지 입력 필드를 작성/표시하십시오. 메시지를 보내려면 dxbutton 컨트롤을 지정하십시오.

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

검토 할 파일

• mainpage.xaml
• mainpage.xaml.cs
• chatViewModel.cs

선적 서류 비치

• dxcontentPresenter
• dxcollectionView
• dxborder
• SafeKeyboardareaview
• 칩 그룹
• 문자

더 많은 예

• DeVexpress .NET Maui 데모 센터
• Blazor ai 채팅
• 주식 앱
• 데이터 그리드
• 데이터 양식
• 데이터 편집기
• 차트
• 스케줄러
• 탭 페이지
• 탭보기
• 서랍 페이지
• 서랍보기
• 컬렉션보기
• 팝업

이 예제는 귀하의 개발 요구 사항/목표를 다루나요?

(응답을 제출하려면 devexpress.com으로 리디렉션됩니다)