sergepilipchuk / maui-chat-control

Use DevExpress .NET MAUI Components to Build a Chat View

This example uses DevExpress .NET MAUI Components to display a chat view with sender and receiver messages, suggested quick replies, and response input controls.

Included Controls and Their Properties

• DXContentPresenter: Content, HorizontalOptions
• DXBorder: VerticalOptions, IsVisible
• Label: Text
• DXCollectionView: GroupHeaderTemplate, AllowGroupCollapse, ItemsSource, ItemTemplate
• SafeKeyboardAreaView
• ChipGroup: ChipTapCommand, ItemsSource, IsMultiline, DisplayMember
• TextEdit: PlaceholderText, Text
• DXButton: Command, Icon

Implementation Details

1. Use a SafeKeyboardAreaView as the root for the view layout. This way, the device keyboard will not overlap the message view when it appears.

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

2. Use the DXCollectionView control to display messages. Specify the data source and item templates (use different templates for sender and receiver). Groups items using a built-in algorithm that uses date/time ranges ("Today", "Yesterday", "Last Week", and so on). Specify a template for group headers.

       <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. Use DXContentPresenter components to define templates for sender and receiver messages.

       <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. Call the DXCollectionView.ScrollTo() method to scroll the view to the last message:

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

5. Use the ChipGroup control to display short answers:

   <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. Use the TextEdit control to create an input field where a user can text a message. To send the message, specify the DXButton control.

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

Files to Review

• MainPage.xaml
• MainPage.xaml.cs
• ChatViewModel.cs

Documentation

• DXContentPresenter
• DXCollectionView
• DXBorder
• SafeKeyboardAreaView
• ChipGroup
• TextEdit

More Examples

• DevExpress .NET MAUI Demo Center
• Stocks App
• Data Grid
• Data Form
• Data Editors
• Charts
• Scheduler
• Tab Page
• Tab View
• Drawer Page
• Drawer View
• Collection View
• Popup