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類,可以是以下幾種派生類:

一般不會只在按鈕上放一個Ellipse吧,所以還需要更多的圖標樣式。簡單起見,可以用Metro Studio生成圖標對應的Path(因為要自己畫那些圖形實在太麻煩啦,如果對XAML熟悉的自己畫也行):

 

點擊第三個Code按鈕,然后選擇AppBarButton(這個功能是版本4新增加的功能,所以趕緊升級到最新版吧):

把里面的代碼復制出來,粘貼到項目里:

運行一下看看:

 

 

有了這么多圖標字體,再加上神器Metro Studio,基本上需要的圖標都可以找到了。

三、AppBarButton的其他屬性

應用程序欄里除了添加普通的按鈕,還可以添加按鈕分隔符:

還可以添加開關按鈕,添加一個AppBarToggleButton:

點擊后

 

這只是設置按鈕圖標的一點經驗,此外還有一些需求,比如點擊按鈕后如何改變其Icon和Label?下篇文章再寫吧^_^


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM