How to show message delivered status with tick symbol in .NET MAUI Chat(SfChat)?

To implement message delivered status such as sent, delivered, and read, with a tick symbol in our .NET MAUI Chat control, follow the steps below,

Create a custom template for outgoing messages. Include the necessary elements or controls and integrate the tick symbol icon within the Label element to indicate the message status.

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:avatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
            xmlns:convertor="clr-namespace:MauiChat.Convertor"
            x:Class="MauiChat.OutgoingMessageTemplate">
   
   <ContentView.Resources>
       <ResourceDictionary>
           <convertor:OutgoingMessageSeenIconColorConverter x:Key="OutgoingMessageSeenIconColorConverter"/>
       </ResourceDictionary>
   </ContentView.Resources>
   
   <ContentView.Content>
       <Grid>
                 . . .
                 . . .
                 . . .
                   <!-- Message Text -->
                   <Label Grid.Column="0"
                          Text="{Binding Text}"
                          TextColor="#212121"
                          FontFamily="Roboto"
                          FontSize="15"
                          LineBreakMode="WordWrap"
                          VerticalTextAlignment="End"
                          HorizontalTextAlignment="Start" />

                   <!-- For Delivered status icon-->
                   <Label Grid.Column="1"
                          Text=""
                          FontFamily="MauiSampleFontIcon"
                          FontSize="12"
                          VerticalOptions="End"
                          HorizontalOptions="End"
                          Margin="6,0,0,0"
                          TextColor="{Binding IsMessageSeen, Converter={StaticResource OutgoingMessageSeenIconColorConverter}}" />
                . . . 
                . . .
                . . .
   </ContentView.Content>
</ContentView> 

Initialize the MessageTemplate using a custom template selector derived from ChatMessageTemplateSelector.

public MainPage()
{
   InitializeComponent();
   this.sfChat.MessageTemplate = new ChatMessageTemplateSelectorExt(this.sfChat);
}

public class ChatMessageTemplateSelectorExt : ChatMessageTemplateSelector
{
   #region Fields

   private readonly DataTemplate? outgoingDataTemplate;
   private readonly DataTemplate? inComingDataTemplate;

   #endregion

   #region Public Properties

   public SfChat? Chat { get; set; }
   #endregion

   #region Constructor

   public ChatMessageTemplateSelectorExt(SfChat chat) : base(chat)
   {
       this.Chat = chat;
       this.outgoingDataTemplate = new DataTemplate(typeof(OutgoingMessageTemplate));
       this.inComingDataTemplate = new DataTemplate(typeof(IncomingMessageTemplate));
   }

   #endregion

   #region Override methods
   protected override DataTemplate? OnSelectTemplate(object item, BindableObject container)
   {
       var message = item as IMessage;
       if (message == null || Chat == null)
       {
           return null;
       }

       if (message.Author == Chat!.CurrentUser)
       {
           return outgoingDataTemplate;
       }
       else
       {
           return inComingDataTemplate;
       }
   }
   #endregion
} 

In the ViewModel, create a custom class extending TextMessage and include the boolean property (IsMessageSeen) to hold the message’s delivered status.

public class TextMessageExt : TextMessage, INotifyPropertyChanged
{
   public event PropertyChangedEventHandler? PropertyChanged;
   private bool isMessageSeen;
   public bool IsMessageSeen
   {
       get
       {
           return isMessageSeen;
       }
       set
       {
           isMessageSeen = value;
           RaisePropertyChanged(nameof(IsMessageSeen));
       }
   }
   public void RaisePropertyChanged(string propName)
   {
       if (this.PropertyChanged != null)
       {
           this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
       }
   }

} 

Create a color converter that changes the tick icon color based on the IsMessageSeen boolean property:

public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
   if (value != null && (bool)value)
   {
       return Colors.Blue;
   }

   return Colors.DarkGray;
} 

In the Outgoing message template, bind the IsMessageSeen property and the color converter to the TextColor property, to change the tick color.

<Label Grid.Column="1"
           Text=""
           FontFamily="MauiSampleFontIcon"
           FontSize="12"
           VerticalOptions="End"
           HorizontalOptions="End"
           Margin="6,0,0,0"
           TextColor="{Binding IsMessageSeen, Converter={StaticResource 
           OutgoingMessageSeenIconColorConverter}}" /> 

Output

Download the complete sample from GitHub

Conclusion:
I hope you enjoyed learning how to show the message delivered status with a tick in .NET MAUI Chat.

You can refer to our .NET MAUI Chat feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!