02、Universal app 中按鈕圖標使用

 

     前言，windows10 昨天凌晨發布了，windows store 開發模型比以前的 silverlight 模型由很多優勢，

我也小興奮了一把。

 

正文：

在 windows phone 8.0 以前的開發中， application bar 的圖標設置相對單一，到了 windows store app 后，

app bar 的設置方式較多了。

 

首先在頁面中，5個按鈕的顯示效果（按鈕放大后，明顯看到第三個 “搜索按鈕” 出現了鋸齒現象，原因是使用了 png 圖片作為圖標，

其它的是使用的矢量圖標 或者控件，支持無損縮放）：

前面 4個：

 

第5個：

 

全部的相關 xaml 代碼： 

 <Page.BottomAppBar>
     <CommandBar>
         <AppBarButton Label="飛機">
             <AppBarButton.Icon>
                 <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE0EB;"/>
             </AppBarButton.Icon>
         </AppBarButton>
         
         <AppBarButton Label="笑臉">
             <AppBarButton.Icon>
                 <SymbolIcon/>
             </AppBarButton.Icon>
         </AppBarButton>

         <AppBarButton Label="搜索">
             <AppBarButton.Icon>
                 <BitmapIcon UriSource="Images/test/search.png"/>
             </AppBarButton.Icon>
         </AppBarButton>
       
         
         <AppBarButton Label="橢圓">
             <AppBarButton.Icon>
                 <PathIcon>
                     <PathIcon.Data>
                         <EllipseGeometry  RadiusX="10" RadiusY="5" Center="20,20"/>
                     </PathIcon.Data>
                 </PathIcon>
             </AppBarButton.Icon>
         </AppBarButton>  
         
         
         <AppBarButton Label="控件">
             <TextBlock Text="love" Foreground="Yellow" FontSize="15" Margin="8,10,0,0"/>
         </AppBarButton>
     </CommandBar>
 </Page.BottomAppBar>

 

1、飛機圖標

使用的是 windows 系統默認安裝的 “Segoe UI Symbol” 字體

1）在 win8.1 系統桌面右側的 “超級按鈕” 中搜索選項中，輸入“字符”，打開 “字符映射表” ：

 

2）打開后，選擇 “Segoe UI Symbol” 字體，並且選擇需要設置的圖標（這里選擇 “飛機”）：

 

將  "" 設置給 FontIcon 的 Glyph屬性，注意前綴 &#x 和 后綴 ; 

<AppBarButton Label="飛機">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE0EB;"/>
    </AppBarButton.Icon>
</AppBarButton>

 

3) 可以在 xaml 頁面中，選中 AppBarButton 后，點擊鍵盤的 F4， 在屬性窗口中，進行設置：

 

2、笑臉圖標

在 xaml 中，選中app bar 中的按鈕，F4 打開屬性對話框，在 Symbol 下拉框中，有很多

ICON 枚舉可以選擇：

 

相關的 xaml：

 <AppBarButton Label="笑臉">
     <AppBarButton.Icon>
         <SymbolIcon/>
     </AppBarButton.Icon>
 </AppBarButton>

 

 3、搜索圖標

這個是最簡單的了，把 BitmapIcon 對象設置為本地工程目錄下的一張 png 圖片即可，缺點是

如果在高清屏上，有可能出現鋸齒，而其它幾個是支持矢量縮放的。

相關 xaml：

 <AppBarButton Label="搜索">
     <AppBarButton.Icon>
         <BitmapIcon UriSource="Images/test/search.png"/>
     </AppBarButton.Icon>
 </AppBarButton>

 

 

4、設置  PathIcon.Data

因為該 Data 對象是一個 Geometry 類型的屬性，所以可以把它的眾多子類賦值給它：

 

這里設置一個簡單的橢圓：

 

5、直接設置 UIElement 作為 AppBarButton 的內容

1）在 xaml 頁面，打開 AppBarButton的屬性對話框：

 

這里設置為一個 TextBlock 控件：

顯示效果：

 

 

 

之所以可以直接設置 xmal 元素，原因是 AppBarButton 繼承自 Button，

而 Button 間接繼承自 ContentControl，它的 Content 屬性是 object 類型的：

 

 

（另附一個園友的 “Segoe UI Symbol圖標字體及常用圖標列表”）

 

 

圖標利器 “MetroStudio”

從 version 1.0  就開始使用了，現在是最新的 version 3.0（下載地址），功能更加豐富，圖標也變多了

1）眾多可以選擇的矢量 icon：

 

 

2）比如上面的 “太極” 的圖案，點擊“編輯按鈕”，可以進行各種編輯操作：

 

3）選擇 “代碼視圖”，可以直接編輯生成的 xaml 和 網頁繪制控件的 svg 格式的代碼，相當酷：

 

完。

 

相關：

1、Guidelines for Segoe UI Symbol icons

2、Symbol enumeration