Question

这是代码：

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

Answer 1

我的解决方案是避免使用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 ......）

Answer 2

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

Answer 3

自然行为是在CommandBar打开之前不会显示标签。但是，这仅适用于控件右侧显示的AppBarButtons，因为根据设计指南，UWP CommandBar仅在右侧显示命令。但是当你使用Content左命令时，它将无法正常工作。要解决此问题，您必须将IsCompact属性绑定到CommandBar的{{1}}属性。

首先，您必须添加一个只会反转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}}" />按预期打开时显示。

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

3 个答案: