Windows Phone 7 Application Bar 建置

2010-09-07

4849
0

如何建置Windows Phone 7 Application Bar 可以從XAML 或是 c# 等語法產生IconButton及MenuItem，在WP7的版面預設只能放四個Icon設計方針要參考Application Bar Best Practices，下面提供二個可以下載Icon的地方

Application Bar Icons for Windows Phone 7 Series 或是 C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons 如果有安裝工具的話

Metro Icons

在開啟VS2010 Windows Phone Application 專案MainPage.xaml預設是註記，把綠色的部份選取後在取消註記就可以使用

若要自行加入IconButton有二種方式

Code in XAML

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
         <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton>
         <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton>
            </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Code in C#

          ApplicationBar = new ApplicationBar();
         ApplicationBar.IsVisible = true;
         ApplicationBarIconButton ibtn = new ApplicationBarIconButton(new Uri("/Images/appbar_button1.png", UriKind.Relative));
         ibtn.Text = "test";
         ibtn.Click += new EventHandler(ibtn_Click);
         ApplicationBar.Buttons.Add(ibtn);

若要自行加入MenuItem有二種方式

Code in XAML

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

Code in C#

ApplicationBar = new ApplicationBar();
           ApplicationBar.IsMenuEnabled = true;
           ApplicationBar.IsVisible = true;
           ApplicationBarMenuItem mi = new ApplicationBarMenuItem("test");
          mi.Click += new EventHandler(mi_Click);
           ApplicationBar.MenuItems.Add(mi);

在ApplicationBar裡面有一個屬性Opacity設定透明度值距0~1越小值透明度越高，有些人會覺得很奇怪為什麼要設透明度，看下圖就知道了都是為了美美的呈現，當MenuItems顯示出起來至畫面的一半後面畫面所有的物件是沒辦法點的點一下MenuItems會自動縮下去才能在按一下畫面的物件

Opacity=1 Opacity=0.5

回首頁