ImageMessage no header displayed

[Amr Yousef]

Hi,

     I've added a customized header to the chat control (IncomingMessageAuthorView) to display a menu and I followed your sample(https://github.com/SyncfusionExamples/show-drop-down-menu-on-tapping-a-message-in-Xamarin.Forms.Chat )

the header is displayed on the text messages and everything is working fine but on the

ImageMessage the header is hidden, is there a way to show the header?

thanks

[Suja Venkatesan]

Hi Amr,

We would like to let you know that ImageTemplate in SfChat directly displays image with author avatarview only, you can achieve your requirement “AuthorView for ImageTemplate” by defining custom template for ImageMessage as like below code.

Code snippet:

C#

public ChatPage()

{

  InitializeComponent();

  this.sfChat.MessageTemplate = new MessageTemplateSelector(sfChat);

}

 

public class MessageTemplateSelector : ChatMessageTemplateSelector

{

  private readonly DataTemplate imageTemplate;

  internal SfChat Chat

  {

   get;

   set;

  }

 

 public MessageTemplateSelector(SfChat sfChat) : base(sfChat)

 {

  this.Chat = sfChat;

  this.imageTemplate = new DataTemplate(typeof(ImageMessageTemplate));

 }

  protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

 {

  if (item as IImageMessage != null)

  {

     return this.imageTemplate;

   }

   return base.OnSelectTemplate(item, container);

}

 

XAML:

<ViewCell xmlns=http://xamarin.com/schemas/2014/forms

…

<ViewCell.View>

<StackLayout Grid.Row="0" Grid.Column="1" BackgroundColor="#FFFFFF"  Spacing="4" Padding="16,8,16,8">

   <local:IncomingMessageAuthorView x:Name="IncomingMessageAuthorView"

                                    Grid.Row="0"

                                    Grid.Column="0"

                                    HorizontalOptions="FillAndExpand"

                                    MinimumHeightRequest="15"/>

   <Frame  HasShadow="False" Padding="0" CornerRadius ="2" IsClippedToBounds="True">

     <Image  Aspect="{Binding Aspect}" x:Name="imageWave" Source="{Binding Source}"/>

   </Frame>

</StackLayout>

 

    </ViewCell.View>

</ViewCell>

Output:

We have attached a simple sample based on your requirement. Please have a look at this sample and let us know if you need any further assistance.

Regards,

Suja

Attachment: GettingStarted_4f4b313.zip