O CommandBar UWP se move verticalmente quando IsOpen muda

Question

Eu encontrei um problema de layout / modelo CommandBarcujos sintomas são vistos em várias páginas:

• UWP - espaço em branco da CommandBar nos botões
• https://github.com/microsoft/microsoft-ui-xaml/issues/1024

Parece que os CommandBarelementos UWP dentro do CommandBartêm uma altura real de 44px, que é cortada em um controle de 40px.

• Quando IsOpen="False", os AppBarButtons são centralizados verticalmente e os 4px inferiores da CommandBar.Contentseção não são mostrados
• Quando IsOpen="Top"os AppBarButtons são deslocados para cima, uma lacuna feia aparece sob eles e os 4px inferiores da CommandBar.Contentseção são mostrados repentinamente

Além da lacuna feia, torna-se muito difícil centralizar corretamente os elementos na vertical CommandBar.Content.

Sobre a posição vertical do CommandBar

• Quando a CommandBar está no topo da página, a própria CommandBar não é redimensionada verticalmente.
• Quando o CommandBar está na parte inferior da página, o próprio CommandBar cresce verticalmente com 4px.
• Em todos os casos, os outros sintomas acontecem

No final da página

A linha vermelha visualiza os 4px inferiores da CommandBar.Contentseção. Além disso, com o Revealefeito à esquerda do cursor do mouse, você pode ver que os botões se deslocam para cima. Todo o CommandBar cresce verticalmente

No topo da página

Tentando alinhar o conteúdo verticalmente (dica: não funciona)

Questão

Existe alguma maneira de contornar esse problema? A Microsoft qualificou isso há mais de um ano como algo que eles podem consertar no WinUI 3, que está longe.

Repositório de reprodução de bug

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

Código relevante para reproduzir

<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

O CommandBar UWP se move verticalmente quando IsOpen muda

Durante o teste, AppBarSeparatorcause esse comportamento. Atualmente, existe uma solução AppBarSeparatoralternativa que pode corrigir isso . Forneça uma altura específica menor que 40 px.

<AppBarSeparator Height="40"/>