Chat Control Template for Images

[Vuyiswa]

Good Day 

I Managed to do a lot with the Chat Control but i hit a few problems but managed to have work arounds . Now the Chat that is based on text only works perfectly fine and now i am bringing images and i have implemented the Templates for different kinds of messages, images, receiver and Sender and later will do a video if i can make this work on images. The images are not consistent. i am attaching png of small sizes like this one 

Example Image  this image is 61kb , if it is viewed it should show immediately  , but it does not . Let me  explain my process 

Step 1 : i Store an Image file on the server 

 

Step 2 : Make an Entry of that image on the DB (image url ) 

Step 3 :  Make an Entry of just attached image on the Chat Control like this 

 

try
{

        Author senderitem = new Author();
        senderitem.Name = model.AUTHOR;

        TextMessage textMessage = new TextMessage();
        textMessage.Data = model;
        textMessage.Author = senderitem;
        textMessage.Text = model.ATTACHEMENTURL;

    Device.BeginInvokeOnMainThread(() =>
    {
        this.chat.Items.Add(textMessage);
    });

}
catch (Exception ex)
{
   await DisplayAlert("Error:".Translate(), ex.Message, "Ok".Translate());
}

 

and after i do that i get an empty white item on the chat control 

Image that shows an empty item

Now when i close my window or open it again i load the chats , it loads the images fast  like as it does here 

Chat Reload

sometimes images load immediately after attaching them, but most of the time i have to close the chat control and open it again and it loads the image images.  i have a video showing the behavior  here 

Video of the Issue

Thanks

 

[Yana]

Hi Vuyiswa,

Thank you for sending the images and the video.

Still, it is really hard to tell what could be the reason for the issue you've observed without seeing the exact implementation and reproducing the case locally.

An assumption I have is that there could be an issue with resizing the image the first time it is shown - so, please try setting its Height property to a fixed value.

If this does not help, I would ask you to send me at least the used templates, so I could try to replicate and investigate the case on my side.

Regards,
Yana
Progress Telerik

[Vuyiswa]

Good Day 

Thank you the height helped to load the images faster. since i was sing the generic image control , i had to look for another image control that can give me functionality of lazy loading so that the user can see the image is loading. i came across 

ffimageloading 

https://github.com/luberda-molinet/FFImageLoading

and it did the work , now to loading is faster than ever. 

Thank you

[Lance | Manager Technical Support]

Hello Vuyiswa,

I'm happy to see you were able to find a solution. Indeed, I recommend using FFImageLoading's CachedImage instead of the vanilla Image in a Xamarin.Forms project.

I also recommend that you take a look at the Xamarin.Forms Advanced topic in their wiki. It shows you how to get even better performance by avoiding Xamarin.Forms's Binding mechanism for recycled cell containers. Also take a look at the General Advanced wiki for tips on using your own HttpclientHandler and more

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik