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

Question

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

xamlwinrt-xamlwindows-phone-8.1win-universal-app

11

我想将单个的 AppBarButton 与 CommandBar 中的 Page.BottomBar 右对齐？



在设计中，显示应用栏按钮在右侧，但在模拟器中，该按钮始终居中？ 


有没有办法将 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>

- Muhammad Saifullah

这不是在这里提问的好方式。你尝试过什么来解决你的问题吗？首先展示你的努力，人们才可能展示他们的。如果有疑问，请阅读FAQ、How to Ask和help center。 - Nahuel Ianni

1

@NahuelIanni：我的问题已经说明了一切 :) 我没有做什么复杂的东西，只是一小段简单的代码。但为了你，我会更新我的问题 :) - Muhammad Saifullah

无论你设置什么，应用程序栏似乎都会根据PrimaryCommands的数量水平对齐。如果您从左侧放置虚拟三个空按钮，它也不起作用 - 您将看到空圆圈。 - Romasz

@Romasz 我想将这个按钮对齐到右侧。在 VS 设计中，按钮已经对齐到右侧，但是当我在模拟器中运行它时，按钮居中对齐。有没有办法将按钮对齐到底部栏？ - Muhammad Saifullah

1

@MuhammadSaifullah 在WP8.1中，BottomAppBar与桌面应用程序相比有一些不同的行为。我不知道如何对齐按钮。 - Romasz

3个回答

7

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

- Jerry Nixon

为什么他们不允许像Windows 8.1应用程序那样自定义AppBar呢？控件的设计应该尽可能灵活... - Fritjof Berggren

1

你把CommandBar控件和AppBar控件搞混了，它们并不相同。CommandBar具有固定布局，而AppBar则没有。 - Jerry Nixon

没错，但在WP8.1中你不能使用AppBar，我不知道为什么。AppBar是存在的，你可以将它拖到BottomAppBar，但这只会导致应用程序崩溃。在Windows8.1中，你两者都有，并且正如你所说，在AppBar中你可以自定义布局，因为在Windows 8.1中它确实有效。 - Fritjof Berggren

1

因为AppBar不是Windows Phone控件，它只是Windows系统的控件。你无法让它在Windows Phone上工作。只有CommandBar可以在Windows Phone上使用。 - Jerry Nixon

3

以下是我使用的使返回按钮左对齐的方法。这个方法来自Rudy Huyn的博客：在CommandBar的左侧显示AppBarButton

<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"非常重要，否则你会得到烦人的标签和图标。

祝好，Tim

- Tim

2

不幸的是，“VerticalAlignment”与“Content”部分中的所有控件都无法很好地配合使用。 - user1618054

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yuchen · Accepted Answer

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