首页 > 解决方案 > 检测滚动条何时在 UWP 中可见

问题描述

ScrollViewerUWP 中,我需要检测滚动条或平移​​指示器何时可见,以便我可以向 ScrollViewer 添加填充,以便滚动条在可见时不会与查看器中的内容重叠。

如果 ScrollViewer 的 ScrollBar 可见或看起来不太有希望,则对 SO 的此响应是Detect,但它是为 WPF 编写的。它确实将我引向了UWPComputedVerticalScrollBarVisibility中也存在的属性,但是即使滚动条隐藏在用户界面中,它的值也始终为。 ScrollViewerVisible

XAML 片段:

<ScrollViewer
    Name="ForegroundElement"
    VerticalScrollMode="Auto">
    <Grid>
        <Frame x:Name="shellFrame" />
    </Grid>
</ScrollViewer>

的文档ComputedVerticalScrollBarVisibility建议这是确定滚动条是否可见的最合适的属性,另一方面,该VerticalScrollBarVisibility属性用于指示您是否希望垂直滚动条完全可用。

ComputedVerticalScrollBarVisibility
指示垂直滚动条是否可见的 Visibility。默认为可见。

最后一点令人困惑,看起来这个属性总是保持在默认状态。

最初我尝试为ComputedVerticalScrollBarVisibilityProperty后面的 in 代码注册一个更改处理程序,作为一个概念,它通常可以很好地拦截对不公开特定更改事件的控件上的依赖属性的更改,但以下实现从未注册更改:

public ShellPage()
{
    InitializeComponent();
    // register for property change on the scrollbar, add padding to the page
    ForegroundElement.RegisterPropertyChangedCallback(
        ScrollViewer.ComputedVerticalScrollBarVisibilityProperty, 
        ForegroundElement_ScrollBarVisibilityChanged);
}


private void ForegroundElement_ScrollBarVisibilityChanged(DependencyObject sender, DependencyProperty dp)
{
    if (ForegroundElement.ComputedVerticalScrollBarVisibility == Visibility.Visible)
    {
        if (ForegroundElement.Padding.Right != 18)
            ForegroundElement.Padding = new Thickness(0, 0, 18, 0);
    }
    else
    {
        if (ForegroundElement.Padding.Right != 0)
            ForegroundElement.Padding = new Thickness(0);
    }
}

更改实现以侦听LayoutUpdated 事件并没有太大帮助,因为ComputedVerticalScrollBarVisibilityalways的值Visible即使滚动条在 UI 中不可见也是如此。

我仔细检查了VerticalScrollMode是否设置为,"Auto"因为我知道这在其他平台上是一个问题,但是更改此值或完全忽略它没有任何影响。


背景

尽管现代 Windows 10 商店应用程序和 Edge 浏览器中滚动条的 MS 实现有据可查,并且由于它被视为操作系统的一项功能,因此被专业 Windows社区普遍接受,但这种隐藏滚动条直到用户悬停的默认行为这导致我们的 UWP 应用在市场上收到大量负面用户反馈。平移指示器太微妙了,我们的用户很困惑,因为他们根本不知道一个区域可以滚动。

在这篇文章中,我特别关注了声明的ScrollViewer,但是同样的问题也适用于ScrollViewer在其控件模板中内部实现的其他标准控件。

标签: uwpuwp-scrollviewer

解决方案


a 上还有另一个属性ScrollViewer可用于确定滚动条何时可见,ScrollableHeight

ScrollViewer.ScrollableHeight 属性
获取一个值,该值表示可滚动区域的垂直大小;范围高度与视口高度之间的差异。

因此,当ScrollableHeight0时,滚动条将为Collapsed,对于所有其他正值,滚动条将Visible

此实现按预期工作:

public ShellPage()
{
    InitializeComponent();
    // register for property change on the scrollbar, add padding to the page
    ForegroundElement.RegisterPropertyChangedCallback(
        ScrollViewer.ScrollableHeightProperty, 
        ForegroundElement_ScrollableHeightChanged);
}

private void ForegroundElement_ScrollableHeightChanged(DependencyObject sender, DependencyProperty dp)
{
    if (ForegroundElement.ScrollableHeight > 0)
    {
        if (ForegroundElement.Padding.Right != 18)
            ForegroundElement.Padding = new Thickness(0, 0, 18, 0);
    }
    else
    {
        if (ForegroundElement.Padding.Right != 0)
            ForegroundElement.Padding = new Thickness(0);
    }
}

推荐阅读