现代 UI 自定义 AppBar 按钮

Question

我正在开发我的第一个 Windows 8 现代应用程序，我似乎很难找到正确的文档来制作与默认按钮不同的应用程序栏按钮。

我正在尝试做的是类似于 Microsoft Solitaire Collection 中的应用栏，如下所示：http://www.windows8core.com/wp-content/uploads/2012/08/2b1.png

需要注意三件事：

1. 自定义图标（熊，在第一个）
2. 它不像默认按钮，图标下方有文字
3. 它是矩形的，宽度与应用在填充和全屏横向模式下的宽度成正比。 （在固定模式下，按钮会消失，但对于我的应用程序，如果可能，我希望在固定模式下“仅图标”）。

我开始使用<button>，因为它们在语义上是按钮，而且似乎只有<button> 和<hr> 属于应用栏。

我是在 data-win-options 属性中设置参数还是在 JavaScript 中完成？

我使用的是 JavaScript/HTML5，而不是 C++/C#/VB。 Here are the MSDN articles I've read regarding the app bar.

Answer 1

在这种情况下，只需编辑控件的模板，删除椭圆的边框或将其替换为矩形。 对于彩色背景，更改包含模板中控件的网格的背景颜色并修改网格的大小。

对于那个熊图标，你可以这样做

<AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Images/Bear.png" />
</AppBarButton.Icon>

如果您希望布局感知应用栏使用 CommandBar 或使用 AppBar，您必须以编程方式处理应用大小更改。

看这里-http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662742.aspx

我在我的应用中做了同样的事情。

Answer 2

我建议您在自定义应用栏图标时要小心。严重偏离设计原则可能会使您的应用程序不那么受欢迎。 UI 测试表明用户喜欢标准 UI 的一致性。我已经看到它做得非常有品位和有效（就像在 Nook 应用程序中一样），但我也看到它做得很差（没有提到名字：）玩得开心。

Answer 3

如果这是一个上层AppBar，通常用于导航，您实际上可以通过在data-win-options中指定“layout”属性来提供自定义UI，其值为“custom”，as discussed here。

您可能还想阅读styling app bars。

最后但同样重要的是，请查看the HTML AppBar control sample，其中说明了自定义布局的使用等。

有关 Windows 应用商店应用开发的更多信息，请注册Generation App。