CODEWITHSUNDEEP
xamluwp
Thomas Schneiter
Thomas Schneiter

Reputation: 1153

ScrollViewer IsHorizontalScrollChainingEnabled and IsHorizontalRailEnabled functionality

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.

    Docs: True to enable horizontal scroll chaining from child to parent; otherwise, false.

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

    Docs: True to enable the horizontal scroll rail; otherwise, false. The default is true.

Upvotes: 3

Views: 1290

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

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.

Diagram

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?

Upvotes: 10

Related Questions