在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?下篇文章再寫吧^_^