Windows Phone 開發系列之功能表列(Application Bar)

通過代碼建立功能表列的樣本

1. 建立一個新的Windows phone Application工程，命名為AppBarSample。

2. 添加用作表徵圖按鈕的圖片。在Solution Explorer裡右擊AppBarSample工程，Add->New Folder, 添加一個新檔案夾Images，在Images檔案夾上右擊，Add->Existed Items，在File name處輸入C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons\dark，選擇Add，然後選擇appbar.add.rest.png, appbar.delete.rest.png, appbar.edit.rest.png, appbar.refresh.rest.png，選擇Add將四張圖片添加到工程中。

3. 改變圖片屬性。在Solution Explorer裡選中上一步添加的四張圖片。在Properties裡將Build Action設定為Content，將Copy to Output Directory設定為Copy always。

4. 在Solution Explorer中找到MainPage.xaml並右擊選擇View Code(或按F7)，將MainPage方法裡添加如下代碼：

public MainPage()
{
    InitializeComponent();

 

    // 重新定義功能表列
    ApplicationBar = new ApplicationBar();

    // 顯示功能表列和子功能表
    ApplicationBar.IsVisible = true;
    ApplicationBar.IsMenuEnabled = true;

 

    // 設定表徵圖按鈕
    ApplicationBarIconButton btnAdd = new ApplicationBarIconButton(new Uri("/Images/appbar.add.rest.png", UriKind.Relative));
    btnAdd.Text = "Add";
    btnAdd.Click+=new EventHandler(btnAdd_Click);
    ApplicationBarIconButton btnDelete = new ApplicationBarIconButton(new Uri("/Images/appbar.delete.rest.png", UriKind.Relative));
    btnDelete.Text = "delete";
    ApplicationBarIconButton btnEdit = new ApplicationBarIconButton(new Uri("/Images/appbar.edit.rest.png", UriKind.Relative));
    btnEdit.Text = "edit";
    ApplicationBarIconButton btnRefresh = new ApplicationBarIconButton(new Uri("Images/appbar.refresh.rest.png", UriKind.Relative));
    btnRefresh.Text = "refresh";

 

    // 添加表徵圖按鈕
    ApplicationBar.Buttons.Add(btnAdd);
    ApplicationBar.Buttons.Add(btnDelete);
    ApplicationBar.Buttons.Add(btnEdit);
    ApplicationBar.Buttons.Add(btnRefresh);

 

    // 設定子功能表項
    ApplicationBarMenuItem menuitem1 = new ApplicationBarMenuItem("MENUITEM1");
    menuitem1.Click+=new EventHandler(menuitem1_Click);
    ApplicationBarMenuItem menuitem2 = new ApplicationBarMenuItem("Menuitem2");

 

    // 添加子功能表項
    ApplicationBar.MenuItems.Add(menuitem1);
    ApplicationBar.MenuItems.Add(menuitem2);
}

5. 按F5編譯部署就會看到如所示介面。

 

功能表列設計最佳實務

在設計功能表列時要考慮的有以下幾點：

* 利用系統提供的功能表列而非自己建立的菜單系統。這樣能夠使裝置上所有應用程式保持統一的使用者體驗。而且系統提供的功能表列支援動畫和螢幕變換。

* 用系統預設的主題而非自訂的顏色。使用自訂色彩會影響表徵圖按鈕和菜單動畫的效果，而且在某些顯示設定下會更耗電。

* 功能表列的透明度可以任意調整，但這裡推薦只使用0，0.5和1。

* 如果功能表列的透明度小於1，當前顯示頁面大小會和螢幕大小一樣，功能表列會遮在它上面。如果透明度為1，顯示頁面會自動改變大小以適應未被功能表列遮住的地區。

 

表徵圖按鈕設計最佳實務

* 用作表徵圖的圖片應該是使用了a通道的圖片，其背景色為透明，前景色彩為白色。功能表列會根據系統主題樣式來改變表徵圖的顏色。如果使用了帶有背景色的圖片，會導致不可預知的問題。

* 表徵圖按鈕上的圓圈是在運行時由功能表列加上去的，不需要在源圖片裡添加圓圈。

* 用作表徵圖的圖片大小應該是48x48像素。圖片內容的大小應該不超出26x26像素的範圍，這樣才不會被功能表列加上的圓圈遮住。

* 不要設定後退按鈕。因為裝置上的後退按鈕就是專門指定用於頁面後退的。

* 把最常用的功能設定在表徵圖按鈕上。如果某些功能用表徵圖不容易理解，就考慮用功能表項目。

* 表徵圖按鈕上的圖片退便在轉屏時不要有歧義。

* 可以直接用於你的程式中的表徵圖可以從這裡下載。

 

功能表項目設計最佳實務

* 避免使用超過5個的功能表項目，否則使用者必須滾動螢幕才能看到。

* 在單個功能表項目中避免使用過長的文字，否則會引起截斷。推薦功能表項目內容長度為14到20個英文字元之間。

* 為保證良好的使用者體驗，所有的功能表項目和表徵圖按鈕的文字都會被變成小寫字元。

 

範例程式碼下載

參考：http://msdn.microsoft.com/en-us/library/ff431806(v=VS.92).aspx