Message avatar

[Magnus Krona]

Hi

Is there a way to control how the avatar for a message is rendered? I need to get the avatar from a secured url and need to add a jwt token to the HttpClient request. In the sfListView for example, I can use the FFImageLoading package to handle this in a custom CellView. I need to do something similar in a sfChat message.

Any suggestions?

Regards

Magnus

[Chandrasekar Sampathkumar]

Hi Magnus, 

Thank you for using Syncfusion products. 

We have checked the reported query “Customize avatar view in SfChat” from our end. We would like to let you know that you can achieve your requirement by applying target style to IncomingMessageAvatarView and OutgoingMessageAvatarView in SfChat. Please refer the following code snippets for more reference, 

Xaml: Apply target style to IncomingMessageAvatarView and OutgoingMessageAvatarView 

<ContentPage.Resources> 

    <ResourceDictionary> 

        <Style TargetType="sfchat:IncomingMessageAvatarView"> 

            <Setter Property="ControlTemplate"> 

                <Setter.Value> 

                    <ControlTemplate> 

                        <local:AvatarContainer/> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

        <Style TargetType="sfchat:OutgoingMessageAvatarView"> 

            <Setter Property="ControlTemplate"> 

                <Setter.Value> 

                    <ControlTemplate> 

                        <local:AvatarContainer/> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

    </ResourceDictionary> 

</ContentPage.Resources> 

Xaml: Custom avatar content view 

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

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

             xmlns:d="http://xamarin.com/schemas/2014/forms/design" 

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:ffimageloading="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms" 

             mc:Ignorable="d" 

             x:Class="GettingStarted.AvatarContainer"> 

    <ffimageloading:SvgCachedImage  HeightRequest="40" WidthRequest="40"     

             HorizontalOptions="StartAndExpand" VerticalOptions="Start" Aspect="Fill"  

             Source="{TemplateBinding BindingContext.Author.Avatar}" Margin="0"/> 

</ContentView> 

We have prepared simple sample based on your requirement and you can download the same using the following link, 

Sample link: Sample 

Please let us know if would require further assistance. 

Regards, 

Chandrasekar Sampathkumar 

[Magnus Krona]

Thank you! Very nice solution!

/Magnus

[Chandrasekar Sampathkumar]

Hi Magnus, 

Thank you for the update. We are glad that the given solution meets your requirement. Please get in touch with us if you would require any further assistance in future. 

Regards, 

Chandrasekar Sampathkumar