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

Question

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

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

None 的属性似乎与 <ScrollViewer> 很匹配。但我希望我可以避免以编程方式 show/hide 一个元素 below <ScrollViewer> 基于滚动位置。

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

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

UWP XAML ScrollViewer how to show visual indicator of scrollable content

c#

xaml

uwp

uwp-xaml