ScrollViewer IsHorizo​​ntalScrollChainingEnabled 和 IsHorizo​​ntalRailEnabled 功能

问题描述

谁能解释一下这两个属性到底是做什么的?

在上图中，中心点是 ScrollViewer 中触摸交互的起点.然后，您将手指(或笔，随便什么)朝特定方向移动.如果您在黄色区域内移动手指，则 ScrollViewer 将锁定"水平或垂直方向的滚动运动.如果您将手指移入蓝色区域，则 ScrollViewer 会得出结论，您没有尝试在水平或垂直方向滚动，并且会在您继续移动手指时向两个方向平移内容.我希望那是有道理的?

Can someone explain what these two properties do exactly?

IsHorizontalScrollChainingEnabled
IsHorizontalRailEnabled

1. I tried the first one with nested ScrollViewers, but can't find any difference in functionality. Is it enabled or disabled by default? What does it do exactly, there is no information about functionality in the docs or Google available as far as i can find.

2. The two properties HorizontalScrollBarVisibility (Visible/Collapsed) and HorizontalScrollMode(Enabled/Disabled) make sense to me, but in what case should i use IsHorizontalRailEnabled?

解决方案

Scroll chaining

<ScrollViewer Background="Red" Height="600">
    <ScrollViewer Background="Blue" Margin="50,150" Height="400" IsVerticalScrollChainingEnabled="False">
        <Rectangle Height="500"/>
    </ScrollViewer>
</ScrollViewer>

• The outer ScrollViewer is 600px tall but its content is 700px tall.
• The innter ScrollViewer is 400px tall but its content is 500px tall.
• Both ScrollViewers can therefore scroll vertically to show that additional 100px of content that isn't visible.

Scroll chaining defines whether or not scrolling an inner ScrollViewer (via touch) will affect the scroll position of the outer ScrollViewer when the inner ScrollViewer is scrolled beyond the top or bottom extents.

Try scrolling the inner ScrollViewer via touch in this example. No matter what you do, you are only able to scroll the inner ScrollViewer and the outer ScrollViewer's scroll position isn't affected.

Rail

If you have a ScrollViewer with both horizontal and vertical scrolling enabled, then sometimes you want to define the touch scrolling behaviour such that motions which are "almost" in the horizontal or vertical direction are locked to the dominant axis. This is the standard behaviour when scrolling webpages on a mobile phone -- scrolling up and down the page will only scroll the page vertically and not horizontally (unless your touch motion is not "vertical enough", in which case the ScrollViewer will then pan the page instead of scrolling in only one direction).

Try it out in Edge on mobile. Zoom into a webpage and then scroll vertically, and keep scrolling without lifting your finger off the screen. See how you are only able to scroll vertically even if you move your finger horizontally (all within the same touch motion)? That's scroll rail in action.

In the above diagram, the center point is the starting point of a touch interaction within the ScrollViewer. You then move your finger (or pen, whatever) in a particular direction. If you moved your finger within a yellow region, then the ScrollViewer will "lock" the scrolling motion in either the horizontal or vertical direction. If you moved your finger into the blue region, then the ScrollViewer concludes that you weren't trying to scroll in the horizontal or vertical directions, and will pan the content in both directions as you continue to move your finger around. I hope that kind of makes sense?

这篇关于ScrollViewer IsHorizo​​ntalScrollChainingEnabled 和 IsHorizo​​ntalRailEnabled 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！