Windows 8 现代用户界面自定义应用程序栏按钮

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

我想做的是类似于Microsoft Solitaire Collection中的应用程序栏，如下所示：

有三件事需要注意：

自定义图标（熊，在第一个图标中）

这与默认按钮不同，默认按钮的文本位于图标下方

它是矩形的，在填充和全屏横向模式下，宽度与应用程序的宽度成比例。（在固定模式下，按钮会消失，但对于我的应用程序，如果可能的话，我希望在固定模式下使用“仅图标”）

我首先使用了

，因为从语义上讲，它们是按钮，似乎只有

和

属于应用程序栏

我是在

数据赢选项

属性中设置参数，还是在JavaScript中完成

---

我使用的是JavaScript/HTML5，而不是C++/C#/VB

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

你可能还想好好读一读

最后，但并非最不重要的一点是check out，它演示了自定义布局的使用，以及其他内容

---

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

，我建议您在自定义应用程序栏图标时要小心。对设计原则的重大偏离可能会降低你的应用程序的受欢迎程度。UI测试表明，用户喜欢标准UI的一致性。我看到它做得非常雅致和有效（就像在Nook应用程序中），但我也看到它做得很差（不提名称：）很有趣。

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

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

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

我在我的应用程序中也做了同样的操作。
是的，这是用于导航的上部应用程序栏。我将看一看示例，看看如何操作，但我认为我的应用程序的UI需要一些小的修改。谢谢