2

我正在开发我的第一个 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。这是我读过的有关应用栏的 MSDN 文章。

4

3 回答 3

4

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

您可能还想阅读样式应用栏。

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

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

于 2013-03-04T14:46:19.983 回答
-1

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

于 2013-03-04T19:35:48.260 回答
-1

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

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

<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

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

于 2014-09-09T07:39:48.317 回答