CommandBar UWP si sposta verticalmente quando viene modificato IsOpen

Question

Mi sono imbattuto in un problema di layout / modello con i CommandBarcui sintomi si vedono in diverse pagine:

• UWP: spazio vuoto CommandBar sotto i pulsanti
• https://github.com/microsoft/microsoft-ui-xaml/issues/1024

Sembra che gli CommandBarelementi UWP all'interno di CommandBarabbiano un'altezza effettiva di 44px, che viene ritagliata in un controllo di 40px.

• Quando IsOpen="False", le AppBarButtons sono centrate verticalmente e i 4 px inferiori della CommandBar.Contentsezione non vengono visualizzati
• Quando IsOpen="Top"le AppBarButtons vengono spostate in alto, sotto di esse appare un brutto spazio e CommandBar.Contentviene improvvisamente mostrato il 4px inferiore della sezione

Oltre al brutto spazio, rende molto difficile centrare correttamente gli elementi verticalmente CommandBar.Content.

Circa la posizione verticale di CommandBar

• Quando CommandBar è nella parte superiore della pagina, CommandBar stesso non viene ridimensionato verticalmente.
• Quando il CommandBar si trova nella parte inferiore della pagina, il CommandBar stesso cresce verticalmente con 4px.
• In tutti i casi, si verificano gli altri sintomi

In fondo alla pagina

La linea rossa visualizza i 4px inferiori della CommandBar.Contentsezione. Inoltre, con l' Revealeffetto a sinistra del cursore del mouse puoi vedere che i pulsanti si spostano verso l'alto. L'intero CommandBar cresce verticalmente

In cima alla pagina

Tentativo di allineare verticalmente il contenuto (suggerimento: non funziona)

Domanda

C'è un modo per risolvere questo problema? Microsoft ha qualificato questo più di un anno fa come qualcosa che potrebbero risolvere in WinUI 3 che è lontano.

Repository di repro bug

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

Codice rilevante da riprodurre

<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

CommandBar UWP si sposta verticalmente quando viene modificato IsOpen

Durante il test, AppBarSeparatorcausa questo comportamento. Al momento esiste una soluzione che potrebbe risolvere questo problema, si prega di fornire AppBarSeparatorun'altezza specifica inferiore a 40 px.

<AppBarSeparator Height="40"/>