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 tick symbol in our .NET MAUI Chat control, follow the below steps,

Define the custom template for outgoing messages, including the necessary elements or controls and integrate or bind the tick symbol icon within the Label element of this template to indicate the message status.

<?xml version="1.0" encoding="utf-8" ?>
<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 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 Outgoing message template, bind the IsMessageSeen property and the color converter to 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}}" /> 

View Sample in GitHub

Conclusion:
We hope this article helped you understand how to show the message delivered status using tick symbol in .NET MAUI Chat using template and converters.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!