Auto scroll to the end of a RichTextBlock after update

[AndreMarschalek]

A RichTextBlock Component is used to present important information. After adding additional content, the RichTextBlock should scroll down to the lowest possible position, to show the user the latest updates.
For Scrolling the RichTextBlock is child of a ScrollViewer:

<ScrollViewer Grid.Row="1" Name="Scroller">
   <RichTextBlock Name="Console" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Padding="10"/>
</ScrollViewer>

code behind

Paragraph paragraph = new Paragraph() { Margin = new Thickness(0) };
Run run = new Run();
run.Text = $"SUPERIMPORTANTSTUFF\n";
paragraph.Inlines.Add(run);
Console.Blocks.Add(paragraph);

Scroller.ScrollToVerticalOffset(Scroller.ScrollableHeight);

In this situation the scrollbar scrolls to the position where the new content starts, not at the end of the new content.
I did not find an event that i can use to implement the ScrollToVerticalOffset command.

ugly workaround

Paragraph paragraph = new Paragraph() { Margin = new Thickness(0) };
Run run = new Run();
run.Text = $"SUPERIMPORTANTSTUFF\n";
paragraph.Inlines.Add(run);
Console.Blocks.Add(paragraph);

Debug.WriteLine("1 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);
await Task.Delay(300);
Debug.WriteLine("2 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);
Scroller.ScrollToVerticalOffset(Scroller.ScrollableHeight);
Debug.WriteLine("3 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);

output

1 39, 0, 0
2 113, 14, 0
3 113, 14, 14

What's the way to implement this feature without adding a delay which could add some other problems on different clients?

[StephenLPeters]

I think that the delay is helping you because layout hasn't run yet, so there is no new extent for the scrollviewer to scroll into. I think a better workaround would be to post this to the UI thread using dispatcher runAsync for winui2 or tryEnqueue for winui3. Here on Winui2 (https://docs.microsoft.com/en-us/uwp/api/windows.ui.core.coredispatcher.runasync?view=winrt-19041#Windows_UI_Core_CoreDispatcher_RunAsync_Windows_UI_Core_CoreDispatcherPriority_Windows_UI_Core_DispatchedHandler_) or here on Winui3 https://docs.microsoft.com/en-us/windows/winui/api/microsoft.system.dispatcherqueue.tryenqueue?view=winui-3.0-preview#Microsoft_System_DispatcherQueue_TryEnqueue_Microsoft_System_DispatcherQueueHandler_ ( @RBrid can you weigh in?

[AndreMarschalek]

@StephenLPeters
to post to the UI thread using dispatcher like this

Debug.WriteLine("1 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);
DispatcherQueue.TryEnqueue(() =>
{
   Scroller.ScrollToVerticalOffset(Scroller.ScrollableHeight);
});
Debug.WriteLine("2 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);
await Task.Delay(300);
Debug.WriteLine("3 " + Scroller.ExtentHeight + ", " + Scroller.ScrollableHeight + ", " + Scroller.VerticalOffset);

only change you will not have an error message because you are trying to update the UI from a different thread
the delay is still required in that case

output

1 114, 50, 0
2 113, 50, 0
3 113, 50, 50

i think what helps, is an event, that informs, when the content update is finished

[AndreMarschalek]

@StephenLPeters any news?

[rubenseam]

@AndreMarschalek On my end I had a RichTextBlock as the content of a ScrollViewer, and listening to SizeChanged events from the RichTextBlock (upon addition/removal of content) did the trick. On the event handler I scroll to the scrollable height, which is then resolved to reflect the content's new size.

private void OutputRichTextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (AutoScrollToggle.IsChecked.GetValueOrDefault(false))
    {
        MainScrollViewer.ScrollToVerticalOffset(MainScrollViewer.ScrollableHeight);
    }
}