问题描述

我遇到了一个布局/模板问题，CommandBar在几个页面中可以看到其中的症状：

看起来CommandBar里面的 UWP 元素CommandBar的实际高度为 44px，在 40px 的控件中被裁剪。

当时IsOpen="False"，AppBarButtons 垂直居中，CommandBar.Content不显示该部分的底部 4px
当IsOpen="Top", AppBarButtons 向上移动时，它们下方出现了一个难看的间隙，CommandBar.Content并且突然显示了该部分的底部 4px

除了丑陋的间隙之外，它还使得在CommandBar.Content.

关于垂直位置CommandBar

当 CommandBar 位于页面顶部时，CommandBar 本身不会垂直调整大小。
当 CommandBar 位于页面底部时，CommandBar 本身以 4px 垂直增长。
在所有情况下，都会出现其他症状

在页面底部

红线可视化该CommandBar.Content部分的底部 4px。此外，通过Reveal鼠标光标左侧的效果，您可以看到按钮向上移动。整个 CommandBar 垂直增长

在页面顶部

尝试垂直对齐内容（提示：不起作用）

问题

有没有办法解决这个问题？微软在一年多前已经将其认定为他们可能会在遥远的 WinUI 3中修复的问题。

错误重现存储库

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

相关代码重现

<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>

标签： xamluwpcommandbar

xaml - 当 IsOpen 更改时，UWP CommandBar 垂直移动