UWP XAML ScrollViewer 如何显示可滚动内容的视觉指示器答案

【问题标题】：UWP XAML ScrollViewer how to show visual indicator of scrollable contentUWP XAML ScrollViewer 如何显示可滚动内容的视觉指示器
【发布时间】：2021-01-06 10:34:37
【问题描述】：

有没有办法直观地表明<ScrollViewer>的可见区域下方有可滚动内容？

我在 Microsoft Teams 等应用程序中看到了这种效果。可滚动区域底部出现阴影，表示存在更多内容。

<ScrollViewer> 的所有属性似乎都不完全匹配。但我希望我可以避免根据滚动位置以编程方式显示/隐藏<ScrollViewer> 下方的元素。

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案1】：

不得不说，目前ScrollViewer没有内置API可以直接在内容未结束的情况下显示阴影。

您可能仍需要通过处理ScrollViewer 的ViewChanged 事件并添加自定义元素以编程方式对其进行检查。

您可以使用以下代码检查ScrollViewer 是否到达末尾：

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

后面的代码：

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

【讨论】：