界面和互動的設計決定了應用程式在移動裝置上的使用者體驗，控件是界面的重要組成部分，也是和使用者互動的主要接口。本文将詳細介紹Windows Phone 7常用的布局和控件，以及控件外觀自定義的方法。
正如任何一個C#程式都會以Main()方法為程式入口點一樣，本文的入口點從建立一個新的WindowsPhoneApplication開始。本文的内容正确實踐之前，要確定已經安裝Microsoft Visual Studio 2010 Express for Windows Phone Beta。
WindowsPhone應用程式頁面
建立完WindowsPhoneApplication以後，在解決方案資料總管裡可以看到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的根節點，包含了目前頁面内所有的布局和控件。
● 以下方法可以實作跳轉到另一頁面：
this.NavigationService.Navigate(new Uri("目标XMAL檔案", UriKind.Relative));
● Goback(),GoForward()方法可以實作在不同的頁面間輕松遊走。
在頁面的構造函數下加入以下代碼定義螢幕方向：
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
● 在MainPage.xaml檔案中如下位置添加螢幕旋轉事件
<phone:PhoneApplicationPage
...
OrientationChanged="PhoneApplicationPage_OrientationChanged">
...
</phone:PhoneApplicationPage>
在private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)裡可以進行相應的事件處理。
螢幕旋轉後，控件可能需要重新布局，在下文中将介紹Windows Phone7應用程式常見的幾種布局。
WindowsPhone應用程式容器控件
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="{StaticResourcePhoneTextNormalStyle}"/>
<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控件。
WindowsPhone應用程式常用控件
1. 文本控件
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResourcePhoneTextNormalStyle}"/>
<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，還可以創造出更華麗生動的使用者體驗。