Scroll bar should not overlap content

A Scroll Bar Should not Overlap A Component’s Content

Describe the bug

When a ScrollViewer scroll bar is displayed, it overlaps the component’s content.

This is unexpected behaviour, potentially leading to information being hidden.

Steps to reproduce the bug

I added a GridView component to an UWP Page, similar to this:

<Page>
  <GridView ItemsSource="{x:Bind CdList}">
  ...
  </GridView>
</Page>

When I change the window size, the GridView’s vertical scrollbar partially hides/overlaps the rightmost items in the GridView before GridView wraps the items appropriately:

Expected behavior

The ScrollViewer’s ItemPresenter should be a sibling of the ScrollViewer’s scroll bars, so, as soon as any of the scroll bars is displayed, the ItemPresenter size should shrink appropriately to spread across only the area left/above the scroll bars.

Scroll bars are supposed to appear outside the presenter area, not within.

Version Info

Windows 10 version	Saw the problem?
October 2020 Update (xxxxx)	Yes
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)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

[robloo]

Hidden scrollbars look better from a design standpoint and are the latest convention.

[robloo]

When a ScrollViewer scroll bar is displayed, it overlaps the component’s content. This is unexpected behaviour, potentially leading to information being hidden.

In classic desktop scenarios, yes, it’s expected for the scroll bar to be to the right of the content and never overlap. If you are coming over from WPF this is strange behavior for sure.

However, remember UWP was designed to support mobile devices first. Mobile devices are very limited in horizontal size. This is why the mobile convention soon became for scroll bars to appear on top of content and automatically switch between a ‘traditional’ and minimized ‘panning’ view. Actually, Apple I believe was the first to design scroll bars that behaved this way on the iPhone and everyone just followed that idea. Scroll bars are now expected to automatically hide themselves when not scrolling and only show a small semi-transparent indicator.

So I disagree that it is unexpected – it is expected and necessary from a mobile standpoint. It is also the latest design convention. It may be best to simply set the Padding of the GridView (to 16px I believe) and push the content inward for your case.