microsoft / microsoft/WinUI-Gallery
Disable horizontal scrolling in code examples
Nobody has claimed this yet.
- 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:
- Go to the
ListVIewexamples page
a. Adjust the XAML Controls Gallery app's width so that the sidebar is just shown. - Place your cursor in the center of the screen, or somewhere else on the page.
- 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

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
- If so, which branch?
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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