UWP CommandBar 在 IsOpen 变化时垂直移动

Question

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

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

好像CommandBar里面的UWP CommandBar元素实际高度是44px，在40px的控件里被裁剪了

• 当IsOpen="False"时，AppBarButton垂直居中，CommandBar.Content部分底部4px不显示
• 当IsOpen="Top"时，AppBarButton上移，突然显示ugly gap appears under them和CommandBar.Content部分底部4px

除了难看的间隙，它还使得 CommandBar.Content 中的元素很难正确垂直居中。

关于CommandBar

的垂直位置

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

在页面底部

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

在页面顶部

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

问题

有什么办法可以解决这个问题吗？微软有qualified this more than a year ago as something they might fix in 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>

Answer 1

UWP CommandBar moves vertically when IsOpen changes

在测试期间，AppBarSeparator 导致此行为。目前有解决此问题的方法，请提供 AppBarSeparator 小于 40px 的特定高度。

<AppBarSeparator Height="40"/>