程式 . 生活 . D小調

上一次提到有關於 輸入的鍵盤設定(InputScope) ，這一次來談談有關於  Application Bar
因為上次問我的人，他是設計人員所以她是用 Expression Blend 她一直問我說到底那Control 在哪邊?!
雖然最後我是在Visual Studio 下面做給她，但是事後我還是找出來在Blend 下面要怎麼生出來…

其實這東西很好用，Application Bar有內建的隱藏跟顯示的動畫，
此外，當手機的方向變化時Application Bar會自動調整時，
這可以節省空間如果當您的App有很多功能是需要被觸發但是又不想顯示在內容裡面的時候。

先解釋一下 Application Bar 在Google 翻譯叫做 應用程式欄，但是我覺得他似乎比較像是此App選單
所以才這樣翻譯成 應用程式選單
Application Bar 的呈現畫面會像是





Application Bar 可以收合就會變成..


如何在Blend 中製作呢?! 首先開啟一個專案


之後左側 Objects and Timeline 的視窗中 對於 PhoneApplicaitonPage物件中按下滑鼠右鍵選擇 Add ApplicationBar

之後就可以對Application Bar 物件 按下滑鼠右鍵選擇 Add ApplicationBarIconButton

之後就會多一個ApplicationBarIconButton，之後就可以在物件的Properties 中找到 IconUri的屬性並且可以選擇許多預設的Icon
並且可以改變 Text 屬性改變按鈕下面的字




我放入兩個按鈕效果如下(右圖為展開):



如果是加入 上圖 “關於程式”那效果，就是要加入 ApplicationBarMenuItem


增加完之後:



當然也可以去更改他的Property Text 為 關於程式


效果如下:


最後我們看一下XAML 增加了些什麼

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="關於程式" />
            </shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.check.rest.png" Text="Yes" />
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.close.rest.png" Text="No"/>
        </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"