设置应用栏和工具栏的样式 (HTML)

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

提供了有关如何设置应用栏或工具栏及其控件的样式示例。

先决条件

简介

快速入门：设置控件样式介绍了 Windows JavaScript 库样式表如何提供一组自动为你的应用提供 Windows 10 外观的样式。下例解释如何使用级联样式表 (CSS) 自定义某些应用栏样式。

浅色主题和深色主题

当你为你的应用选择了浅色或深色样式表时，它将影响应用栏以及应用的其他控件的样式。对于此示例应用栏：

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

选择深色样式表：

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

将生成外观如下的应用栏：

深色样式应用栏

或者选择浅色样式表：

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

将生成外观如下的应用栏：

浅色样式应用栏

工具栏将具有使用相同样式表的相似外观。

有用的 CSS 属性

以下 CSS 属性常用于应用栏和工具栏控件：

**Border-color：**控制应用栏的边框颜色。

例如，border-color: rgb(255, 224, 100);
**Background-color：**控制应用栏的背景颜色。

例如，background-color: rgb(255, 224, 100);

注意这些值通常由 ui-light.css 或 ui-dark.css 预设。

常规部件和状态选择器

为你的控件的部件和状态设置样式的一些有用的 CSS 选择器包括：

.win-command可以设置应用栏命令标签的样式：
```
.win-appbar .win-command
{
    color: rgb(28, 160, 218);
}
```
注意用户必须触摸或单击省略号才能打开应用栏并看到此效果。命令标签默认处于隐藏状态。

.win-commandimage可以设置按钮的图标图像的样式：

.win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

带有彩色命令图标的按钮

伪类

你可以使用以下 Pseudo_classes 作为选择器来设置“应用栏”按钮处于特定状态时的样式：

:hover - 用户将光标置于按钮的图标上，但在光标从该按钮上移开之前，不通过单击、更改该按钮的背景色将其激活。默认情况下，将在悬停期间显示按钮的工具提示。
:active - 按钮在用户按下控件与选择一个选项之间的时段中或其设置为 type="toggle" 时为处于活动状态。
:disabled - 图标颜色变化指示该按钮无法接受用户交互。按钮的禁用属性必须对要应用的此伪类设置为 "disabled"。

使用自定义颜色设置应用栏的样式

设置应用栏样式的一个更详细的示例：

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

生成以下应用栏颜色：

黄色应用栏

将溢出区域背景色的样式设置为如下：

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

并以同样的方式将工具栏的样式设置为如下：

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

须避免的样式

可以使用 CSS 来设置应用栏和工具栏的外观。这对于平稳运行的应用栏和工具栏动画尤其如此。下面是已知的风险区域：

padding — 不更改默认值。
border — 不更改默认值。
margin — 均匀设置边距的样式，但仅在工具栏和应用栏元素上：
```
.win-toolbar, .win-appbar {
   margin: 3px;
}
```

background-color — 可以在操作区域和溢出区域上安全地完成样式的设置：

.win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

position、 float — 不直接在工具栏元素上设置这些 CSS 属性，不过你可以将工具栏包装到设置了这些标尺的样式的父元素中。注意此限制不会应用于应用栏。

已知问题

隐藏工具栏 - 工具栏组件应仅在使用公共 API 时才处于隐藏状态。尽管常见做法是使用“Umbrella”CSS 类将多个组件从视图中隐藏，但这对工具栏（或应用栏）而言并不是一个好做法。问题在于，工具栏已经过性能优化来缓存其命令的状态，而不是依赖于 DOM 来告诉它命令是否可见。这将允许工具栏具有自适应性，以及在命令超出可用的活动区域时溢出命令，同时还可避免从 DOM 读取后浏览器布局出现较大的开销。使用 CSS 将按钮的样式设置为隐藏，即表示工具栏将无法识别一些已被隐藏的命令，并且将过早地开始溢出命令，由于在重新调整窗口的大小期间其活动区域中的可用空间出现缩小。

相反，你应当仅设置 Command.hidden 属性或调用 ToolBar.showOnlyCommands() 方法，以显示和隐藏工具栏中的命令。
自适应溢出失败 - 当工具栏元素设置为“针对内容设置大小”时，工具栏的自适应溢出行为将不能很好地运行。

例如，工具栏组件会设计为存在于其他组件内（通常嵌套在另一个 div 元素内）。通常情况下，在自己的 div 内，工具栏将占用 100% 的其父项的宽度。但是，如果由父类使用的 CSS 布局嵌套在部分弹性框内，且该父类的自定义 transportcontrols 类使用 align-items:center; 将工具栏压缩为仅达到其命令的宽度，将出现意外行为。这是因为工具栏缓存其 width，并在其认为没有足够的空间来容纳命令时试着溢出命令。工具栏需要常量元素宽度，不过在本应用场景中使用的样式假定其宽度是可变的。

本应用场景的解决方案（甚至结合隐藏工具栏的解决方案）涉及到将父类的自定义 transportcontrols 类更改为使用 align-items:stretch;。测试显示这是一个简单的解决方案，但如果你出于某种原因不能对 align-items 进行更改，你可以通过直接将 align-self:stretch 放入工具栏元素中来实现最终结果。

摘要和后续步骤

在本文中，我们展示了设置应用栏和工具栏及其控件的样式的一些示例。我们还提供了有关一些需特别注意的设计问题的信息，以便你在应用程序中使用应用栏和工具栏时可规避此类问题。

了解有关在试用 WinJS 网站上设置应用栏和工具栏样式的—动手尝试**—的详细信息。使用相关代码即可立即看到结果。

Share via