如何在命令栏中水平对齐 AppBarButton答案

【问题标题】：How to horizontally align AppBarButton in command bar如何在命令栏中水平对齐 AppBarButton
【发布时间】：2014-08-26 12:48:25
【问题描述】：

我想在Page.BottomBar 中的CommandBar 上将我的单个AppBarButton 对齐？

在设计中它在右侧显示app bar button，但在模拟器中，按钮总是在中心？

有没有办法在page bottom bar 中对齐AppBarButton？

编辑：

<Page.BottomAppBar>
    <CommandBar HorizontalAlignment="Right" HorizontalContentAlignment="Right">
        <CommandBar.PrimaryCommands>
        <AppBarButton Margin="100,0,0,0" HorizontalAlignment="Right" HorizontalContentAlignment="Right" IsEnabled="True" Name="btnNext" Icon="Next" x:Uid="AppBarNext" Label="Next1"></AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

【问题讨论】：

这不是在这里提问的好方法。到目前为止，您是否尝试过任何方法来解决您的问题？首先展示你的努力，这样人们就可以展示他们的努力。如有疑问，请阅读FAQ、How to Ask 和help center。
@NahuelIanni：我的问题说明了一切 :) 我没有做复杂的事情，它只是一段简单的代码。但对你来说，我正在更新我的问题:)
@MuhammadSaifullah 看来不管你设置，app bar 似乎都是水平对齐的，这取决于PrimaryCommands 的数量。如果您将 dummy 从左侧放置三个空按钮，它也将不起作用 - 您将看到空圆圈。
@Romasz 我想将此按钮对齐到右侧。在 VS 设计中，按钮与右侧对齐，但是当我在模拟器中运行它时，按钮居中对齐。有没有办法对齐底部栏中的按钮？
@MuhammadSaifullah BottomAppBar 在 WP8.1 中的行为在 comparison to desktop app 中几乎没有什么不同。我不知道如何对齐按钮。

标签： xaml winrt-xaml windows-phone-8.1 win-universal-app

【解决方案1】：

您不能在 CommandBar 中居中按钮。话虽如此，如果您需要这种类型的控件，您只需切换到 AppBar 控件即可。相同的行为，只是更灵活。权衡是这个控件不是通用的，不会在 Phone 中呈现。您需要为您的 Phone 平台 head 显示一个 CommandBar。

【讨论】：

为什么他们不允许像在 Windows 8.1 应用程序中那样自定义 AppBar？控件的设计应尽可能灵活...
您将 CommandBar 控件与 AppBar 控件混淆了。它们是不相同的。 CommandBar 有固定的布局，AppBar 没有。
没错，但是在WP8.1中你不能使用AppBar，我不知道为什么。 AppBar 在那里，您可以将其拖到 BottomAppBar 但它只会使所有应用程序崩溃。在 Windows8.1 中，您两者都有，正如您所说，您可以自定义 AppBar 中的布局，因为在 Windows 8.1 中它确实有效。
因为 AppBar 不是 Windows Phone 控件。它是一个仅限 Windows 的控件。你无法做任何事情来让它发挥作用。只有 CommandBar 可以在 Windows Phone 上运行。

【解决方案2】：

HorizontalAlignment 不起作用。这是我们使用的一种解决方法：

<Page.BottomAppBar>
    <AppBar IsSticky="true">
        <Grid Margin="8,8,8,8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <AppBarButton Grid.Column="0" 
                          x:Name="SelectButton" Icon="Bullets"
                          Label="!Select"  />
            <AppBarButton Grid.Column="1" 
                          x:Name="SelectAllButton" 
                          Icon="SelectAll" 
                          Label="!Select All"/>
            <AppBarButton Grid.Column="3" 
                          x:Name="DetailsButton" 
                          Icon="Edit"
                          Label="!Details"/>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

而且它很简单：

干杯：P

【讨论】：

我的问题是针对 windows phone 8.1 而不是 windows 10 :)
您好，我运行的是 Windows 10。但这是从 Visual Studio 2013 创建的 8.1 应用程序。但公平地说，这是商店应用程序而不是手机应用程序 :) 在手机上，可能是 CommandBar是更好的选择:)

【解决方案3】：

这适用于我获得左对齐的后退按钮。由 Rudy Huyn 的博客提供：Display an AppBarButton on the left

<Page.TopAppBar>
    <CommandBar>
        <CommandBar.Content>
            <AppBarButton x:Name="Back" Icon="Back" Label="Back" Click="Back_Click" IsCompact="True"/>
        </CommandBar.Content>

        <AppBarButton x:Name="videoButton" Icon="Video" Label="Video"/>
    </CommandBar>
</Page.TopAppBar>

Rudy 对微软为何采用这种方式提出了一些理论。左边的内容，右边的一切。

顺便说一句，IsCompact="True" 非常重要，否则你会得到恼人的标签和图标。

干杯蒂姆

【讨论】：

不幸的是，VerticalAlignment 不能很好地与Content 部分中的所有控件配合使用。