Windows Phone 7 控制項設計與開發入門

介面和互動的設計決定了應用程式在行動裝置上的使用者體驗，控制項是介面的重要組成部分，也是和使用者互動的主要介面。本文將詳細介紹Windows Phone 7常用的布局和控制項，以及控制面板自訂的方法。

正如任何一個C#程式都會以Main()方法為程式進入點一樣，本文的進入點從建立一個新的Windows Phone Application開始。本文的內容正確實踐之前，要確保已經安裝Microsoft Visual Studio 2010 Express for Windows Phone Beta。

Windows Phone應用程式頁面

建立完Windows Phone Application以後，在方案總管裡可以看到Visual Studio根據模板產生的專案檔，App.xaml和MainPage.xaml是本文的重點關注對象，App.xaml用來定義應用程式的主進入點，初始化Application 領域內的資源和顯示應用程式的使用者介面。MainPage.xaml用來定義帶有使用者介面的應用程式頁面。App.xaml.cs和MainPage.xaml.cs是互動邏輯的代碼檔案，Silverlight和WPF都是採用介面和邏輯分開的方式，使設計人員專註於設計，開發人員專註於開發 ，Silverlight for Windows Phone也是如此。Windows Phone應用程式頁面都繼承於PhoneApplicationPage， PhoneApplicationPage是MainPage.xaml的根節點，包含了當前頁面內所有的布局和控制項。

l 以下方法可以實現跳轉到另一頁面：

this.NavigationService.Navigate(new Uri("目標XMAL檔案", UriKind.Relative));

l Goback(),GoForward()方法可以實現在不同的頁面間輕鬆遊走。

l 在頁面的建構函式下加入以下代碼定義螢幕方向：

1. SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

複製代碼

l 在MainPage.xaml檔案中如下位置添加旋轉螢幕事件

1. <phone:PhoneApplicationPage
2. ...
3. OrientationChanged="PhoneApplicationPage_OrientationChanged">
4. ...
5. </phone:PhoneApplicationPage>

複製代碼

在private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)裡可以進行相應的事件處理。

旋轉螢幕後，控制項可能需要重新布局，在下文中將介紹Windows Phone7應用程式常見的幾種布局。

Windows Phone應用程式容器控制項

MainPage.xaml的部分代碼如下：

1. <Grid x:Name="LayoutRoot" Background="Transparent">
2. <Grid.RowDefinitions>
3. <RowDefinition Height="Auto"/>
4. <RowDefinition Height="*"/>
5. </Grid.RowDefinitions>
6. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
7. <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
8. <TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
9. </StackPanel>
10. <Grid x:Name="ContentGrid" Grid.Row="1">
11. </Grid>
12. </Grid>

複製代碼

1.
Grid控制項

在樣本中Grid 控制項包含了StackPanel控制項，用於布局的容器控制項是可以包含其他的容器控制項的。Grid定義由列和行組成的網格布局。Grid.RowDefinitions和Grid.ColumnDefinitions集合分別包含RowDefinition和ColumnDefinition用來定義行和列的寬度和高度，行列的數量是根據集合中子物件的數量被定義的。各子物件中Grid.Row和Grid.Column屬性用於定義在網格中的位置。樣本中定義了兩行，因為只有一列，所以Grid.ColumnDefinitions沒有被定義。TitlePanel在第一行，Grid.Row="0"，ContentGrid在第二行，Grid.Row="1"。

2.
StackPanel控制項

StackPanel控制項可以使布局內的各子物件以水平或垂直的方式順序排列。通過設定Orientation="Vertical"或者Orientation="Horizontal"來定義相片順序。預設情況以垂直方向排列子物件。

除了樣本中Grid 控制項和StackPanel控制項之外，還有其他的容器控制項。

3.
Canvas

以絕對位置的方式布局。通過設定子物件Canvas.Left 指定對象與所在的 Canvas 的左側之間的距離（x 座標）；Canvas.Top 指定對象與所在的 Canvas 的頂部之間的距離（y 座標）。

4.
ScrollViewer

ScrollViewer控制項用來表示可包含其他可見元素的可捲動區域。設定HorizontalScrollBarVisibility 和VerticalScrollBarVisibility屬性可以控制水平捲軸和垂直捲軸的狀態。

5.
Border

Border控制項不太適用於布局，但是確實是容器控制項。Border控制項可以為其包含的子物件繪製邊框或背景。下文中使用Microsoft Expression Blend for Windows Phone自訂按鈕控制項就會用到Border控制項。

Windows Phone應用程式常用控制項

1.
文本控制項

<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

樣本中的TextBlock控制項用於顯示少量文本，Text 屬性對應常值內容。Text 屬性可以在XAML檔案裡動態定義，也可以在C#代碼中隨時修改。利用x:Name屬性定義的名稱來確定要修改的TextBlock控制項。在這個樣本裡，可以通過給ApplicationTitle.Text設定新的字串來改變常值內容。

TextBlock控制項無法接收使用者輸入的文本，也不太適合過長文本的顯示。TextBox控制項可以勝任此類任務，代碼如下：

<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460" />

MaxLength屬性可以控制文本的字串長度。

對於密碼輸入，還可以使用PasswordBox控制項，代碼如下：

<PasswordBox Height="72" HorizontalAlignment="Left" Margin="10,92,0,0" Name="passwordBox1" VerticalAlignment="Top" Width="460" />

PasswordBox 控制項還可以使用PasswordChar定義密碼顯示的字元。

2.
按鈕控制項

按鈕控制項包含Button控制項和HyperlinkButton控制項，HyperlinkButton控制項想相比Button控制項可以不必處理單擊事件就可以自動導航到為 NavigateUri 指定的Uri。

<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="10,174,0,0" Name="button1" VerticalAlignment="Top" Width="160" />

<HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left" Margin="176,195,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />

Button控制項和HyperlinkButton控制項都可以使用Content屬性來設定按鈕上的文字，除此之外，HyperlinkButton控制項支援NavigateUri屬性來定義目標Uri。

3.
選擇控制項

RadioButton用於一組選項中選擇一個選項，RadioButton有兩種把多個RadioButton控制項分成一組。放置到同一個父控制項內，或者設定GroupName屬性。使用GroupName屬性也可以把同一個父控制項內的RadioButton分為多組。同一組中的RadioButton會相互排斥，也就是說使用者只能使一個按鈕的狀態為選中狀態。

<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="radioButton1" VerticalAlignment="Top" />

RadioButton可以設定為選中，未被選中，禁用狀態。預設為未被選中狀態，設定IsChecked="True"可把狀態變更為選中，設定IsEnabled="False"可以把狀態變更為禁用。

CheckBox用於選擇多個選項。同RadioButton一樣，可以通過設定IsChecked和IsEnabled來控制狀態。

<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="10,166,0,0" Name="checkBox1" VerticalAlignment="Top" />

CheckBox設定IsThreeState="True"後可以增加一種狀態不確定狀態。

Slider適合在一個範圍內選擇一個值。

<Slider Height="84" HorizontalAlignment="Left" Margin="0,326,0,0" Name="slider1" VerticalAlignment="Top" Width="460" />

Maximum和Minimum屬性用來定義最大值和最小值。Value屬性是Maximum和Minimum之間的一個值，用來定義Slider當前的值。預設的情況下，Minimum="0" Maximum="10"。使用者可以通過拖動來改變Slider的值，SmallChange屬性可以定義拖動的精度，也可以通過點擊來改變Slider的值，LargeChange屬性來定義值改變的精度。根據介面布局的需要，利用Orientation屬性可以設定水平和垂直方向。

自訂按鈕控制項外觀

如果你發現Windows Phone 7的平凡的控制面板與你的應用程式介面格格不入，可以使用Microsoft Expression Blend for Windows Phone Beta重新設計控制項的外觀。在Visual Studio的方案總管中找到MainPage.xaml，滑鼠右鍵點擊在菜單裡選擇Open in Expression Blend。自訂控制項外觀要先建立一個控制項範本。在Objects and Timeline面板中找到button1，右鍵點擊，在快顯功能表中選擇Edit Template | select Create Empty，為模板命名為ButtonControlTemplate。可以看到Objects and Timeline下的Template下有一個Grid布局控制項，對於按鈕來說Border控制項更適合用來繪製邊框和背景。右鍵點擊Grid，在快顯功能表中選擇Change Layout Type|Border。

空白的Border不能顯示任何內容，在Properties面板下的Appearance面板上設定Border的邊框寬度為2像素，圓角10像素。

在Brushes面板上設定背景顏色，選擇Gradient brush來實現漸層效果。分別設定兩端為白色和紫色。

接下來設定BorderBrush，使用Solid color brush實現一個灰色的邊框。

到此，按鈕的外觀已經設計完成了，但是按鈕還沒有文字。保證Border在Objects and Timeline面板是選中狀態因為需要從Assets面板中添加一個TextBlock控制項到Border。

設定一下TextBlock在Border的布局。

設定HorizontalAlignment和VerticalAlignment為Center讓TextBlock在Border裡置中。接下來需要把TextBlock的Text屬性綁定到Button的Content屬性。這樣，改變Text屬性，Button的Content屬性也會一同更改，在Common Properties目錄下找到Advanced property options，快顯功能表中選擇Template Binding|Content即可完成綁定。

目前這個按鈕在點擊或者獲得焦點的時候還不會有任何變化。下面將以點擊時為例，製作一個響應點擊的動畫效果。

確認Objects and Timeline上已經選擇了Border控制項。切換到States面板，在CommonStates下點擊Pressed，會自動開始錄製。在時間軸1秒的位置處，更改一次Border的背景，在2秒的位置處複原到初始狀態。在點擊按鈕時觸發的動態效果就製作完成了。

總結：在Windows Phone 7中，選用合適的布局和控制項有助於設計和開發出更優秀的使用者介面。利用xaml和cs檔案可以是介面和邏輯的分離，控制項開發中要著重於xaml的描述，配合Expression Blend，還可以創造出更華麗生動的使用者體驗。