Windows Phone 加入 ApplicationBar

剛拿到 Windows Phone 時最不習慣的其實是其 Menu 的 Style
因為 Windows Phone 硬體往往只有三顆鍵

Back、Home、Bing Search

Android 有實體的 Menu 硬體鍵、Windows Mobile 6.5(含) 以下有 Menu Bar
WP7 的 ApplicationBar 雖然雷同於 6.5 的 Menu Bar，
但視覺上與操作流程上的設計還是得讓我這種外行人花力氣去適應。

撰寫 Windows Mobile 專案時小弟是使用 C++/MFC 開發，
僅有拋棄式程式會使用 C#/Windows Form 的方式開發，
Windows Form 的 Menu 和 MFC 的操作比較像，
用 C#/Silverlight 還是第一次，稍微筆記一下製作 ApplicationBar 的兩種方式。

第一種是寫在 xaml 描述檔中


<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="btn_Save"  IconUri="/Buttons/menu_save.png" Text="上傳檔案" Click="btnSave_OnClick"></shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton x:Name="btn_Add"  IconUri="/Buttons/menu_add.png" Text="新增文章" Click="btnAdd_OnClick"></shell:ApplicationBarIconButton>
        <shell:ApplicationBarIconButton x:Name="btn_Del"  IconUri="/Buttons/menu_del.png" Text="刪除文章" Click="btnDel_OnClick"></shell:ApplicationBarIconButton>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


第二種是寫在 cs 檔中動態控制


using Microsoft.Phone.Shell;

class MyPage
{
  MyPage();
  ~MyPage();

  ApplicationBarIconButton btn_Save;
  ApplicationBarIconButton btn_Add;
  ApplicationBarIconButton btn_Del;

  void InitPage()
  {
    SupportedOrientations = (SupportedPageOrientation.Portrait|SupportedPageOrientation.Landscape);

    ApplicationBar appBar = new ApplicationBar();
    appBar.IsVisible = true;
    this.ApplicationBar = appBar;

    btn_Save = new ApplicationBarIconButton(new Uri("/Buttons/menu_save.png", UriKind.Relative));
    btn_Save.Text = "上傳檔案";
    btn_Save.Click += new EventHandler(btSave_OnClick);
    appBar.Buttons.Add(btn_Save);

    btn_Add = new ApplicationBarIconButton(new Uri("/Buttons/menu_add.png", UriKind.Relative));
    btn_Add.Text = "新增文章";
    btn_Add.Click += new EventHandler(btnAdd_OnClick);
    appBar.Buttons.Add(btn_Add);

    btn_Del = new ApplicationBarIconButton(new Uri("/Buttons/menu_del.png", UriKind.Relative));
    btn_Del.Text = "刪除文章";
    btn_Del.Click += new EventHandler(btnDel_OnClick);
    appBar.Buttons.Add(btn_Del);
  }
};


此外，要記得 Menu 用到的 icon 圖片必須指定為 Content Build Action 才能正確讀取，
否則在執行時會看到所有 Menu 的圖示都是圈圈叉叉。