We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151361 Feb 7,2020 06:32 PM UTC Jun 17,2020 04:45 AM UTC Xamarin.Forms 7
loading
Tags: SfChat
Ilnam
Asked On February 8, 2020 06:11 AM UTC

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 [Syncfusion]
Replied On 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); 
        } 
 
 
    } 


Brad Dean
Replied On 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?

Karthikraja Kalaimani [Syncfusion]
Replied On 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 


Ilnam
Replied On 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


Brad Dean
Replied On 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:


Karthikraja Kalaimani [Syncfusion]
Replied On 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 


Farjana Parveen Ayubb [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon