c# - UWP XAML ScrollViewer how to show visual indicator of scrollable content

Question

Is there a way to visually indicate that there is scrollable content below the visible area of a <ScrollViewer>?

I see this effect in applications like Microsoft Teams. A shadow appears at the bottom of the scrollable area to indicate that more content is present.

None of the properties of <ScrollViewer> seem to be a clear match. But I'm hoping I can avoid having to programmatically show/hide an element below the <ScrollViewer> based on the scroll position.

Answer 1

I have to say that currently there is no built-in API in ScrollViewer that could directly show a shadow there if the content is not ended.

You might still need to check it programmatically by handling the ViewChanged event of the ScrollViewer and add a custom element.

You could use the following code to check if the ScrollViewer reaches the end:

    <Grid>
    <ScrollViewer Name="MyScrollViewer" ViewChanged="MyScrollViewer_ViewChanged">
        <Rectangle
            x:Name="MyRectangle"
            Width="3000"
            Height="3000"
            Fill="Blue"
            Margin="20" />
    </ScrollViewer>
</Grid>

Code behind:

  private void MyScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        var verticalOffset = MyScrollViewer.VerticalOffset;
        var maxVerticalOffset = MyScrollViewer.ScrollableHeight;

        if (maxVerticalOffset < 0 || verticalOffset == maxVerticalOffset)
        {
            // content reaches the end
            MyRectangle.Fill = new SolidColorBrush(Colors.Red);
        }
        else
        {
            // content does not reach the end
            MyRectangle.Fill = new SolidColorBrush(Colors.Blue);
        }
    }