question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TwoPaneView layout bug when touch keyboard is visible

See original GitHub issue

Describe the bug There are gap between TwoPaneView content and touch keyboard. The height of the gap is approximately equal to the height of the touch keyboard. Seems that it is caused by setting ScrollViewer.ReduceViewportForCoreInputViewOcclusions = true inside TwoPaneView, as disabling this property via VS Live Property Explorer fixes the problem.

Steps to reproduce the bug

Steps to reproduce the behavior:

  1. VS2019 > Create New Project > Blank C++/CX Application, Target 19041, MinTarget 17763, in MainPage.xaml add
    <TwoPaneView>
        <TwoPaneView.Pane1>
            <Rectangle Fill="Blue"/>
        </TwoPaneView.Pane1>
        <TwoPaneView.Pane2>
            <Rectangle Fill="Green"/>
        </TwoPaneView.Pane2>
    </TwoPaneView>
  1. Run with maximized window, show touch keyboard (TaskBar > Show Touch Keyboard Button may help). Also could be repeated with non-maximized smaller window placed into the area that would be occluded by touch keyboard. In this case it could be seen that the window is moved up (by the OS?) to avoid occluding, and yet TwoPaneView content is unnecessarily moved inside the window.

Expected behavior Content of TwoPaneView should move so it would not be occluded by touch keyboard. Instead, it is moved twice as far, and there are tall gap between content and touch keyboard.

Screenshots

image

Version Info Could be repeated with TwoPaneView from both Microsoft.UI.Xaml 2.6.1, 2.5.0 and Windows.UI.Xaml. App Target 19041, MinTarget 17763. Windows 10 21H1 19043, could be repeated on both Tablets and Desktop (TaskBar > Show Touch Keyboard Button) form factors

NuGet package version:

Windows app type:

UWP Win32
Yes
Windows version Saw the problem?
Insider Build (xxxxx)
21H1 Update (19043) Yes
October 2020 Update (19042)
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

Additional context

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
eugenegffcommented, Aug 12, 2021

BTW, according to documentation for ScrollViewer.ReduceViewportForCoreInputViewOcclusions property

This property defaults to false, and it’s typically not necessary for you to set it in your app. XAML maintains a ScrollViewer internally with this feature enabled, and your window content is displayed in this ScrollViewer. That is, Window.Current.Content is automatically parented to a ScrollViewer that has this feature enabled.

and it is NOT set for RootScrollViewer on Win10.0.19043. Given the fact that OS seems to move window to avoid occlusion by touch keyboard - this property is redundant, causes layout bug, and should probably be set only for old OSes that does not move window.

If this were true we would see this issue without the use of two pane view, correct? Or are you referring to a scrollviewer within the two pane view template?

I mean that property intended for RootScrollViewer is NOT set on RootScrollViewer now, and RootScrollViewer does not show buggy layout. But this property is set for both scrollviewers within two pane view template - and TwoPaneView shows buggy layout.

I suspect, that at some version Windows OS starts to adjust position and size of window to avoid occlusion by touch keyboard, therefore making this property redundant and obsolete, and for RootScrollViewer it is probably set conditionally, only for Windows versions that does not adjust window position and/or size. But for scroll viewers within TwoPaneView it is set unconditionally, causing problems.

1reaction
eugenegffcommented, Aug 11, 2021

BTW, according to documentation for ScrollViewer.ReduceViewportForCoreInputViewOcclusions property

This property defaults to false, and it’s typically not necessary for you to set it in your app. XAML maintains a ScrollViewer internally with this feature enabled, and your window content is displayed in this ScrollViewer. That is, Window.Current.Content is automatically parented to a ScrollViewer that has this feature enabled.

and it is NOT set for RootScrollViewer on Win10.0.19043. Given the fact that OS seems to move window to avoid occlusion by touch keyboard - this property is redundant, causes layout bug, and should probably be set only for old OSes that does not move window.

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Touch keyboard layout is wrong and different from On- ...
When my Surface was running Windows 10, both the "On-Screen Keyboard" and the "Touch Keyboard" matched and were showing the right keys.
Read more >
screen styling when virtual keyboard is active
I use a simple CSS media query to move active inputs into the top of the screen on mobiles when the keyboard is...
Read more >
keyboard can't be popped up in live preview mode
There is apparently a workaround for getting the on-screen keyboard to open in the Live Preview in the Canvas in Xcode (I remember...
Read more >
335735 - On screen keyboard triggered even when ...
1. Open Settings, and click/tap on Devices. 2. Click/tap on Typing on the left side, and turn On or Off (default) Show the...
Read more >
Handle input method visibility
When input focus moves in or out of an editable text field, Android shows or hides the input —such as the on-screen keyboard—as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found