UWP/WinRT：CommandBar溢出菜单，为什么底部有难看的空白？

Question

我正在尝试使用 CommandBar 类，但它不正常。

这是我的简单测试的 XAML：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <CommandBar>
        <AppBarButton Icon="NewWindow"></AppBarButton>
        <CommandBar.SecondaryCommands>
            <AppBarButton Label="Secondary Button"></AppBarButton>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Grid>

但是，当我按下 CommandBar 上的... 溢出按钮以显示溢出菜单时，无论出于何种原因，溢出菜单底部都有一个丑陋的额外空白下巴，使整个事情看起来相当不专业。这是问题的屏幕截图，Secondary Button 下方的空白区域是有问题的部分。

在 Edge 浏览器等第一方通用 Windows 平台应用程序上进行测试时，下拉菜单中没有这样的下巴。不过，对于它的价值，我怀疑 Edge 使用的是自定义版本的 CommandBar，因为我认为当您点击 ... 溢出按钮或插入图标时，我认为没有任何方法可以避免 CommandBar 向下延伸按钮进入下拉菜单，就像用于缩放按钮一样。

Answer 1

这确实是 CommandBar 的默认样式。
您可以通过编辑 CommandBarOverflowPresenter 模板的副本并删除 ItemsPresenter 的底部边距来删除该空白区域。这是生成的样式：

<Style TargetType="CommandBarOverflowPresenter">
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
    <Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/>
    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CommandBarOverflowPresenter">
                <Grid Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                    <ScrollViewer AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                        <ItemsPresenter x:Name="ItemsPresenter" Margin="0"/>
                    </ScrollViewer>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" StrokeThickness="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

虽然Olivier's answer 确实涵盖了如何在溢出菜单打开时删除CommandBar 下方的空间（并且做得很好） - 它首先没有解释“空白空间”背后的原因。

我想我会添加一个答案，以便为该问题的未来访问者使用该“空白空间”提供一点权重。

溢出按钮...的用途是两用的。我会在下面解释。

---

1 - 避免歧义

溢出按钮... 图标为用户提供了一种查看Labels 的PrimaryCommands（沿着CommandBar 的主条）的方法。

这在某些图标可能无法立即明确其含义的情况下非常有用。

例如：

×

可以表示“取消”、“否”、“删除”等。

我们可以将Label="Delete" 添加到AppBarButton 中，以区分此按钮是“删除”项目或其他内容。

如果用户希望了解按钮图标的含义/代表的含义，他们只需点击 ... 即可显示按钮的标签。

在您的屏幕截图中，因为您的 PrimaryCommands 没有任何标签，所以只显示了空格。

以下是我们如何使用Label 来理解按钮含义的示例：

<CommandBar>
    <CommandBar.PrimaryCommands>
        <AppBarButton Icon="Back" Label="Back" />
        <AppBarButton Icon="Stop" Label="Stop" />
        <AppBarButton Icon="Play" Label="Play" />
        <AppBarButton Icon="Forward" Label="Next" />
    </CommandBar.PrimaryCommands>
    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" />
        <AppBarButton Label="Dislike" />
    </CommandBar.SecondaryCommands>
</CommandBar>

以上代码可用于为媒体应用创建播放控制栏：

当用户按下... 按钮时，标签会清楚地显示在每个按钮下方 - 以便查看它们的用途。

这种 UI 行为至少从 Windows Phone 8.1 (Silverlight) 就已经存在，尽管可能有不同的标记。 我可能是错的 - 它可能会更早 - 请随时纠正我

2 - 显示辅助命令

除了上述有用的设计功能（从原始问题中可以明显看出）- 可以按下 ... 溢出按钮以显示 SecondaryCommands。

它使用定义的CommandBarOverflowPresenter 将它们弹出到视图中。

这对于用户可能希望采取的“不太重要”的操作更有用。例如“留下反馈”、“下载”——或者任何设计师认为不那么重要的东西。

根据上面的示例，为了有效地使用CommandBar，“喜欢”和“不喜欢”按钮对用户来说并不是最重要的：

---

我希望这会增加一些关于如何使用 CommandBar 来帮助和增强 UWP/WinRT/Silverlight 应用程序中的用户体验的见解，这与当前接受的答案一致，该答案显示了如何删除原来的问题。