How to autoscroll ScrollViewer to bottom?

[arnirichard]

I am implementing a chat (ListBox) which should be auto-scrolled to bottom unless if the user has manually scrolled up.

How to detect that user manually scrolled up?

[timunie]

You may need to track the current offset somewhere and if the scrollviewer is at the buttom currently (before adding a new item). I don't see a different option.

Avalonia.Behaviors may be helpful in this case to track it.

[arnirichard]

The problem is for example when the ListBox area is reduced (window resized), even if the scroll is at the bottom then the offset will shrink, thus the scroll is not at the bottom anymore.

I am checking in ListBox.LayoutUpdated if the Extent.Height has changed, trying to detect this case, but sometimes Offset.Y has shrunk while the Extent.Height is unchanged. So it looks like the offset is reduced while ListBox size stays the same.

It would be much better if the scroll would stay at bottom when ListBox height is changed (by resizing window).

[timunie]

Yeah there's no easy solution here. I'd listen to sizechanged of the ListBox and autoscroll if needed. But again, there may be more cases where its needed.

[arnirichard]

I will try that, thanks

[arnirichard]

It would be more logical if offset is at maximum then it should stay that after resize. I thought maybe this could be improved in how Avalonia recalculates the offset.

[arnirichard]

When scroll is at top it will stay at the top when the ListBox is resized. However this does not apply if the scroll is at the bottom.

[maxkatz6]

Keep in mind, that content should be fully loaded before scrolling. As before it doesn't have any height yet.
Dispatcher.UIThread.Post usually helps here, as it delays code to the next iteration in the UI thread queue.

[arnirichard]

It is fully loaded, and bigger than the ListBox. I scroll to the bottom, resize the ListBox(make it smaller and larger, repeating) and the scroll will automatically move from the bottom. If you like I could upload a project demonstrating this.

[timunie]

You can do upload a minimal sample, sure. Can't promise anyone has time to look into, but worth it imo.

[arnirichard]

I uploaded a simple project here:

https://github.com/arnirichard/avalonia_scroll

This is very simple, when the scroll is located at the bottom and the window is shrunk from below then the items do not move up, they stay in same place on the screen, effectively moving the scroll position off the bottom.

However, scrolling to the top and shrinking the window from the top will move the items down, keeping the scroll at the top.

Apparently this is designed like that, but I question this design since the behavior is not symmetric. This makes it more difficult to design a chat window where the scroll sticks to the bottom.

One could argue that the items should stay in place when items are added/removed outside of the view, so it may make sense to design this scroll behavior like that. So we can close the discussion for now, I can try to implement this behavior by looking at the SizeChanged and other events.

[timunie]

arnirichard/avalonia_scroll#1

[arnirichard]

@timunie Thank you so much! It works with resize and I will test it with changes in content

[arnirichard]

Small correction, if I reduce the size of the ListBox, the scroll will come off the bottom. Which seems is in contrast to the behavior when the scroll is at the top.

[kyuranger]

I have a strange way that can solve this easily while I don't know whether it is what you need.

XAML:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.MainWindow"
		xmlns:Local="using:AvaloniaApplication1"
        Title="AvaloniaApplication1">
	<Grid RowDefinitions="auto,*">
		<Button Name="B">Add</Button>
		<ScrollViewer Grid.Row="1" Name="SV">
			<Grid RowDefinitions="*,auto">
				<ListBox Name="LB" ItemsSource="{Binding TestOC}">
					<ListBox.ItemsPanel>
						<ItemsPanelTemplate>
							<VirtualizingStackPanel/>
						</ItemsPanelTemplate>
					</ListBox.ItemsPanel>
				</ListBox>
				<TextBlock Grid.Row="1">Reach The End</TextBlock>
			</Grid>
		</ScrollViewer>
	</Grid>
</Window>

Code-Behind:

using Avalonia.Controls;
using Avalonia.Data.Converters;
using Avalonia.Media;
using Avalonia.Threading;
using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Globalization;
using System.Threading.Tasks;

namespace AvaloniaApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;            
            LB.SizeChanged += LB_SizeChanged;            
            B.Click += B_Click;
        }

        private void LB_SizeChanged(object? sender, SizeChangedEventArgs e)
        {
            if (e.HeightChanged)
            {
                SV.ScrollToEnd();
            }
        }      

        private void B_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
        {
            Random R = new Random();
            TestOC.Add(R.Next(1, 9).ToString());
        }

        public ObservableCollection<string> TestOC { get; set; } = new ObservableCollection<string>();

    }
}

This way is not perfect while it always not fully scrolls to the bottom. And I don't know what caused this.

[NickBarton]

Add an x:Name to your ScrollViewer and ItemsControl

<ScrollViewer x:Name="InformationScrollViewer" VerticalScrollBarVisibility="Visible" Height="60">
<ItemsControl x:Name="InformationSource" ItemsSource="{Binding Information}">

In the code behind, add event handler when the InformationSource changes:

   // in the constructor
  //
    InformationSource.PropertyChanged += InformationSource_PropertyChanged;
}

private void InformationSource_PropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
{
    InformationScrollViewer.ScrollToEnd();
}