现代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

如果这是一个通常用于导航的上层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

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

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

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

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

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

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