Scroll to End

[JoeMayo]

I have a use case to show progress on a job and it's important, for transparency, for the user to see every activity. Right now, everything scrolls out of sight, but it would be nice to ScrollToEnd. I used a ListBox, though I looked at other controls and it seems that this wasn't supported on any of them.

Am I missing something or does anyone have a work-around?

[agneszitte]

Hi @JoeMayo, are you able to reproduce your current issue in a little sample app, please? Or share a code snippet similar to your current code. Thank you in advance for your feedback.

[Ibrahim12404]

I believe what he is trying to say is that when you add new items to, let's say, a ListView, dynamically, the listview does not scroll to the bottom to show what new things are added. They remain out of sight. The user would need to manually scroll to the bottom by dragging the scrollbar to see what new is added. I think what he is saying is that he needs something like ScrollToEnd() that would scroll to the bottom of the list automatically and show the new items that are added when they are added and things not be out of sight. I think that is what he is trying to say.

This could be easily done by ListViewBase.ScrollIntoView(...). But, this is not implemented on any platform.

But, there are work-arounds (the video attached uses the work-around and that is what it does when "Scroll to End" button is clicked; one could add the code behind the "Scroll to End" button to scroll to end dynamically when new things are added to the list if he wanted to).

Anyway, if this is not what JoeMayo is looking for, ignore this post. If it is, I can put the code here to achieve the work-around. It seems to work on wasm, skia etc.

Scroll.to.End.mp4

[JoeMayo]

@Ibrahim12404 Yes, that's what I want to do.

[Ibrahim12404]

This below is the code behind the little demo video.

    // Create a StackPanel
    var stackPanel = new StackPanel();

    // Create a Border for the listView
    var border = new Border();
    border.BorderBrush = new SolidColorBrush(Colors.Blue);
    border.BorderThickness = new Thickness(1); // Adjust thickness as needed

    // Create a ListView
    var listView = new ListView();
    listView.Height = 300;

    // Populate the ListView with some initial data
    for (int i = 1; i <= 100; i++)
    {
        listView.Items.Add("Item " + i);
    }

    // Add margin to ListView for space
    border.Margin = new Thickness(0, 0, 0, 10); // Adjust the bottom margin as needed

    // Set the ListView as the Child of the Border
    border.Child = listView;

    // Add the border to the StackPanel
    stackPanel.Children.Add(border);

    //Create a Button to add nre items
    var btnAdd = new Button();
    btnAdd.Content = "Add new item";
    btnAdd.HorizontalAlignment = HorizontalAlignment.Center;
    btnAdd.Margin = new Thickness(0, 0, 0, 10);

    //Handle a click event for the Add new item Button
    btnAdd.Click += (s, e) =>
    {
        string listviewlastitem = (listView.Items[listView.Items.Count - 1] as string).ToString();
        int number = int.Parse(listviewlastitem.Split(' ')[1]);
        listView.Items.Add("Item " +  (number + 1).ToString());
    };

    // Create a Button for the scrolling
    var btnScroll = new Button();
    btnScroll.Content = "Scroll to End";
    btnScroll.HorizontalAlignment = HorizontalAlignment.Center;

    // Handle button click event for the Scroll to End Button
    btnScroll.Click += (sender, e) =>
    {
        // Scroll to the end
        var scrollViewer = listView.FindName("ScrollViewer") as ScrollViewer;
        if (scrollViewer != null)
        {
            scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight);
        }
    };

    // Add the buttons to the StackPanel
    stackPanel.Children.Add(btnAdd);
    stackPanel.Children.Add(btnScroll);

    // Add StackPanel to the page
    this.Content = stackPanel;

[Ibrahim12404]

This is how it does it.

// Scroll to the end
var scrollViewer = listView.FindName("ScrollViewer") as ScrollViewer;
if (scrollViewer != null)
{
scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight);
}

[dr1rrb]

The property you want is actually the ItemsStackPanel.ItemsUpdatingScrollMode.

Unfortunately this property is not yet supported by uno.

As a workaround you can use this behavior that was made for the ChatGPT sample app : https://github.com/unoplatform/Uno.Samples/blob/master/UI/ChatGPT/ChatGPT/ChatGPT/Behaviors/AutoScrollListViewBehavior.cs It's not perfect and is probably leaking as-is, but it should give you some hints on how you can do that :)

[JoeMayo]

@dr1rrb

This helped a lot. Here's what I ended up doing, based on what you shared. I'm using MVUX and had a FeedView on my page

        <mvux:FeedView
          x:Name="ingestionFeedView"
          Source="{Binding Progress}"
          Grid.Row="1">
          <DataTemplate>
            <ListView
                x:Name="ingestionListView"
                Grid.Row="1"
                Margin="10"
                ItemsSource="{Binding Data}"
                Loaded="ListView_Loaded">
              <DataTemplate>
                <TextBlock Text="{Binding}"/>
              </DataTemplate>
            </ListView>
          </DataTemplate>
        </mvux:FeedView>

The ListView was a bit challenging to reference, so I put a Load event handler in the code behind:

    public ListView? IngestionListView { get; set; }
    public ScrollViewer? IngestionScrollViewer { get; set; }

    private void ListView_Loaded(object sender, RoutedEventArgs e)
    {
        IngestionListView = sender as ListView;

        if (IngestionListView is null)
            return;

        IngestionScrollViewer = IngestionListView.FindFirstDescendant<ScrollViewer>();
    }

The whole reason I'm putting that code there was so I can reference the ListView and it's ScrollViewer. I wanted to keep my loose coupling with the model. So, I added this EventAggregator:

public class EventAggregator
{
    static readonly EventAggregator instance = new();
    readonly Dictionary<Type, object> subscriptions = new();

    public static EventAggregator Instance => instance;

    public void Subscribe<T>(Action<T> action)
    {
        if (!subscriptions.ContainsKey(typeof(T)))
            subscriptions[typeof(T)] = new List<Action<T>>();

        ((List<Action<T>>)subscriptions[typeof(T)]).Add(action);
    }

    public void Publish<T>(T message)
    {
        if (subscriptions.ContainsKey(typeof(T)))
            foreach (var action in (List<Action<T>>)subscriptions[typeof(T)])
                action(message);
    }
}

This lets me communicate between model and view, where the model publishes the event:

    public IListState<string> Progress => ListState<string>.Async(this, StartProgressAsync);

    public async Task StartIngestionAsync()
    {
        try
        {
            cancelSource = new CancellationTokenSource();

            IProgress<IngestionProgress> progress = new Progress<IngestionProgress>(
                async ingestionProgress =>
                {
                    string message =
                        ingestionProgress.CurrentCount > 0 ?
                            $"[{ingestionProgress.CurrentCount}] {ingestionProgress.Message}" :
                            ingestionProgress.Message;

                    await Progress.AddAsync(message);

                    logger.LogInformation(message);

                    EventAggregator.Instance.Publish(new IngestionListUpdate());
                });

            await ingestion.IngestDocumentsAsync(progress, cancelSource.Token);

            EventAggregator.Instance.Publish(new IngestionListUpdate());
        }
        catch (Exception ex)
        {
            logger.LogError("Error during ingestion: {error}", ex);
        }
    }

Notice the call to EventAggregator.Instance.Publish(new IngestionListUpdate()); for each progress update.

Note: The IListState<string> Progress binds to the FeedView.

Then, I subscribe in the view, like this:

    public ListView? IngestionListView { get; set; }
    public ScrollViewer? IngestionScrollViewer { get; set; }

    public MainPage()
    {
        this.InitializeComponent();
        EventAggregator.Instance.Subscribe<IngestionListUpdate>(OnListUpdated);
    }

    void OnListUpdated(IngestionListUpdate message)
    {
        if (IngestionListView is null || IngestionScrollViewer is null) 
            return;

        IngestionListView.DispatcherQueue.TryEnqueue(
            () => IngestionScrollViewer?.ChangeView(null, IngestionScrollViewer.ExtentHeight, null));
    }

Calling EventAggregator.Instance.Subscribe<IngestionListUpdate>(OnListUpdated); in the constructor ensures that we scroll to end every time we receive the IngestListUpdate event.

On anomaly is that it doesn't really scroll to the end. I tried the other properties of IngestionScrollViewer; some threw exceptions and others weren't as effective. That said, this is a better experience for the user than what I had before.