Wp7 Applicationbar 的一些細節

本文重點討論豎屏狀態下的appbar效果。

不過想防一個appbar的話，有必要了解一下。

1. 視覺尺寸

為展開狀態，整個appbar寬480高72

每個iconbutton尺寸為48*48，icon間距為36（不論有幾個icon）

...其實也是一個button，sdk的icons目錄能找到這張圖。這張圖的尺寸是72*72，但上方有12畫素的同名空白，所以視覺效果是和其他icon上對齊的

2. 點選尺寸

最左邊的72*72以及最右邊的72*72（...按鈕）響應選單展開事件。

iconbutton的響應尺寸是84*72，這個值是在48*48的基礎上加上Padding(18,12)

3.彈起狀態

高度變為102畫素. icon文字左右各有6畫素的縮排。因此描述文字可用空間寬度為84-12=72畫素。對於中文是5個半字，因此icon描述一定不要超過5個字。

按鈕描述文字大概相當於FontSize=14的系統預設字型

AppBar menu 的最多能顯示5個半，超過5個將出現滾動條。

menu文字的FontSize約為33，上下Padding均12. 左邊的Margin為24，右邊Margin為0.

4.收起Appbar

以下操作將起Appbar：

彈出皮膚之外的任意地方點選

back硬體鍵

appbar上的任意按鈕有效點選，包括icon、menu以及上面提到的左右各72*72

以下操作則不會收起：

按鈕上按下 - 拖到按鈕外 - 放開

滾動條滑動（如果選單超過5個）

無效區域點選，如選單左邊的24畫素寬的區域、icon欄上空隙部分（如果icon少於4個）