UWP CommandBar moves vertically when IsOpen changes

Question

I have come across a layout / template problem with CommandBar of which symptoms are seen in several pages:

• UWP - CommandBar blank space under Buttons
• https://github.com/microsoft/microsoft-ui-xaml/issues/1024

It seems that the UWP CommandBar elements inside the CommandBar have an actual height of 44px, which is cropped in a control of 40px.

• When IsOpen="False", the AppBarButtons are vertically centered and the bottom 4px of the CommandBar.Content section is not shown
• When IsOpen="Top", the AppBarButtons are shifted up, an ugly gap appears under them and the bottom 4px of the CommandBar.Content section is suddenly shown

Besides the ugly gap, it makes it very difficult to correctly vertically center elements in CommandBar.Content.

About the vertical position of the CommandBar

• When the CommandBar is at the top of the Page, the CommandBar itself does not vertically resize.
• When the CommandBar is at the bottom of the Page, the CommandBar itself grows vertically with 4px.
• In all cases, the other symptoms happen

At bottom of page

The red line visualizes the bottom 4px of the CommandBar.Content section. Also, with the Reveal effect to the left of the mouse cursor you can see that the buttons shift up. The whole CommandBar grows vertically

At top of page

Trying to vertically align the content (hint: does not work)

Question

Is there any way to workaround this issue? Microsoft has qualified this more than a year ago as something they might fix in WinUI 3 which is far away.

Bug repro repository

https://github.com/hansmbakker/CommandBar.BugRepro

Relevant code to reproduce

<Page x:Class="CommandBar.BugRepro.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:CommandBar.BugRepro"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.BottomAppBar>
        <CommandBar
                    VerticalContentAlignment="Bottom"
                    Background="#BB555555"
                    DefaultLabelPosition="Right">
            <AppBarButton Icon="Back"
                          Label="Back" />
            <AppBarButton Icon="Save"
                          Label="Save" />
            <AppBarSeparator />
            <AppBarButton Label="Title" />
            <AppBarButton Label="Description" />
            <AppBarButton Label="Pictures"
                          Icon="Pictures" />
            <CommandBar.Content>
                <Rectangle Fill="Red"
                           Height="4"
                           Width="200" />
            </CommandBar.Content>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="Setting"
                              Label="Settings">
                    <AppBarButton.KeyboardAccelerators>
                        <KeyboardAccelerator Modifiers="Control"
                                             Key="I" />
                    </AppBarButton.KeyboardAccelerators>
                </AppBarButton>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    <Grid>
    </Grid>
</Page>

Answer 1

UWP CommandBar moves vertically when IsOpen changes

During the testing, AppBarSeparator cause this behavior. Currently there is a work around that could fix this, please give AppBarSeparator specific height less than 40px.

<AppBarSeparator Height="40"/>