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

Posted 2021-04-05

这是代码：

    <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>

这是一个屏幕快照：

抱歉，由于大量的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();
    }
}

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

<Page.Resources>
    <local:InvertBoolConverter x:Name="InvertBoolConverter" />
</Page.Resources>

现在将x:Name="TopBar"添加到CommandBar控件并将IsCompact属性添加到AppBarButtons内的所有CommandBar.Content：

<AppBarButton Icon="Home" Label="Home" 
    IsCompact="{Binding IsOpen, ElementName=TopBar, Converter={StaticResource InvertBoolConverter}}" />

现在只有当CommandBar按预期打开时才会显示标签。