What's new in Windows 8.1 Part 2

2013-11-29

上一篇是跟大家介紹新的Button，大家會不會覺得如果我不想用內建的Button那怎麼辦?別擔心微軟已經幫大家想好了，接下來為大家介紹四種不同的Button Icon

FontIcon — 這種是以字型為基礎，自型要去哪裡找呢?很簡單打開World到插入底下有個符號，點開來就很多字型裡面包含表情符號一般的文字...等，在那裡就等大家慢慢去發掘囉。請記得要使用16進位的表示方法。

BitmapIcon—這種就是利用Uri指定點陣圖影像檔

PathIcon—用 Path 資料為基礎。

SymbolIcon— Segoe UI Symbol 字型的字符預先定義清單為基礎。

來段Code 讓大家了解了解。

   1:  <AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>

2:

   3:  <AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">

   4:      <AppBarButton.Icon>

   5:          <BitmapIcon UriSource="ms-appx:///Assets/Logo.png"/>

   6:      </AppBarButton.Icon>

   7:  </AppBarButton>

8:

   9:  <AppBarSeparator />

10:

  11:  <AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">

  12:      <AppBarToggleButton.Icon>

  13:          <FontIcon FontFamily="Candara" Glyph="&#x033A;"/>

  14:      </AppBarToggleButton.Icon>

  15:  </AppBarToggleButton>

16:

  17:  <AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">

  18:      <AppBarToggleButton.Icon>

  19:          <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>

  20:      </AppBarToggleButton.Icon>

  21:  </AppBarToggleButton>

首先第1行的是SymbolIcon，最簡單的就不多作介紹，大家這麼聰明一定看得懂。

第3行的是BitmapIcon，他會利用Uri去指定一張圖檔當作Icon 的 Source

第11行是FontIcon，我們只要把Glyph裡面的16進位改成自己想要的即可

第17行是PathIcon，用一連串的直寫跟曲線來繪製而成。

Path要如何用?參考官方的文件吧。

http://msdn.microsoft.com/zh-tw/library/windows/apps/windows.ui.xaml.shapes.path.aspx

古時候有句話，女子無才便是德。看了那麼久，是不是有人覺得無字才是美?就是不想要Button有文字，就是只要圖難道就不行嗎?答案是可以的。在按鈕底下有個屬性 IsCompact 若他為True時，字就會被隱藏。隱藏有什麼好處? 都沒有字會讓整體的感覺更精簡更美好，但是是不是每人都這樣覺得就因人而異囉。或是如果有時候因為版面的關係要很節省空間也可以使用這種方法。

最後最後，女子無才便是德這句話似乎有不同的解釋。大家可以參考看看囉哈哈哈

引用: http://tw.myblog.yahoo.com/sandylee-776660/article?mid=13567

Windows 8

回首頁