1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to make a sfchat to scroll down to the bottom automatically when a new message is received?

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

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

7 Replies
KK Karthikraja Kalaimani Syncfusion Team February 10, 2020 12:27 PM UTC

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); 
        } 
 
 
    } 


BD Brad Dean March 28, 2020 09:57 PM UTC

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

KK Karthikraja Kalaimani Syncfusion Team March 30, 2020 12:25 PM UTC

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 


IL Ilnam March 30, 2020 02:27 PM UTC

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


BD Brad Dean March 30, 2020 03:24 PM UTC

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:


KK Karthikraja Kalaimani Syncfusion Team March 31, 2020 01:23 PM UTC

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 


FP Farjana Parveen Ayubb Syncfusion Team June 17, 2020 04:45 AM UTC

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.  
  
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 


Loader.
Up arrow icon