Xaml UWP/WinRT:在命令栏溢出菜单上,为什么底部有难看的空格?
我正在尝试使用CommandBar类,但它不起作用 下面是我的简单测试的XAML:Xaml UWP/WinRT:在命令栏溢出菜单上,为什么底部有难看的空格?,xaml,win-universal-app,Xaml,Win Universal App,我正在尝试使用CommandBar类,但它不起作用 下面是我的简单测试的XAML: <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <CommandBar> <AppBarButton Icon="NewWindow"></AppBarButto
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<CommandBar>
<AppBarButton Icon="NewWindow"></AppBarButton>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Secondary Button"></AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
</Grid>
在第一方通用Windows平台应用程序(如Edge browser)上进行测试时,下拉列表中没有这样的内容。不过,值得一提的是,我怀疑Edge使用的是定制版本的CommandBar,因为我认为没有任何方法可以避免当您点击…
溢出按钮时CommandBar向下扩展,或者将图标按钮插入下拉菜单,就像用于缩放按钮一样。这确实是命令栏的默认样式。
您可以通过编辑命令BarOverflowPresenter
模板的副本并删除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>
While确实介绍了当溢出菜单打开时如何删除命令栏下方的空格(而且做得很好)-它没有首先解释“空白”背后的原因
我想我会加上一个答案,给未来的访问者一点关于“空白空间”使用的权重
溢出按钮的用途是两用的。我将在下面解释
1-避免歧义
溢出按钮…
图标为用户提供了一种查看主要命令(沿着命令栏的主条带的那些命令)的标签的方法
这在某些图标可能无法立即看出其含义的情况下非常有用
例如:
×
可以表示“取消”、“否”、“删除”等
我们可以将Label=“Delete”
添加到AppBarButton
中,以区分此按钮是“删除”项目还是其他任何内容
如果用户希望了解按钮图标的含义/代表,他们只需点击…
,即可显示按钮的标签
在屏幕截图中,由于PrimaryCommands
没有任何标签,因此只显示空白
下面是一个示例,说明如何使用标签来理解按钮的含义:
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Back" Label="Previous" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Stop" />
<AppBarButton Icon="Forward" Label="Next" />
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Like" />
<AppBarButton Label="Dislike" />
</CommandBar.SecondaryCommands>
</CommandBar>
当用户按下…
按钮时,标签将清晰地显示在每个按钮下方,以便查看它们的用途
这种UI行为至少从WindowsPhone8.1(Silverlight)开始就存在了,尽管可能有不同的标记。我可能错了——可能会更快——请随时纠正我
2-显示辅助命令
除了上述有用的设计功能(从原始问题中可以明显看出),还可以按下…
溢出按钮来显示辅助命令
它使用定义的命令baroverflowPresenter
将它们弹出到视图中
这对于用户可能希望采取的“不太重要”的操作更有用。例如“留下反馈”、“下载”——或者设计师认为不重要的任何东西
根据上面的示例,“喜欢”和“不喜欢”按钮对于用户来说并不是最重要的,以便有效地使用CommandBar
:
我希望这能增加一点洞察力,了解如何在UWP/WinRT/Silverlight应用程序中使用CommandBar
来帮助和增强用户体验,这与当前公认的答案一致,该答案显示了如何删除原始问题中的空白。是否有关于如何生成此类模板的好教程?特别是,您如何知道结构层次结构和所有与页边距不直接相关的默认值需要填写哪些内容?这很简单:在设计器模式下打开页面,右键单击要创建模板的元素,然后编辑样式->编辑副本。有没有办法“编辑副本”在设计器模式下难以选择的项上的模板的名称?例如,使用数据绑定填充的数据透视项的标题,这样它就根本不会出现在设计器模式下?可能是设计时数据。否则,您可以在web上找到默认模板(MSDN),也可以在您自己的文件系统上的generic.xaml文件中找到所有默认模板。查看Windows工具包的installationfolder。其默认值为:C:\ProgramFiles(x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\Generic.xaml