天天看點

Windows Phone 7 開“.NET研究”發之:工具欄

  前我們讨論了系統主題以及如何通過滑鼠使用Expression Blend來設定系統值。今天,我們來看看另一個可以用Expression Blend輕松實作的主題。如果你看到在各個地方比如YouTube(或我的個人網站,Blankensoft)展示過的應用程式後,你會發現它們基本都使用了一個漂亮的工具欄。

  Windows Phone 7工具欄是應用程式底部的一排圓形圖示。下面是我制作的遊戲TapScotch中的工具欄示範。

  

Windows Phone 7 開“.NET研究”發之:工具欄

  可以從上例中看到我放置了4個用于與使用者互動的圖示。Play, Best Times, Badges和Help。在程式中任何時候點選任何其中任何一個都可以跳轉到相應的頁面去。那麼,怎麼來實作呢?

  添加工具欄

  如果你打開一個新項目,實際上在MainPage.xaml檔案中有段被注釋掉的代碼。如果你删掉注釋,工具欄的代碼看起來就是這樣:

<phone:PhoneApplicationPage.ApplicationBar>
<shell:Ap上海企業網站制作plicationBar IsVisible上海網站建設 style="color: #000000;">="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</上海闵行企業網站設計與制作e="color: #000000;">shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>      

  如果你還删掉了頁面頭部的XML名稱空間,即這些代碼(确認你沒有删除對這些程式集的引用):

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

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

  一旦你在程式中添加了工具欄,你就應該能看到Visual Studio很智能地将程式的DesignHeight屬性調整了72個像素。那正是工具欄的高度。現在來說說系統托盤。

  Windows Phone系統托盤

  你可能已經注意到當你運作程式時,你可以看到時鐘,WiFi信号強度,電池續航時間,等等。這是因為預設情況下,系統托盤是打開的。​​上海闵行企業網站制作​​如果你不關注那些資訊(或者你正好需要那32個像素的空間),那你可以将它的IsVisible屬性設定為false。

shell:SystemTray.IsVisible="False"      

  在工具欄中添加圖示

  如果你看過工具欄的代碼,你可能會注意到它指向了兩個目前不在你的項目中的圖檔。如果你運作程式,你會看到每個ApplicationBarIconButton都顯示一個X圖示。我們可以很簡單地去為每個按鈕建立幾個圖檔,然後添加到項目中,再在那些代碼中引用它們,對嗎?當然。不過還有一個更簡單的方法,還是Expression Blend。在Expression Blend中打開你的項目,導航到Objects and Timeline樹直到你找到那些ApplicationBarIconButton對象。

Windows Phone 7 開“.NET研究”發之:工具欄

  當你選中任何一個ApplicationBarIconButton時,看一下屬性标簽。你會看到一種設定每個圖示和文字的簡便方法。如下:

Windows Phone 7 開“.NET研究”發之:工具欄

  如果你打開IconUri下拉框,你會看到很多可以用在程式中的标準圖示。除非你有一套自定義的圖示否則你肯定離不開它們,這些圖示可以滿足你大多數的需求(當然你可以自己建立圖示并手動添加)。選中一個後,它會自動将白色版本添加到你的項目中。Jeff,為什麼隻有白色的?好問題。我馬上就會說到。如果你沒有在Blend中演練,那麼來看一下圖示清單:

Windows Phone 7 開“.NET研究”發之:工具欄

  為什麼隻有白色圖示?

  Windows Phone産品組讓你的生活變得如此簡單。你隻需建立一個版本的圖示,其他的會被自動處理。是以,當你提供一個用于深色主題的白色圖示後,在使用者使用淺色圖示時它會自動将其轉換成黑色。你可以試一下!選擇清單中的一個圖示,看看你的項目結構。現在在你的項目中隻有一個圖檔。作業系統會在你需要的時候自動将白圖示變為黑色的。

  讓這些按鈕真正有效

  好了,現在,你的程式中已經有了漂亮的按鈕,但在你點選它們時它不會做任何事情。此時,它們和你XAML檔案中的其他東西一樣。需要給它們添加一個Click事件,以及後置代碼中的一個事件處理程式。下面是這個簡單程式的XAML和C#代碼:

  XAML

<shell:ApplicationBarIconButton x:Name="AddButton" IconUri="/icons/appbar.add.rest.png" Text="Add" Click="AddButton_Click"/>
<shell:ApplicationBarIconButton x:Name="SubtractButton" IconUri="/icons/appbar.minus.rest.png" Text="Subtract" Click="SubtractButton_Click"/>      

  C#

private void AddButton_Click(object sender, EventArgs e)
  {
  Counter.Text = (Int32.Parse(Counter.Text.ToString()) + 1).ToString();
  }
  private void SubtractButton_Click(object sender, EventArgs e)
  {
  Counter.Text = (Int32.Parse(Counter.Text.ToString()) - 1).ToString();
  }      

繼續閱讀