在WinJS中，我們可以使用系統提供的Appbar圖標，下圖是所有系統自帶圖片的截圖

但有時我們有用到自定義的圖標，那么如何在WinJS中使用自定義的圖標呢。

我們最終制作的圖片為（160*80）：

分以下幾個步驟：

1、準備一個40*40的圖標文件（即你要使用的icon文件，png格式），如

2、使用PhotoShop制作Appbar選中狀態以及禁用狀態的圖片。一般默認狀態顏色為 #ffffff，選中時為#000000，禁用：#666666，如下圖

3。使用CSS圖片拼接工具gopng將圖片拼接起來（或者PS軟件）

Tips：可以分兩次，第一次拼：白、白、黑、灰，選中四張圖片，拖入瀏覽器中就可以生成160*40

4. 在HTML中使用圖片即可。

<div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdBrightness', label:'調節亮度',icon:'url(/images/appbar.brightness.png)',section:'selection',tooltip:'調節亮度'}" type="button"></button> </div>

總結

以上是生活随笔為你收集整理的WinJS实用开发技巧（4）：Appbar中使用自定义图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。