How to make a sfchat to scroll down to the bottom automatically when a new message is received?

[Ilnam]

Xaml file                      

< FlowDirection="MatchParent"

                       Messages="{Binding Messages}"

                       SendMessageCommand="{Binding SendMessageCommand}"

                       TypingIndicator="{Binding TypingIndicator}"

                       ShowTypingIndicator="{Binding ShowTypingIndicator}"

                       CurrentUser="{Binding CurrentUser}"

                       MessageShape="TearDrop">

Viewmodel

Message Command:

     this.SendMessageCommand = new Command(async (args) =>

            {

                (args as SendMessageEventArgs).Message.ShowAvatar = true;

                await PostTextAsync((args as SendMessageEventArgs).Message.Text);

            });

PostTextAsync Method

private async Task PostTextAsync(string inputText)

        {

            this.ShowTypingIndicator = true;

            await Task.Delay(1000);

            TypingIndicator.Text = "Jena is typing...";

          this.Messages.Add(new TextMessage()

            {

                DateTime = DateTime.Now,

                ShowAuthorName = true,

                Author = new Author() { Name = "Jena", Avatar = "jena_chat_icon" },

                Text = "This is an incoming message.",

                ShowAvatar = true,

            });

          ShowTypingIndicator = false;

}

Hello,

I am using the sfchat on my new project now but I am not sure how to automatically scroll down to show the newest message. Can you please provide a sample code or idea for that?

Thank you,

Jay

[Karthikraja Kalaimani]

Hi IInam,

Thank you for contacting Syncfusion support.

Your requirement can be achieved by passing the new message to ScrollToMessage(object)  method in SfChat control. We have attached the sample for your reference.

Code Example,

 

public class MainPageBehavior: Behavior 

    { 

 

       private GettingStattedViewModel viewModel; 

 

       private SfChat sfChat; 

        public MainPageBehavior() 

        { 

 

        } 

 

        protected override void OnAttachedTo(MainPage bindable) 

        { 

            this.sfChat = bindable.FindByName("sfChat"); 

            this.viewModel = bindable.FindByName("viewModel"); 

            this.viewModel.Messages.CollectionChanged += Messages_CollectionChanged; 

 

            base.OnAttachedTo(bindable); 

        } 

 

        private async void Messages_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) 

        { 

            if (e.Action == NotifyCollectionChangedAction.Add) 

            { 

                foreach (var chatItem in e.NewItems) 

                { 

                    TextMessage textMessage = chatItem as TextMessage; 

                    if (textMessage != null && textMessage.Author == this.viewModel.CurrentUser) 

                    { 

                        textMessage.ShowAvatar = false; 

                    } 

                    else 

                    { 

                        await Task.Delay(50); 

                        this.sfChat.ScrollToMessage(chatItem); 

                    } 

                } 

            } 

 

        } 

 

        protected override void OnDetachingFrom(MainPage bindable) 

        { 

            this.viewModel.Messages.CollectionChanged -= Messages_CollectionChanged; 

            this.sfChat = null; 

            this.viewModel = null; 

            base.OnDetachingFrom(bindable); 

        } 

 

 

    } 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chat_Getting_started_(1)459779716.zip

Video link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_Reference_151361-2057497746.zip

We hope this helps, please let us know if need further assistance from us.



Regards,
Karthik Raja 

[Brad Dean]

Is this possible without breaking the MVVM pattern? Can we tell SfChat to automatically scroll to bottom when new messages are added?

[Karthikraja Kalaimani]

Hi Brad,

Currenlty, we don’t have a property to scroll the messages. So we suggest you to write a behavior for Sfchat to avoid breaking MVVM rules.

This below link helps to write behavior for the view.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/

Regards, 

Karthik Raja 

[Ilnam]

Hello Brad,

Try this way. You can use the scrollToMessage function without breaking the MVVM pattern.

YourViewPage.cs

YourViewModel vm;

bool IsReady;

public ViewPage()

{

            InitializeComponent();

            this.BindingContext = vm = new YourViewModel();

            IsReady = true;

            vm.Messages.CollectionChanged += Messages_CollectionChanged;

}

void Messages_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

{

            if (IsReady)

            {

                IsReady = false;

                foreach (var chatItem in e.NewItems)

                {

                    TextMessage textMessage = chatItem as TextMessage;

                    this.sfChat.ScrollToMessage(chatItem);

                }

            }

            IsReady = true;

}

- Ilnam

[Brad Dean]

Thank you, Ilnam.

However, I'd love to see a method that truly separates the UI and ViewModel.

I've added a feedback request for a XAML based "ScrollToBottomOnNewMessages=true" type feature if anyone else wants the same:

https://www.syncfusion.com/feedback/13038/support-to-automatically-scroll-to-bottom-on-new-messages

[Karthikraja Kalaimani]

Hi Brad,

We have analyzed the feature “Scroll the messages by using property in SfChat” and considered to implement this support our upcoming 2020 Volume 2 release which is scheduled on end of June 2020. We appreciate your patience until then.

 

Regards, 

Karthik Raja 

[Farjana Parveen Ayubb]

Hi Brad, 

We are glad to announce that our Essential Studio 2020 Volume 1 service pack release v18.1.0.52 is rolled out with your requested feature “Support to automatically scroll to bottom on new messages” and is available for download under the following link.  

https://www.syncfusion.com/forums/154238/essential-studio-2020-volume-1-service-pack-release-v18-1-0-52-is-available-for-download 

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  

   

Regards, 

Farjana Parveen A