现代UI自定义AppBar按钮

Question

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

我试图做的是一样的东西在微软纸牌收集应用栏，就像这样：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

如果这是通常用于导航的上层AppBar，您可以通过指定data-win-options中的“layout”属性来实际提供自定义UI，其值为“custom”，as discussed here。您可能还需要阅读styling app bars。

最后但并非最不重要的，请查看the HTML AppBar control sample，其中介绍了使用自定义布局等。

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

Answer 2

而且我建议你在定制应用栏图标时要小心。重大偏离设计原则可能会使您的应用程序不受欢迎。 UI测试表明用户喜欢标准UI的一致性。我已经看到它做得非常有品位和有效（如在Nook应用程序中），但我也看到它做得很差（不提名称:)玩得开心。

Answer 3

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

对于熊图标如果妳想要的布局知道appbar使用命令栏或与AppBar你必须以编程方式处理的应用程序大小的变化，你可以像这样

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

。

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

我做我的应用程序相同。