UWP CommandBar se déplace verticalement lorsque IsOpen change

Question

J'ai rencontré un problème de mise en page / modèle CommandBardont les symptômes sont visibles sur plusieurs pages:

• UWP - Espace vide CommandBar sous les boutons
• https://github.com/microsoft/microsoft-ui-xaml/issues/1024

Il semble que les CommandBaréléments UWP à l'intérieur du CommandBaront une hauteur réelle de 44px, qui est rognée dans un contrôle de 40px.

• Lorsque IsOpen="False", les AppBarButtons sont centrés verticalement et les 4 pixels inférieurs de la CommandBar.Contentsection ne sont pas représentés
• Lorsque IsOpen="Top", les AppBarButtons sont décalés vers le haut, un vilain espace apparaît sous eux et les 4 pixels inférieurs de la CommandBar.Contentsection sont soudainement affichés

Outre le vilain écart, il est très difficile de centrer correctement les éléments verticalement CommandBar.Content.

À propos de la position verticale du CommandBar

• Lorsque la CommandBar est en haut de la page, la CommandBar lui-même ne redimensionne pas verticalement.
• Lorsque la CommandBar est au bas de la page, la CommandBar elle-même se développe verticalement avec 4px.
• Dans tous les cas, les autres symptômes surviennent

En bas de page

La ligne rouge visualise les 4 pixels inférieurs de la CommandBar.Contentsection. De plus, avec l' Revealeffet à gauche du curseur de la souris, vous pouvez voir que les boutons se déplacent vers le haut. L'ensemble de la CommandBar se développe verticalement

En haut de page

Essayer d'aligner verticalement le contenu (indice: ne fonctionne pas)

Question

Existe-t-il un moyen de contourner ce problème? Microsoft a qualifié cela il y a plus d'un an comme quelque chose qu'ils pourraient corriger dans WinUI 3, qui est loin.

Dépôt de repro de bogues

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

Code pertinent à reproduire

<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 se déplace verticalement lorsque IsOpen change

Pendant le test, AppBarSeparatorindiquez ce comportement. Actuellement, il existe une solution qui pourrait résoudre ce problème, veuillez AppBarSeparatorindiquer une hauteur spécifique inférieure à 40 px.

<AppBarSeparator Height="40"/>