windows-8 - 现代 UI 自定义 AppBar 按钮

Question

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

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

有以下三点需要注意:

自定义图标(熊，在第一个)

它不像默认按钮，图标下方带有文本

矩形，在填充和全屏横向模式下，宽度与应用程序的宽度成正比。 (在固定模式下，按钮会直接消失，但对于我的应用程序，如果可能的话，我希望在固定模式下“仅显示图标”)。

我开始使用 <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

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

您可能还想阅读 styling app bars 。

最后但并非最不重要的是，查看 the HTML AppBar control sample ，它说明了自定义布局的使用等。

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