Win 10 UWP开发系列：设置AppBarButton的图标
在WP8以前，頁面最下面的四個小圓按鈕是不支持綁定的，WP8.1 RT之后，系統按鈕升級成了AppBarButton，并且支持綁定了。在Win10 UWP開發中，按鈕的樣式發生了變化，外面的圓圈沒有了。不過個人還是更喜歡之前的圓按鈕的樣子^_^
很喜歡Metro Studio這個程序，有數百個好看的按鈕可以用，并且可以導出成png圖片。但現在不建議采取png圖片的方式了，主要是因為png在縮放后有可能會失真，最好使用字體、path等矢量的方式來實現。以下介紹幾種設置AppBarButton圖標的方式。
先建立一個新的UWP項目，命名為AppBarButtonDemo。
一、添加AppBarButton
?
默認主頁面上是沒有按鈕的，在MainPage.xaml上單擊右鍵，用Blend進行編輯：
UWP的應用程序欄和WP8.1有所不同，不僅可以放在下面，還可以放在上面。設置按鈕主要就是設置按鈕的圖形和文字。下面來設置一個最簡單的按鈕：
在BottomAppBar上右鍵，選擇添加CommandBar
默認添加了兩個按鈕，一個是對號，一個是叉號：
看一下結構：
PrimaryCommands就是底部的按鈕欄，里面可以添加AppBarButton，SecondaryCommands就是點擊后再彈起的菜單欄，但是形式跟WP8.1的不太一樣了。再添加幾個菜單，在SecondaryCommands單擊右鍵，再添加幾個AppBarButton，跑一下就變成這個樣子：
改變文字比較簡單，修改其Label屬性即可，
這樣就完成了最簡單的一個按鈕，看一下XAML代碼是這樣的：
看一下AppBarButton的屬性，比較重要的有以下幾個：
Icon:顯示按鈕的圖形；
Label:按鈕的文字說明；
除了AppBarButton，還可以添加一種AppBarToggleButton，與AppBarButton相比還多了一個IsChecked屬性，可以用來標識按鈕是否被選中，選中為True，未選中為False，否則為null，默認是False。
現在來看一下如何改變Icon圖標。
二、設置按鈕的圖標
Icon有幾種方式，分別是：
符號圖標SymbolIcon：這是基于Segoe UI Symbol字體的預定義好的符號列表
字體圖標FontIcon：可以使用字體來顯示圖標
位圖圖標BitmapIcon：使用位圖的圖標，缺點是不是矢量的，有可能失真
路徑圖標PathIcon：基于Path的圖標
自定義圖標
幾種，下面分別來說一下。
1、符號圖標
符號圖標的使用是最簡單的，可以直接選擇
?
在XAML編輯器里也可以直接選擇，有智能感知：
?
所有的符號列表可以在此頁面查看：
https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx
?
XAML代碼是這樣的：
其實只是以下這種方式的簡寫：
2、字體圖標
雖然SymbolIcon已經提供了很多圖標，但有時候需要其他的圖標樣式，默認的SymbolIcon就無法滿足要求了。好在還可以用其他的符號字體，現在把第二個底部按鈕改成字體圖標。
我們使用FontAwesome字體，下載地址在其官網http://fontawesome.io
下載到fontawesome.otf后，在項目中新建Resources目錄，將字體文件其放到Resources目錄里，然后在App.xaml里添加一個資源：
注意#號之前是文件的名稱，后面是字體名，字體名怎么看呢，雙擊打開字體文件，就能看到了：
?
然后編譯一下項目，這樣才能讓Blend識別出剛添加的資源。
把第二個按鈕改成FontIcon，然后設置其FontFamily，注意這里也有兩種設置方式，因為我們剛才添加了字體的資源，所以可以點擊輸入框后面的小點，選擇本地資源：
再設置其Glyph屬性，這個具體要填什么呢，可以參考字體官網的說明：http://fontawesome.io/cheatsheet/
這里有全部的字體圖標列表，需要用unicode方式來指定圖標的樣式，比如選擇 
為什么要用&#x開頭呢，這個其實就是\u的意思，但XAML代碼里不能直接寫\u，所以只能這樣寫了。
?
這樣生成的XAML代碼是這樣的：
?
如果剛才沒有添加資源的話，也可以直接點擊輸入框的小三角按鈕選擇，但是這時候字體會顯示為方塊：
不用懷疑，這個方塊就是剛才添加的字體，鼠標放到上面會有提示。
這樣添加的XAML代碼是這樣的：
?
我還是建議寫成資源的方式，這種方式可以充分利用VS的智能感知，避免出錯：
?
現在運行一下看看：
?
很不錯吧。
?
除了使用FontAwesome字體之外，還可以使用其他的圖標字體。那在使用這些字體的時候，該如何取得某個圖標的Glyph值呢？
打開小娜，輸入"字符"，即可搜索到字符映射表程序：
?
選擇要使用的字體
左下角的U+26C7就是unicode編碼了，注意寫的時候要加一個前綴&#x，后面家一個后綴;
運行效果如圖：
?
3、位圖圖標
位圖圖標就比較簡單了，就跟以前WP8的時候一樣，找一個png圖片設置上就可以。我們可以使用Metro Studio來生成一個圖標。Metro Studio很良心，現在已經升級到4了，可以申請免費授權：
?
隨便選一個圖標，設置背景為透明，導出成png圖片：
?
放到項目里，并包括進項目
然后添加一個AppBarButton，將其設置為位圖圖標，并設置其圖片屬性
?
XAML代碼是這樣的：
運行一下試試：
?
注意，在選擇圖片分辨率的時候，并不是越大越好，有時候分辨率越大反而更容易出現鋸齒現象。
?
4、路徑圖標
PathIcon也屬于矢量圖標，不用擔心失真問題。使用PathIcon主要是設置其Data屬性，這個屬性是Geometry類，可以是以下幾種派生類：
- 簡單的幾何圖形?EllipseGeometry、LineGeometry?或?RectangleGeometry?之一。
- 單個?GeometryGroup，支持其他幾何圖形作為子元素。
- PathGeometry，支持建立圖形和線段的路徑幾何圖形對象模型的子對象元素。
一般不會只在按鈕上放一個Ellipse吧，所以還需要更多的圖標樣式。簡單起見，可以用Metro Studio生成圖標對應的Path（因為要自己畫那些圖形實在太麻煩啦，如果對XAML熟悉的自己畫也行）：
?
點擊第三個Code按鈕，然后選擇AppBarButton(這個功能是版本4新增加的功能，所以趕緊升級到最新版吧)：
把里面的代碼復制出來，粘貼到項目里：
運行一下看看：
?
?
有了這么多圖標字體，再加上神器Metro Studio，基本上需要的圖標都可以找到了。
三、AppBarButton的其他屬性
應用程序欄里除了添加普通的按鈕，還可以添加按鈕分隔符：
還可以添加開關按鈕，添加一個AppBarToggleButton：
點擊后
?
這只是設置按鈕圖標的一點經驗，此外還有一些需求，比如點擊按鈕后如何改變其Icon和Label？下篇文章再寫吧^_^
總結
以上是生活随笔為你收集整理的Win 10 UWP开发系列：设置AppBarButton的图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows8 Metro开发 (04
- 下一篇： view,control,service