CommandBar near top of window opens up, causes clipping

[YuliKl]

Describe the bug

CommandBar appears to always open upward, whether or not there is space to do so.

Steps to reproduce the bug

1. Create a new blank app with

    <Grid>
        <CommandBar>
            <AppBarButton Icon="Delete" Label="Delete"/>
            <AppBarButton Icon="Save" Label="Save"/>
        </CommandBar>
    </Grid>

2. Run the app
3. Click on More button

Expected behavior

CommandBar opens downward.

Screenshots

Closed CommandBar:

Opened CommandBar:

Version Info

NuGet package version:

N/A. Targetting 18362 SDK.

Windows 10 version	Saw the problem?
Insider Build (18916)	Yes
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
Mobile
Xbox
Surface Hub
IoT

Additional context

[hansmbakker]

This is not only a problem when it is at the top of the page. It also makes it impossible to vertically center CommandBar.Content elements, and it produces an ugly gap below the buttons.

There is a 4px shift up of all elements inside the CommandBar when IsOpen switches to true, and I believe this is a bug.

The issue is not in WinUI; it is in the UWP SDK, but since this is the only place where we can report XAML bugs, we post it here (thanks @YuliKl for the initial post).

The issue is still there on the newest Windows 10 builds (19042).

More details (including gif screen recordings) in https://stackoverflow.com/questions/64524669/uwp-commandbar-moves-vertically-when-isopen-changes.

Bug repro repository at https://github.com/hansmbakker/CommandBar.BugRepro

[hansmbakker]

CommandBar shifts and grows when positioned at page bottom:

CommandBar shifts and will be cropped when positioned at page top (as reported by @YuliKl):

Vertical content centering is not possible

and in all cases you get the ugly gap below the buttons.

Is there any workaround?

[hansmbakker]

For me, there is a workaround shared by @v-zhumin on StackOverflow:

<AppBarSeparator Height="40"/>

That one worked for me.

However, I see that @YuliKl did not use AppBarSeparator, so for her it must be caused by something else?

Can you pick this up and solve the bug so that the workaround is not needed anymore?
Can you investigate what other causes there might be?

[kmgallahan]

@hansmbakker

I believe you are running into the same issue described in #1454, although I didn't check using your repro.

[hansmbakker]

I believe you are running into the same issue described in #1454, although I didn't check using your repro.

@kmgallahan
Please check my repro, because although there is similarity, there are really differences as well.

I am not using scaled text for example, which the issue you mention is about.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.