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

Question

我正在尝试使用 CommandBar class，但它不起作用。

这是我的简单测试的 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 下方的空白 space 是有问题的部分。

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

Answer 1

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

<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

虽然确实介绍了如何在打开溢出菜单时删除 CommandBar 下面的 space（并且做得很好）- 它没有解释背后的原因首先是“空白 space”。

我想我会添加一个答案，以便为这个问题的未来访问者提供关于“空白 space”的使用的一些权重。

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

1 - 避免歧义

溢出按钮 ... 图标为用户提供了一种查看 PrimaryCommands 的 Label 的方法（CommandBar 主条上的 Label ).

事实证明，这在某些图标的含义可能不是很明显的情况下非常有用。

例如：

×

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

我们可以在AppBarButton后面加上Label="Delete"来区分这个按钮是“删除”一个项目还是什么的。

如果用户希望找出按钮的图标 mean/represent，他们只需点击 ... 即可显示按钮的标签。

在你的截图中，因为你的PrimaryCommands没有任何标签，所以只显示了白色space。

下面是我们如何使用 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 应用程序中的用户体验的见解，与当前接受的答案一致，该答案显示了如何去掉原题中的白色space

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

UWP/WinRT: On the CommandBar overflow menu, why is there ugly blank space on the bottom?

xaml

win-universal-app

1 - 避免歧义

×

2 - 显示辅助命令