在winJs中更改AppBar命令的图像样式答案

【问题标题】：Change the image style af an AppBarCommand in winJs在winJs中更改AppBar命令的图像样式
【发布时间】：2013-10-21 09:23:29
【问题描述】：

我已经看到 winJs 2.0 for windows 8.1 中的新导航栏控件，非常简单。

但是他们是如何在 Windows 8 中开发天气应用导航栏的呢？我的意思是漂亮的大方形按钮而不是小圆形按钮？

我发现的唯一方法是拥有一个 appbar 并且不使用任何 AppBarCommands（因为我找不到改变它们的形状的方法）而只使用 div 并手动完成所有样式。

这是唯一的解决方案还是可以将圆平方？

【问题讨论】：

您是否尝试将按钮的border-radius 更改为0？
如果我从 dom explorer 更改它周围的每个类，它确实有效。你能帮我找出哪一个正是我必须改变的课程吗？

标签： windows-8 winjs windows-8.1 navbar appbar

【解决方案1】：

最后我自己发现了，改变那些类可以完全改变AppBarCommand的风格：

CSS class           Description
win-command         Styles the entire AppBarCommand.
win-commandicon     Styles the icon box for the AppBarCommand.
win-commandimage    Styles the image for the AppBarCommand.
win-commandring     Styles the icon ring for the AppBarCommand.
win-label           Styles the label for the AppBarCommand.

例如把圆做成正方形：

.win-appbar .win-commandring
{
    border-radius: 0;
}

.win-appbar:hover .win-commandring
{
    border-radius: 0;
}

覆盖所有默认行为是一项艰巨的工作，但可以做到。

查看以下主要样式示例：http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx

【讨论】：