如何防止AppBar / CommandBar截断AppBarButton的标签（） _command

欠伸展肢体，吟咏心自愉。这篇文章主要讲述如何防止AppBar / CommandBar截断AppBarButton的标签？相关的知识，希望能为你提供帮助。
这是代码：

< Page.TopAppBar> < CommandBar> < CommandBar.SecondaryCommands> < AppBarButton Icon="NewWindow" Label="New"/> < AppBarButton Icon="OpenFile"Label="Open"/> < AppBarButton Icon="Save" Label="Save"/> < AppBarButton Icon="Save" Label="Save As"/> < AppBarButton Icon="ClosePane"Label="Close"/> < AppBarButton Icon="Setting" Label="Settings"/> < /CommandBar.SecondaryCommands> < CommandBar.Content> < StackPanel Orientation="Horizontal"> < AppBarButton Icon="Home" Label="Home" /> < AppBarButton Icon="Back" Label="Back"/> < AppBarButton Icon="Forward" Label="Forward"/> < /StackPanel> < /CommandBar.Content> < /CommandBar> < /Page.TopAppBar> < Grid> < /Grid> < /Page>

这是一个屏幕快照：

如何防止AppBar / CommandBar截断AppBarButton的标签（）

文章图片

抱歉，由于大量的Windows 8 UWP书籍作为Windows 10 UWP书籍传递，并且没有CommandBar XAML的好例子，因此永远无法弄清楚如何使用CommandBar。
答案使用commandBar的正确方法是这种方式思考，因为它没有问题我尝试了你使用的方式，但找不到解决方案，但我认为这将帮助你，因为我希望:)

< Page.TopAppBar> < CommandBar ClosedDisplayMode="Compact" Background="#1FA2E1"> < CommandBar.PrimaryCommands> < AppBarButton Name="xhome" Icon="Remote" Label="Home" /> < AppBarSeparator/> < AppBarButton Name="xadmin" Icon="Admin" Label="Admin" /> < AppBarSeparator/> < AppBarButton Name="xcontact" Icon="Contact" Label="Contact" /> < AppBarSeparator/> < /CommandBar.PrimaryCommands> < /CommandBar> < /Page.TopAppBar>

另一答案我的解决方案是避免使用AppBar和ControlBar，以及Page.TopAppBar和Page.BottomAppBar。他们有太多的截断问题。
相反，你应该将你的AppBarButton嵌入网格控件中，然后一切都很完美。

< Page ...> < Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> < Grid.RowDefinitions> < RowDefinition Height="Auto"/> < RowDefinition Height="*"/> < /Grid.RowDefinitions> < Grid Grid.Row="0" Background="LightGray"> < Grid.ColumnDefinitions> < ColumnDefinition Width="*"/> < ColumnDefinition Width="Auto"/> < /Grid.ColumnDefinitions> < StackPanel Grid.Column="0" Orientation="Horizontal"> < AppBarButton Icon="Home" Label="Home"/> < AppBarButton Icon="Back" Label="Back"/> < AppBarButton Icon="Forward" Label="Forward"/> < /StackPanel> < AppBarButton Grid.Column="1" Icon="More"> < AppBarButton.Flyout> < MenuFlyout> < MenuFlyoutItem Icon="NewWindow" Text="New"/> < MenuFlyoutItem Icon="OpenFile"Text="Open"/> < MenuFlyoutItem Icon="Save"Text="Save"/> < MenuFlyoutItem Icon="Save"Text="Save As"/> < MenuFlyoutItem Icon="ClosePane" Text="Close"/> < MenuFlyoutItem Icon="Setting"Text="Settings"/> < /MenuFlyout> < /AppBarButton.Flyout> < /AppBarButton> < /Grid> < !-- Content--> < Ellipse Grid.Row="1" Height="100" Width="100" Fill="BurlyWood"/> < /Grid> < /Page>

（现在只要微软将DockPanel从WPF转移到UWP ......）
另一答案自然行为是在打开CommandBar之前不会显示标签。但是，这仅适用于控件右侧显示的AppBarButtons，因为根据设计指南，UWP CommandBar仅在右侧显示命令。但是当你使用Content左命令时，它将无法正常工作。作为一种解决方法，您必须将IsCompact属性绑定到CommandBar的IsOpen属性。
首先，您必须添加一个只会反转bool值的新值转换器：

class InvertBoolConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return !(bool)value; }public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }

然后将转换器作为资源添加到页面中：