imagebutton over image

[Walter Martin]

I'd like to show an image in the chat as a message with an imagebutton over it like other chat applications  where  you have to click on the button to download the image.

I see I could use the sfcard inside the chat but in this case the button is added below the image and not over it.

Is there a way to accomplish this ?

 thanks

[Jayashree Ravishankar]

Hi Walter Martin,

We regret to inform you that the .NET MAUI SfChat control currently lacks built-in support to display an image button or other elements over an image.

As a workaround, you can create a custom template to overlay an image button on the image.

Please refer the attached code snippet:

 protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

 {

     var message = item as IMessage;

 

     if (message == null)

         return null;

 

 

     if (item is IImageMessage)

     {

         if (item as IImageMessage != null && (item as IImageMessage).Author.Name == viewModel.CurrentUser.Name)

         {

             return outgoingCustomImageTemplate;

         }

         else

         {

             return incomingCustomImageTemplate;

         }

     }

     else if (item as ITextMessage != null && (item as ITextMessage)!.Author.Name == viewModel.CurrentUser.Name)

     {

         return outgoingTemplate;

     }

     else

     {

         return incomingTemplate;

     }

 }

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="ChatMaui.Template.IncomingCustomImageMessageTemplate">

    <VerticalStackLayout Padding="50,0,0,0">

        <Border HeightRequest="250" WidthRequest="300" HorizontalOptions="Start">

            <Grid>

                <Image Source="{Binding Source}" HeightRequest="200" WidthRequest="200"

                        HorizontalOptions="Center" VerticalOptions="Center"/>              

               

                <ImageButton x:Name="imageButton" Source="download2.png" WidthRequest="30" HeightRequest="30"

                              HorizontalOptions="Center" VerticalOptions="Center"

                             Clicked="ImageButton_Clicked"/>

            </Grid>

        </Border>

    </VerticalStackLayout>

</ContentView>

UG https://help.syncfusion.com/maui/chat/messages#template-for-message

We have attached a sample for your reference. Please review it, and let us know if you have further questions.

Regards,

Jayashree

Attachment: ChatMaui_8a0af3c8.zip