Windows Phone 7 控件設計與開發入門

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用來定義應用程序的主入口點，初始化應用程序作用域內的資源和顯示應用程序的用戶界面。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 在頁面的構造函數下加入以下代碼定義屏幕方向：

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

l 在MainPage.xaml文件中如下位置添加屏幕旋轉事件

<phone:PhoneApplicationPage

...

OrientationChanged="PhoneApplicationPage_OrientationChanged">

...

</phone:PhoneApplicationPage>

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

屏幕旋轉後，控件可能需要重新佈局，在下文中將介紹Windows Phone7應用程序常見的幾種佈局。

Windows Phone應用程序容器控件

MainPage.xaml的部分代碼如下：

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

<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}"/>

</StackPanel>

<Grid x:Name="ContentGrid" Grid.Row="1">

</Grid>

</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，還可以創造出更華麗生動的用戶體驗。

本文來自zhangbinown的博客，原文地址：http://hi.baidu.com/zhangbinown/blog/item/6fa7d9fed577794b242df27a.html