原作：chinahope
轉自：http://www.devdiv.com/thread-35894-1-1.html
練習二：在模拟器上編譯和測試應用程式
目前為止，雖然應用程式内容不多，但是它已經能夠作為一個測試運作效果的程式。在這項聯系中，你編譯應用程式，
将它布置到模拟器上，執行它，了解它的開發過程。
1. 在菜單Debug中，選擇其菜單Windows中子菜單Output，打開Output視窗（即輸出debug資訊輸出視窗）。
2. 在Debug菜單中，選擇Build Solution，或者選擇快捷鍵SHIFT+F6， 去編譯項目工程。
注意：Visual Studio 2010：選擇在Build菜單中選擇Build Solution，或者選擇快捷鍵CTRL+SHIFT+B編譯項目工程。
3. Output視窗用來檢視編譯過程中的調試資訊，包括資訊結果。
圖8: 在Visual Studio編譯應用程式
4. 你不應該在這個階段檢視錯誤。但是如果程式中包含有錯誤，它将出現在Output視窗中。你能利用Error List視窗
去處理這些錯誤。這個Error List視窗展示錯誤、警告資訊，你能歸類和過濾嚴重的錯誤。另外，你能輕按兩下一個清單
中的一個選項，将自動打開相關的源代碼，訓示出錯誤的源代碼。菜單View中，選中Other Windows菜單，打開
Error List視窗。
注意：Visual Studio 2010：在View菜單下選擇Error List,将打開Error List視窗。
圖9：Error List 視窗 展示編譯過程中的錯誤
5. 為了驗證應用程式部署在Window Phone的模拟器上，确定在Select Target選項中選擇Windows Phone 7 Emulator，
在工具欄上Select Target選項旁邊是Start Debugging按鈕。
圖10：部署應用程式是選擇目标裝置
注意：當你将你的應用程式部署在模拟器上時。注意當Visual Studio建立一個模拟器環境并且部署應用程式的圖檔
時，裝置模拟器出現死，會有一段時間的等待。
6. 點選F5啟動應用程式。
圖11：在Windows Phone 模拟器上展示一個應用程式圖檔
7. 一旦模拟器啟動完畢，模拟器會短暫的顯示一個開始頁面，然後你的應用程式就出現在模拟器的桌面上。
圖12：在模拟器上運作應用程式
8. 在這一步中，你除了建立了使用者界面和簡單的應用程式邏輯，你幾乎什麼沒有坐其他事情。點選SHIFT+F5，或者單擊
Stop按鈕停止調試。不要關閉模拟器，當再次編譯程式時候，還可以使用，可以節省時間。
圖13：關閉調試
小技巧：當你開始調試程式時，需要花大量的時間來配置模拟器環境變量和啟動應用程式。為了提高你的調試效率，避免
關模拟器，一旦模拟器運作，它隻需要花少量的時間關閉調試和編譯和調試源代碼，輕松的部署新的圖檔到你的
應用程式中開始啟動新的應用程式調試。
練習三：設計UI
在這個練習中，你将為HelloPhone應用程式建立一個UI元素。應用程式是非常簡單的，應用程式UI包括一個caption、一個
textbox，和一個Button。用這個應用程式，你能在textbox中輸入文字，然後當你點選button按鈕時，應用程式展示一個
你輸入的文字的條幅。如下圖所示：
圖14： 應用程式使用者界面
1. 在Solution Explorer中，輕按兩下MainPage.xaml打開這個檔案，在designer中打開.
注意：designer提供了兩個分開的區域編輯XAML檔案，包括Design和XAML視圖。在Design視圖中，你能從toolbox中托或者
拉控件放入畫布，你也能選擇，調整大小移動和設定已經存在的控件。在XAML視圖中，你能用代碼來描述布局或控件事件
等。你能通過tabs來選擇一個模式(tabs是兩個視圖中間的小按鈕,自己試試就知道用哪個了）。在分開模式下，編譯視窗
同時存在兩個視圖。你能用ExpandPan/CollapsePane按鈕來最大化視圖。
2. IDE允許你操作圖檔對象，但是在這個例子中，你将集中學習手動編輯XAML語言。一旦完成，你将傳回Design視圖檢視你的
工作。設定為XAML視圖模式，并且最大化這個視圖，輕按兩下XAML的tab,如果你找不到正确的tab，将滑鼠放在每個tab上試一下
注意：如果你配置designer為水準分割視圖，那些tabs放在視窗的底部。
圖15：XAML designer顯示XAML視圖
3. Windows Phone應用程式模闆建立預設的XAML标記。将Grid容器元素命名為LayoutRoot。它的目的是整理頁面上的元素。在
RowDefinition屬性裡，在存在的兩行之間插入一行、設定高的屬性值為Auto。這行将包括textbox和button.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
...
</Grid>
</phone:PhoneApplicationPage>
注意：Grid是一個布局元素，它能作為容器來操作其他控件。它的重要的目的是定位和排列它的子控件。幾個布局控件提供了可代替
的布局行為：Canvas：定義一個區域，在裡面你能利用畫布的坐标位置來準确的定位子元素。Grid：定義一個靈活的格子區域
這些格子由行和列組成。StackPanel：将子元素放在一個單獨的行上，它能橫向和豎向布局。
4. 注意那個Grid布局控件包括其他元素，通過定義Grid.Row屬性來定義不同的行。指出Grid元素的名稱為TitlePanel。設定第一個
TextBlock元素的字元串為"Windows Phone 7".同樣，設定第二個元素TextBlock的Text屬性的字元串為"Hello Phone".
圖16： 設定應用程式
注意：配置設定一個元素到Grid的給定行時，每個元素必須指定Grid.Row屬性值，這個屬性被認為是一個綁定屬性。綁定屬性允許不
的子元素指定唯一的值。在這個例子中，Row屬性值屬于Grid元素。
5. 現在找出名字為ContentPanel的Grid的元素，它目前内容為空，粘貼線面XAML到這個元素裡面。
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Name="MessageTextBox" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>
<Button Grid.Column="1"
Name="ClickMeButton" Content="Click Me" HorizontalAlignment="Right" Padding="4" Margin="10,20,20,20" />
注意：Grid用ColumnDefinitions來定義每個欄目的寬度，而它的子控件就是基于這個寬度。注意第一個欄目的寬度被指定為"*",
所有其他的欄目已經被配置設定空間後，缺定第一個欄目延伸到無用的空間。第二個欄目被設定為它内容的長度。
6. 在完成設定界面之前，增加第三行包括顯示使用者輸入的橫幅。去建立這行，将下面代碼查到ContentPanel的Grid的下面：
<Grid Grid.Row="2">
<TextBlock Name="BannerTextBlock" Style="{StaticResource PhoneTextExtraLargeStyle}"
Foreground="#FFFF9A00" HorizontalAlignment="Stretch"
TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />
</Grid>
7. 低級Design的tab顯示designer視圖。檢視現在的使用者界面，應該和下圖相比對。
圖17：檢視designer視圖