CODEWITHSUNDEEP
c#xamluwpuwp-xaml
David
David

Reputation: 1770

UWP XAML ScrollViewer how to show visual indicator of scrollable content

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.

enter image description here

enter image description here

Upvotes: 0

Views: 319

Answers (1)

Roy Li - MSFT
Roy Li - MSFT

Reputation: 8681

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);
        }
    }

Upvotes: 1

Related Questions