microsoft / microsoft/WinUI-Gallery

Disable horizontal scrolling in code examples

Open
#704 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
C#
Stars
3.6k
Forks
756
Avg merge
17h 51m
Merged PRs (30d)
14

Description

Describe the bug
The contents of some code examples expand further than the main content column of the current page. This introduces horizontal scrolling of the code examples through <ContentExample.Xaml> and effectively the surrounding ScrollView. The horizontal scrolling is triggered as soon as the user hovers over the area (i.e. <ContentExample.Xaml>).

This impacts the overall usability, because the scrolling in the page is interrupted as soon as the user hovers to code area.

Steps to reproduce the bug

Steps to reproduce the behavior:

  1. Go to the ListVIew examples page
    a. Adjust the XAML Controls Gallery app's width so that the sidebar is just shown.
  2. Place your cursor in the center of the screen, or somewhere else on the page.
  3. Try to scroll down.

Actual behavior
You should notice, that as soon as your mouse enters a code example area, the scrolling stops. Instead you are horizontally scrolling in that area.

Expected behavior
Page scrolling is not interrupted.

Screenshots

image

Version Info

  • App downloaded from Store
    • If so, which version? (Found on the Settings page of the app.)
  • App built locally from source
    • If so, which branch? master

Additional context

Suggestion: disable horizontal scrolling of the code examples through user input completely. Instead only show the scrollbar so the use can drag it manually.

Windows 10 version:

  • Insider Build (xxxxx)
  • May 2020 Update (19041)
  • November 2019 Update (18363)
  • May 2019 Update (18362)
  • October 2018 Update (17763)
  • April 2018 Update (17134)
  • Fall Creators Update (16299)
  • Creators Update (15063)
  • Anniversary Update (14393)

Device form factor:

  • Desktop
  • Mobile
  • Xbox
  • Surface Hub
  • IoT

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with ControlExample.Xaml at the linked ScrollView and inspect how ContentExample.Xaml is hosted, then reproduce the behavior on the ListView examples page at the described window width. Done means scrolling over a code example continues to scroll the page, while horizontal code navigation remains available through the scrollbar.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.