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個)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章