can't scroll ScrollView of buttons (with mouse)

[jeske]

Release Type: Release
Version: v4.0.0.1 beta2 0928
Platform(s): Windows

Describe the bug
I made a ScrollView of a grid of buttons. I can't scroll it with the mouse on windows. There appear to be a related set of problems:

• there is no visible scrollbar to grab or touch with a mouse
• mouse scroll-wheel doesn't work (there are no routed mouse events or scroll wheel events in the Stride UI kit)
• "touch drag" doesn't work. this might be because the scrollview is entirely filled with buttons. Trying to drag briefly shows scrollbar then immediately clicks a button. Normally when using touch-drag model, one still needs to be able to "drag" an active element like a button without clicking it. (this might be a bug on mobile as well)

To Reproduce
Steps to reproduce the behavior:

1. Check out https://github.com/jeske/StrideCodeSamples and run DynamicScrollingButtonList
2. try to scroll the button grid by grab-dragging it... witness it doesn't scroll
3. use mouse-wheel, witness it doesn't scroll

Expected behavior
Expected there would be some way to scroll a scrollviewer on windows, including mousewheel.

The two things that I am looking into are:

• The UI controls don't have any "routed" mouse events, or any "mouse scroll wheel" propagation that I can see.. so adding that seems like it would be helpful
• I'm investigating if the touch-drag-scroll is erronously preventing one from dragging on active elements like buttons, in which case I'll try to make some code adjustments.

Screenshots

You can see a video of it happening here:

• stride: no way to scroll a scrollview of buttons (on windows) - YouTube

Here is a screenshot, with the grid of buttons on the left. There are 50 buttons in the list, and it should be scrollable, but it's not.

There might be another bug visible in this project:

• the "red" UI canvas has weird bounds, if you resize the window, you'll see that the red-alpha background stays proportioned like the original window shape, creating bars on the top and bottom if you resize the window to be tall... but the UI inside it stays pinned to the lower left corner. I expect the entire red box to stay pinned to the lower left corner and be sized according to the init

[xen2]

In your example, the ScrollViewer doesn't stop at the screen bottom limit because:

• it's inside a Canvas (no limit)
  Our Canvas is quite similar to WPF one (its child are simply positioned, not resized/constrained by the Canvas size itself): https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.canvas?view=netcore-3.1#remarks
• ScrollViewer doesn't have any Height
  As a result, the ScrollViewer takes all the space it has (infinite in a Canvas and compute a Height of 4200 units to fit all the items)
• As a result, the scroll bar doesn't have any effect because it spans everything (note: maybe it shouldn't even display?)

I recommend you to either:

• Set a Height to scroll viewer:
  

• Otherwise, use a root element that constrains/limits space (such as a Grid rather than a Canvas)

the "red" UI canvas has weird bounds, if you resize the window, you'll see that the red-alpha background stays proportioned like the original window shape, creating bars on the top and bottom if you resize the window to be tall... but the UI inside it stays pinned to the lower left corner. I expect the entire red box to stay pinned to the lower left corner and be sized according to the init

Probably the same issue: it looks like stuck in the bottom-left corner simply because its height is very large and its layout is not adjusted to the physical screen border due to using Canvas; only rendering is clipped.

[rikai-suru]

In your example, the ScrollViewer doesn't stop at the screen bottom limit because:

* it's inside a `Canvas` (no limit)
  Our Canvas is quite similar to WPF one (its child are simply positioned, not resized/constrained by the `Canvas` size itself): https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.canvas?view=netcore-3.1#remarks

Thank you for this explanation. Solved my issue.