一個拼圖遊戲，包含很多內容。
Hands-On Lab
構建您第一個 Windows Phone 7 應用程式
實驗版本號: 1.1.0
最後更新: 1/30/2012
yi目錄
概述
本實驗手冊向您介紹為Windows Phone應用程式構建和測試一個Silverlight所需要的工具和過程。實驗手冊通過一個簡單的益智遊戲開發的全過程以及其不同階段：開始一個新的專案、新增控制元件、程式碼隱藏、測試和除錯，來向您展示開發Windows Phone應用程式的基本原則。
這個實驗涵蓋了Windows Phone平臺幾個關鍵的特性，包括：導航功能，多點觸控和獨立儲存。
目標
這個實驗的物件是那些對Microsoft工具，例如Visual Studio瞭解較少，且對Silverlight非常陌生的開發人員。如果您對Silverlight的程式設計模型感到很適應，且已經開始利用Visual Studio和Microsoft Expression套件進行工作，那麼您可以考慮略過本實驗。從另一方面講，如果您完全對Silverlight不瞭解，我們強烈建議您查閱一些與Silverlight相關的實驗來豐富您的Silverlight技能 ，這些實驗的內容可以從下面這個站點找到：http://silverlight.net/learn/。
在這個實驗手冊中，您將會學到:
· Windows Phone 開發人員使用的工具更加熟悉：針對Windows Phone的Microsoft Visual Studio2010 Express
· 學習針對Windows Phone應用程式的Silverlight的基礎結構，同時學到Silverlight和針對Windows Phone的Silverlight之間的不同
· 利用針對 Windows Phone的Microsoft Visual Studio 2010 Express和WindowsPhone Emulator編寫、測試、部署和除錯Windows Phone應用程式的。
先決條件
要完成本動手實驗，您需要以下工具：
· 用於Windows Phone的MicrosoftVisual Studio 2010 Express或者是Microsoft Visual Studio 2010WindowsPhone Developer Tools
· Windows Phone開發者工具
安裝
為了方便，本實驗手冊中的大部分程式碼以Visual Studio程式碼段的形式提供。要安裝程式碼段:
在lab's下的 Source\Setup資料夾，執行.vsi 安裝程式。
註釋: 如果你在執行程式碼片段的安裝程式時遇到問題，你可以通過拷貝Source\Setup\CodeSnippets資料夾下的所有.snippet檔案到目錄:
\My Documents\Visual Studio 2010\Code Snippets\Visual C#\My CodeSnippets來進行手動安裝程式碼段
使用程式碼段
利用這些程式碼段，您實際上已經獲得了程式設計操作所會用到的所有程式碼。這個實驗文件將會準確的告訴您何時使用這些程式碼。例如
圖表 1
使用Visual Studio程式碼段把程式碼插入到你的工程裡
為了把程式碼段新增到VisualStudio中，你只要把游標放在你想插入的程式碼上.開始輸入段的名字（沒有空格和連字號），看到IntelliSense顯示的段名，然後當你想要的段名被選中時，敲擊Tab鍵兩次，程式碼將會被插入到游標的位置。
圖表 2
開始輸入段名
圖表 3
敲擊Tab鍵來選中高亮的段
圖表 4
再次敲擊Tab鍵來展開段
使用滑鼠而不是鍵盤來插入程式碼段：在你想插入程式碼段的地方點右鍵，選擇My Code Snippets下的 InsertSnippet，然後從列表中挑選相關的程式碼段。
練習
本實驗手冊包含以下練習:
1. 利用Microsoft Visual Studio 2010 Express為Windows Phone建立Windows Phone應用程式
2. 在Visual Studio中建立拼圖板
3. 利用獨立儲存來保持遊戲狀態
完成此實驗需耗時: 60分鐘。
練習 1: 利用Microsoft Visual Studio 2010 Express為Windows Phone建立Windows Phone應用程式
在這個練習中，您將 學會如何建立、測試、部署和執行您的第一個Windows Phone應用程式。您將會學會如何使用Windows Phone開發者工具，包括：用於Windows Phone IDE的免費工具Microsoft Visual Studio 2010Express和Windows Phone Emulator。
任務包括為Windows Phone工程建立一個新的Silverlight，設計應用程式的起始頁面，提供一些基礎的容錯處理。您同樣將會把應用程式執行在工作站的Windows Phone Emulator上。
註釋:本次動手實驗的步驟闡明瞭Windows Phone上Microsoft Visual Studio 2010Express的使用過程，但是它們同樣適用於帶Windows Phone開發工具的Microsoft Visual Studio 2010。通常，操作指南里提到的Visual Studio，對這兩個產品都適用。
任務 1 – 在Visual Studio中建立一個Windows Phone 應用程式工程
這個任務中，您將會利用針對Windows Phone的MicrosoftVisual Studio 2010 Express 工具內嵌的模板來建立一個Windows Phone應用程式工程的Silverlight，可以把這做為您第一個要開發的Window Phone應用程式的起點。
1. 從作業系統的Start | All Programs | Microsoft Visual Studio 2010 Express |Microsoft Visual Studio 2010 Express for Windows Phone中啟動用於Windows Phone應用程式開發的MicrosoftVisual Studio 2010 Express 。
Visual Studio 2010: 從作業系統的Start | All Programs |Microsoft Visual Studio 2010啟動Visual Studio 2010。
2. 在 File選單，選擇New Project。
Visual Studio 2010: 在 File選單， 指向 New 然後選擇Project。
3. 在 New Project對話方塊，從安裝的模板列表裡選擇Silverlight for Windows Phone類別，然後選擇 Windows Phone 應用程式模板。把name欄改為Windows Phone Puzzle ，同時把location 設為在實驗目錄下 Source 資料夾中的Ex1-CreatingWP7Apps。更改 solution name 為Begin，然後點選OK。
圖表 5
在用於Windows Phone的MicrosoftVisual Studio2010 Express中建立一個新的Windows Phone應用程式
註釋:如果您已經完成培訓教材中Hello Pone的實驗，您可能已經對下面的材料非常熟悉，可能會直接建立一個begin解決方案執行這個練習中任務3的操作。
4. 在 Solution Explorer中，檢視基於Windows Phone 應用程式模板產生的解決方案的結構。Visual Studio解決方案是該解決方案下所有工程專案的容器；本例中的解決方案只包含了一個名為Windows Phone Puzzle的Silverlight Windows Phone工程專案.
圖表 6
SolutionExplorer 包含一個名為Windows Phone Puzzle的應用程式
註釋: Solution Explorer允許使用者在解決方案或工程專案中檢視其包含的項（Item）以及對項進行管理操作。要啟動 Solution Explorer，在鍵盤上按下 CTRL + W, S 或者在 View 選單，選擇 Other Windows | Solution Explorer。
Windows Phone Puzzle專案包含以下項 （Item）:
|
項 |
描述 |
|
App.xaml / App.xaml.cs |
定義應用程式的入口點，初始化應用程式範圍內的資源,，顯示應用程式使用者介面 |
|
MainPage.xaml / MainPage.xaml.cs |
定義應用程式中的程式頁面（帶有使用者介面的頁面） |
|
ApplicationIcon.png |
一種帶有圖示的影象檔案，代表了手機應用程式列表中應用程式的圖示 |
|
Background.png |
一種帶有圖示的影象檔案，代表了在開始頁面上應用程式的圖表 |
SplashScreenImage.jpg
這個圖片會在應用程式第一次被啟動時顯示。啟動畫面會給使用者一個即時的反饋，告訴使用者應用程式正在啟動直到成功跳轉到應用程式的第一個頁面。使用者的啟動畫面可以和應用程式的一個頁面設計的非常相似，這樣能給使用這一個應用程式被快速載入的感覺。
Properties\AppManifest.xml
一個生成應用程式包所必需的應用程式清單檔案
Properties\AssemblyInfo.cs
包含名稱和版本的元資料，這些元資料將被嵌入到生成的程式集
Properties\WMAppManifest.xml
一個包含與Windows Phone Silverlight應用程式相關的特定元資料的清單檔案，且包含了用於Windows Phone的Silverlight所具有的特定功能
References folder
一些庫檔案（集）的列表，為應用程式的工作提供功能和服務。
5. 首先，在Solution Explorer中右鍵單擊App.xaml 並選擇View Designer。注意這個檔案的XAML標記，它有一個叫 Application 的根元素，在這個根元素中有一個叫Application.Resources的段。 此處，您可以定義應用程式級別的資源，例如整個應用程式使用的顏色、畫筆以及樣式物件。
這段XAML程式碼初始化了Application的ApplicationLifetimeObjects屬性，建立了一個PhoneApplicationService 物件。PhoneApplicationService 類提供了應用程式不同生命階段的訪問功能。包含了對應用程式處於空閒狀態的管理，也包含了當應用程式處於有效或無效狀態時的管理。
圖表 7
基於Windows Phone應用程式模板產生的預設App.xaml檔案
註釋: App.xaml 檔案，連同其程式碼隱藏檔案App.xaml.cs，共同定義了Application 類的例項。這個類封裝了用於WindowsPhone的Silverlight，並提供了一個入口點。
6. 現在, 在Solution Explorer 中右鍵單擊 App.xaml 並選擇 View Code 來開啟一個程式碼隱藏檔案。請注意，在Application的派生類的建構函式中已經有一個針對UnhandledException事件的控制代碼。在後面的實驗中，您將會更新模板生成的控制代碼來實現跳轉到一個錯誤頁面及顯示錯誤資訊的功能。
Application 類的RootFrame 屬性標識了應用程式的啟動頁面。 所有的Windows Phone應用程式都有一個最頂層的容器元素，它的資料型別是PhoneApplicationFrame 。這個框架承載了一個或多個用來標識應用程式內容的PhoneApplicationPage 元素，同時它還被用來處理不同頁面之間的導航切換。
圖表 8
應用程式的程式碼隱藏檔案展示了全域性事件控制代碼
註釋: 以Windows Phone應用程式模板為基礎的Silverlight所生成Application類，除了對上述事件的控制代碼外，還包含了對Launching 和Closing事件的控制代碼。您可以通過更新這些方法的程式碼來實現當Windows Phone應用程式啟動和關閉過程中執行自己定製過的程式碼。
7. 新生成的工程專案包含一個預設的檔案，該檔案裡包含了用來定義應用程式主使用者介面的XAML標記。使用者如果要在designer中檢視這個檔案，則需在Solution Explorer中右鍵單擊MainPage.xaml。
預設狀態下，designer 會把這個檔案用分隔檢視顯示。一個視窗顯示XAML標記，另一個 視窗顯示了所見即所得的使用者介面元素設計檢視。模板中顯示的是應用程式的名稱和標題，您可以根據需要刪除它們。除此之外，XAML檔案還可提供給您一個空白的類似畫布的操作區域，您可以通過新增控制元件來建立自己的應用程式的使用者介面。
圖表 9
XAML 設計工具（designer）展示了應用程式的主使用者介面
註釋: 可擴充套件的應用程式標記語言 (XAML) 是一種宣告性語言。您可以利用宣告XAML標記來建立可見的使用者介面元素。然後再利用一個程式碼隱藏檔案對XAML中宣告的事件做出反應，並操作在XAML中已經宣告的物件。用一種基於XAML的宣告性語言來建立介面，從原型到生產整個過程都是非常直觀的，特別是對那些有網頁設計和技術背景的人來說更是如此。
8. ApplicationIcon.png 檔案包含的圖示檔案，就是那些在電話裝置上快速啟動頁面中代表應用程式的圖示。您可以在Solution Explorer 上右鍵單擊該項，用在你機器上註冊的影象編輯應用程式來開啟它，例如, Paint.exe。
註釋: Visual Studio 2010中, 在Solution Explorer 上右鍵單擊圖示檔案，該檔案會在內嵌的影象編輯器中開啟。
9. 一個Windows Phone應用程式通常需要用到基礎平臺或者其他類庫來提供服務。要先使用這個優勢功能，應用程式需要首先引用實現這些服務的程式集。要顯示一個專案工程引用的程式集， 在Solution Explorer中展開References節點，然後檢視程式集列表。它包含了Silverlight一般的程式集以及具體到Windows Phone平臺的程式集。
圖表 10
SolutionExplorer 展示了 被專案工程引用的程式集合
10. 專案工程的Properties視窗是編輯WP清單檔案的唯一方式，正如下表所示。想開啟這個視窗，在Solution Explorer中 右鍵單擊Windows Phone Puzzle 專案然後選擇 Properties。
圖表 11
專案屬性視窗
註釋: Windows Phone 專案屬性視窗允許您更改一些電話程式專用的屬性。這些屬性關係到應用程式在電話裝置上的部署和外觀效果。所有相關引數被儲存在WMAppManifest.xml 檔案中。即使您試圖手動更改過這個XML檔案，只要在這個對話方塊中對您的專案進行更改設定並儲存，其結果都會自動覆蓋您之前的手動更改。
任務2 –在WindowsPhone Emulator中構建並測試應用程式
此時，應用程式並不能做什麼，但是它已經做好第一次測試執行的準備。在這個任務中，您會構建一個應用程式，並把它部署到Windows Phone Emulator然後執行它，通過這些您就能瞭解一個典型的開發過程。
1. 在 Debug 選單，指向 Windows 然後通過選擇 Output 來開啟 Output 視窗。
2. 在Debug選單選擇Build Solution 或者按鍵盤上的SHIFT + F6 組合鍵來編譯解決方案中的專案工程。
Visual Studio 2010: 在Debug選單選擇Build Solution 或者按鍵盤上的CTRL + SHIFT + B組合鍵來編譯解決方案中的專案工程。
3. 檢視 Output 視窗檢視構建編譯過程中產生的每條訊息記錄，包括最後輸出的結果資訊。
圖表 12
在Visual Studio中構建（Build）應用程式
4. 眼下您應該不會發現任何錯誤，但是如果專案包含編譯錯誤，那麼這些錯誤資訊將會出現在Output視窗中。要處理這些型別的錯誤，您可以利用Error List 視窗。這個視窗能夠以列表的形式顯示錯誤、警告以及編譯器產生的資訊，您可以根據錯誤的嚴重性來排序或者過濾。此外，你可以通過雙擊列表中的條目來自動開啟相關原始碼檔案並切換到錯誤的源點。要開啟Error List視窗，在View選單，指向Other Windows然後選擇Error List。
Visual Studio 2010: 點選View 選單，選擇Error List 來開啟Error List視窗。
圖表 13
ErrorList 視窗顯示構建過程中的錯誤
5. 驗證部署的目標是Windows Phone Emulator要做到這樣，確保在工具欄上Start Debugging按鈕旁的Select Target下拉框中的值是Windows Phone 7 Emulator。
圖表 14
選擇目標裝置來部署應用程式
註釋: 當您從Visual Studio中部署您開發的應用程式時，您既可以選擇一個真實的裝置或者是. WindowsPhone Emulator。
6. 在Windows Phone Emulator上按F5 來啟動應用程式。注意裝置模擬器視窗的出現，同時在Visual Studio建立模擬器環境和部署應用程式映象時會出現一個停頓。
圖表 15
部署一個應用程式映象到 Windows Phone Emulator
7. 一旦準備就緒， 模擬器會顯示開始頁面，不久之後，您的應用程式也將會出現在模擬器的視窗中。
圖表 16
在 Windows Phone Emulator中執行應用程式
8. 直到您完成了建立使用者介面以及應用程式邏輯的程式設計設計，否則您在當前應用程式的頁面基本上什麼都不能做。按下SHIFT + F5或者工具欄上的Stop按鈕來分離偵錯程式並終止除錯會話。不要關閉模擬器視窗。
圖表 17
終止除錯會話
提示:當您啟動一個除錯會話時，它將會花費一些時間來搭建模擬器環境以及啟動應用程式。為使您的除錯過程簡單而有效，當您在用Visual Studio編寫原始碼的時候，請避免關閉模擬器。如果模擬器一直處於執行狀態，它只會用很少的時間來完成停止當前會話、編輯原始碼、構建應用程式、部署新應用程式映象、重新啟動除錯會話這一整個過程。
任務 3 – 為主頁設計使用者介面
在這個任務中您將會為應用程式的主頁面建立使用者介面。這個頁面顯示一個版權頁。它包含一個代表應用程式的圖片以及離開版權頁導航進入到遊戲頁面的按鈕。
1. 首先，在工程裡新建一個資料夾來儲存應用程式中所使用的圖片。在 Solution Explorer視窗中，右鍵單擊 WindowsPhonePuzzle 工程節點， 指向 Add 並選擇 New Folder。為建立好的資料夾命名為 Assets。
註釋:當您添加了一個新的資料夾，Solution Explorer視窗中將會顯示一個以佔位符命名的資料夾，您可以通過輸入一個新的名稱來替換佔位符。如果您意外的放棄編輯模式，您可以按F2重新回到編輯模式。
圖表 18
SolutionExplorer視窗展示了新 Assets資料夾
2. 現在，向工程中新增應用程式所需的圖片。在 Solution Explorer視窗上，右鍵點選 Assets，選中Add 然後選擇Existing Item。在 Add Existing Item 對話方塊， 點選browse並定位到實驗目錄下Source資料夾中的Assets ，然後按住CTRL鍵不放 ，滑鼠點選SplashImage.jpg 和Puzzle.jpg ，選中這兩個檔案後點擊 Add。
註釋:在 Visual Studio中，您可以為自己在Windows Phone工程中建立的Silverlight新增資原始檔，然後可以通過設定Build Action的值來完成對這些檔案的部署。專案工程中每個被新增的圖片Build Action值都要被設為Resource，這些圖片在進行工程彙編時會被嵌入檔案中。
3. 試圖檢視某個圖片，您可以在Solution Explorer 上右鍵單擊該項，用在你機器上註冊的影象編輯應用程式來開啟它，例如Paint.exe。
註釋: Visual Studio 2010中, 在Solution Explorer 上右鍵單擊圖示檔案，該檔案會在內嵌的影象編輯器中開啟
圖表 19
應用程式包中的影象嵌入資源
4. 開啟應用程式的主頁面，在Solution Explorer視窗，右鍵單擊MainPage.xaml將其載入到designer中。
5. 在 Design 檢視，選擇 TextBlock並將其命名為ApplicationTitle 然後按 F4。在 Properties 視窗，更改 Text 屬性——將所有屬性按照類排序後，其位置在Common分類中——為其新增值 ‘WINDOWS PHONE PUZZLE’。
圖表 20
在Properties視窗配置UI 元素
註釋:您可以通過點選Properties視窗工具條上的圖示來為所有屬性進行按照類別或者屬性排序。
6. 接下來， 選擇名為PageTitle的 TextBlock 並替換其 Text屬性值為‘start’。
7. 在由Windows Phone應用模板產生的XAML標記程式中，定位名為LayoutRoot的Grid容器元素。它是用來佈置頁面上的元素。注意 root Grid 元素包含其他嵌入的元素, 這些元素通過定義一個 Grid.Row 屬性被分配到外部Grid裡的不同行。找到名為ContentPanel的Grid元素並將其Grid.Row設為1，並插入下面高亮的XAML標記程式碼。
XAML
<Grid x:Name="LayoutRoot" Background="Transparent">
...
<!--ContentPanel - place additionalcontent here-->
<Grid x:Name="ContentPanel" Grid.Row="1"Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height=".8*" />
<RowDefinition Height=".2*" />
</Grid.RowDefinitions>
<Image Source="Assets/SplashImage.jpg"VerticalAlignment="Center"HorizontalAlignment="Center"Width="471"Height="492" />
<Button Content="START!"Name="StartButton"Grid.Row="1"VerticalAlignment="Center"HorizontalAlignment="Center" />
</Grid>
</Grid>
註釋:上面的XAML標記程式碼建立了一個兩行的頁面佈局，第一行包含了版權頁所需的圖片，第二行包含了一個用來退出當前頁面並導航切換到智力遊戲主頁面的按鈕。
8. 切換編輯模式到Design檢視。要把Design檢視最大化到檢視區域，雙擊設計工具視窗右邊緣上Design 標籤( ) 。如果您不方便找到正確的標籤，可以把滑鼠停留在每個標籤上顯示提示資訊，從而找到正確的標籤。
註釋:如果您的實際工具視窗選擇的是水平分隔檢視，則標籤將會被自動放置到視窗的下邊緣。
9. 為按鈕建立一個事件控制代碼。為實現這一目的，雙擊設計工具表面上的START按鈕 。這樣做就建立了一個Click事件控制代碼並且會自動開啟程式碼隱藏檔案，此時游標會定位到StartButton_Click事件控制代碼的方法程式碼中。把以下（高亮）程式碼段貼上到方法程式碼中。
(程式碼段 – YourFirstWP7App – 練習1 任務 3 步驟 9 – StartButton_Click 事件控制代碼)
C#
private voidStartButton_Click(object sender, RoutedEventArgs e)
{
// navigate
this.NavigationService.Navigate(new Uri("/PuzzlePage.xaml", UriKind.Relative));
}
註釋: PhoneApplicationPage 類通過它的NavigationService屬性提供了切換到其他頁面的方法和屬性。您可以呼叫NavigationService 的Navigate 方法並把頁面的URL做為傳參。您還可以使用GoBack 和 GoForward方法在導航歷史中向前或向後導航 。硬體裝置的後退按鍵通過應用程式也提供了向後翻頁導航的功能。
上面的事件控制代碼顯示了使用NavigationService跳轉到PuzzlePage.xaml頁面。
任務 4 – 在應用程式中處理錯誤
在這個任務中，您將會通過升級應用程式來顯示異常不能被處理的錯誤頁面。要管理不能被處理的異常操作，您首先需要在應用程式中增加一個新的頁面來顯示錯誤的資訊。然後，您需要建立一個事件控制代碼來處理UnhandledException事件。無論何時當應用程式不能捕捉一個異常的時候，都將觸發該事件在控制代碼程式中，您導航切換到一個錯誤頁面並將異常的錯誤資訊傳遞給該頁面。
註釋: 不去考慮如何實現一個未處理異常的控制代碼，您的應用程式應該包含您所能處理的任何異常的操作。
1. 首先，新增一個新的頁面到專案工程中。 在 Solution Explorer檢視，右鍵單擊Windows Phone Puzzle 工程節點, 指向 Add並選擇 New Item. 在 Add New Item 對話方塊, 從模板列表裡選擇Windows Phone PortraitPage ，把name 設為 ErrorPage.xaml 然後點選 Add。
圖表 21
為工程新增一個新的頁面
2. 在ErrorPage.xaml 檔案中，找到名為LayoutRoot的Grid元素，並用下面的藍色高亮XAML標記程式碼替換它的子控制元件。這個XAML定義了一個應用程式標題和頁面標題，兩個標題都被命名為error。它同樣定義了一個TextBlock物件並被指定為x:Name="ErrorText"樣式，用來儲存任何未來異常的錯誤文字。
XAML
...
<Grid x:Name="LayoutRoot"Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the applicationand page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle" Text="WINDOWS PHONE PUZZLE" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="error" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional contenthere-->
<Grid x:Name="ContentPanel" Grid.Row="1">
<Border BorderBrush="White">
<TextBlock x:Name="ErrorText" Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" />
</Border>
</Grid>
</Grid>
...
3. 現在，按下F7來開啟一個新頁面的程式碼隱藏檔案。或者，作為另一種選擇，在Solution Explorer 視窗上右鍵單擊ErrorPage.xaml然後選擇View Code。在檔案的最上層插入下面的名稱空間。
C#
using System.Windows.Navigation;
4. 然後，把下面程式碼段中高亮的部分插入到ErrorPag類中。這樣做就建立了一個Exception物件，當跳轉切換到這個頁面的時候會自動掛接到ErrorText.Text。
(程式碼段 – YourFirstWP7App –練習 1 任務 4 步驟 4 – 錯誤頁面 OnNavigatedTo)
C#
public partial class ErrorPage : PhoneApplicationPage
{
publicErrorPage()
{
InitializeComponent();
}
public static ExceptionException;
// Executes whenthe user navigates to this page.
protected override voidOnNavigatedTo(NavigationEventArgs e)
{
ErrorText.Text = Exception.ToString();
}
}
5. 當這個頁面完成後，無論何時，當一個不能被處理的異常出現，此類事件的控制代碼會使程式切換到錯誤的頁面，並顯示錯誤的資訊。在Solution Explorer檢視上，右鍵單擊App.xaml並選擇View Code來開啟Application類的程式碼隱藏類。
6. 在App 類中,找到 Application_UnhandledException 事件控制代碼並用下面的程式碼（高亮部分）替換控制代碼方法的程式體。
(程式碼段 – YourFirstWP7App –練習 1 任務 4 步驟6 –Application_UnhandledException)
C#
//Code to execute on Unhandled Exceptions
private voidApplication_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if(System.Diagnostics.Debugger.IsAttached)
{
// An unhandled exceptionhas occurred; break in the debugger
System.Diagnostics.Debugger.Break();
}
e.Handled = true;
ErrorPage.Exception= e.ExceptionObject;
(RootVisual asMicrosoft.Phone.Controls.PhoneApplicationFrame).Source=
new Uri("/ErrorPage.xaml", UriKind.Relative);
}
註釋:這個Application_UnhandledException 就像一張安全網，您應用程式中所有的不能被處理的異常都在這裡終止。UnhandledException事件控制代碼處理完成後，它把所有的Handled屬性都設定為true，這樣做是為了阻止對異常的進一步處理。然後它把未處理異常的資訊儲存到ErrorPage類的靜態成員中，並設定幀的Source屬性來顯示錯誤頁面。當您設定Source屬性的值與顯示內容不同時，那麼顯示幀將會切換到一個新的內容。當您導航切換到錯誤的頁面後，它將會返回異常物件的文字值（Exception.ToString()) 並以此顯示到頁面中。一旦您開始在真正裝置上除錯您的應用程式，這將會非常有用。
任務5 –驗證
在這個任務中，你開始構建這個應用程式，並將其部署到WindowsPhone Emulator，執行該應用成來驗證你之前的操作是否正確。
1. 在Visual Studio中，按 CTRL + F5 把應用程式部署到WindowsPhone Emulator 並執行它（不是除錯）。等待應用程式啟動並顯示其主頁面。它將會顯示版權頁。
圖表 22
執行在模擬上的應用程式的版權頁
2. 點選START按鈕。注意應用程式顯示了您之前定義的不能處理異常的錯誤頁面。請記住這是所期望得到的結果，因為按鈕點選事件的控制代碼是將會切換螢幕到PuzzlePage.xaml頁面，這是一個當前還沒有定義的頁面。您將會在後面的實驗中定義該頁面。
圖表 23
未處理異常錯誤頁面
3. 雙擊 Back 按鈕回到電話的主頁面。到目前位置，除非為應用程式增加新的功能，否則您所能做的非常有限。請不要關閉模擬器視窗。
練習2: 在Visual Studio中建立拼圖板
在這個任務中，您將會建立一個頁面來顯示拼圖板和玩遊戲。這個頁面顯示了一個圖片，當點選它是，圖片會碎成多片同時會在拼圖板中隨機排列。
這個遊戲的邏輯已經包含在了PuzzleGame類中，您可以使用實驗提供的資源包新增這個類到專案工程中。在這個練習中，您會建立頁面上控制元件的佈局，新增必需的應用程式邏輯來初始化拼圖板以及響應使用者介面上的事件。 接下來,您需要新增多點觸控功能來支援使用者使用手指來拖拽拼圖板上每一片拼圖並重新排列它們。最後，您將使用動畫指令碼來建立完成拼圖時的引人注目的視覺效果。
任務1 – 建立使用者介面
在這個任務中, 您會為應用程式新增一個新的頁面來顯示拼圖板，還會新增必需的使用者介面元素來顯示拼圖的圖片以及遊戲過程中已經移動拼圖次數的狀態面板。在頁面中，還會有一個按鈕，當按下，它將會幫助您解密完成拼圖。
1. 如果還沒有開啟，從Start | All Programs | Microsoft Visual Studio 2010Express for Windows Phone啟動用於 Windows Phone的Microsoft Visual Studio 2010 Express。
Visual Studio 2010: 從作業系統的Start | All Programs |Microsoft Visual Studio 2010啟動Visual Studio 2010。
2. 如果您完成了前一個練習的所有步驟，您可以繼續繼續使用為上個練習所建立的解決方案（solution）；否則，從實驗的Source資料夾下的Hello Phone\Ex2-WP7AppUXDesignWithBlend\Begin處開啟Begin. sln。
3. 為工程新增一個新的頁面。在Solution Explorer檢視上, 右鍵單擊 WindowsPhonePuzzle 工程節點, 指向 Add並選擇New Item。在 Add New Item 對話方塊，從模板列表中選擇 Windows PhonePortrait 頁面，把 name 設定為 PuzzlePage.xaml 然後點選 Add。
圖表 24
為工程新增一個新的頁面
4. In the XAML view of the newpage在新頁面的XAML檢視中，找到LayoutRoot 元素的RowDefinitions 部分，將其第一行Height屬性的值 設為 0.2*.
圖表 25
配置Grid容器的頁面設定
註釋: 指定高度的值為*，是為了確保當Grid的佈局中其行都已經被分配後，該行能夠自動伸縮來填滿可用空間。當高度為星（*）且包含一個乘數時，如在這個例子中第一行高度的定義，未被使用的空間基於乘數值被按比例分配給所有被標註為“start-sized”的行—乘數是1則假設為不指定。這樣，在上面的定義中，第一行佔有1/6的剩餘空間。
5. 在名為LayoutRoot的 grid中，刪除預設模板中存在的TitlePanel 和 ContentPanel元素—包括它的子元素部分。
6. 在僅挨RowDefinitions 部分的下方,插入 兩個StackPanel 容器元素，如下面高亮的部分，每個元素對應佈局中的一行。
XAML
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical"VerticalAlignment="Stretch">
</StackPanel>
<StackPanel Orientation="Vertical"VerticalAlignment="Top"Grid.Row="1">
</StackPanel>
</Grid>
7. 插入第一個 StackPanel 元素—被預設指定給LayoutRoot Grid容器最高一行（第0行） ssigned by default to the top row (row 0) of the LayoutRoot grid—插入以下高亮部分的XAML markup程式碼。
XAML
...
<Grid x:Name="LayoutRoot" Background="Transparent">
...
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<Buttonx:Name="SolveButton"Content="SOLVE"Margin="10" HorizontalAlignment="Center" Click="SolveButton_Click"/>
<StackPanelx:Name="StatusPanel"Orientation="Horizontal"HorizontalAlignment="Center"Visibility="Collapsed">
<TextBlockHorizontalAlignment="Center"Text="Your Moves: "TextWrapping="Wrap"Foreground="#FFD0D0D0"FontSize="17.333"/>
<TextBlockx:Name="TotalMovesTextBlock"HorizontalAlignment="Center"Text="N"TextWrapping="Wrap"Foreground="#FFFFB000"FontSize="17.333"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
</StackPanel>
</Grid>
...
註釋:這部分高亮XAML標記程式碼定義了一個按鈕，當您按下時它將會自動解謎拼圖並會在狀態面板中顯示完成遊戲一共移動了多少步。
8. 然後， 在Grid佈局中最下面一行即第二個 StackPanel 元素中, 插入以下高亮 XAML markup程式碼。
XAML
...
<Grid x:Name="LayoutRoot" Background="Transparent">
...
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
<Border x:Name="CongratsBorder"Height="30"Background="#FFF10DA2"HorizontalAlignment="Center"Width="443"RenderTransformOrigin="0.5,0.5"UseLayoutRounding="False"Opacity="0">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock HorizontalAlignment="Center"Text="CONGRATULATIONS!"TextWrapping="Wrap"Foreground="White"FontSize="17.333"VerticalAlignment="Center"FontWeight="Bold"/>
</Border>
</StackPanel>
</Grid>
...
註釋:這個Border元素中包含了當拼圖完成時將會被顯示的一個訊息。注意Border 中包含了RenderTransform。這個形變是後面實驗中建立動畫指令碼時所需要的，目的是為了提供一個視覺效果。動畫指令碼不能使一個元素動起來，除非它發生了形變。
9. 為了下面那個StackPanel元素的內容, 接著上一步插入的程式碼後面再次插入下面的高亮XAML程式碼。
XAML
...
<Grid x:Name="LayoutRoot" Background="Transparent">
...
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">
<Border x:Name="CongratsBorder"...>
</Border>
<Border x:Name="border"BorderThickness="3"Background="#FF262626"HorizontalAlignment="Center"VerticalAlignment="Center"Padding="1"RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1"StartPoint="0.5,0">
<GradientStop Color="#FFF10DA2"Offset="0"/>
<GradientStop Color="#FFEE7923"Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Canvas Height="435"Width="435">
<Image x:Name="PreviewImage"Height="435"Width="435"Opacity="0.2" />
<Canvas x:Name="GameContainer"Width="435"Height="435" />
</Canvas>
</Border>
<TextBlock x:Name="TapToContinueTextBlock"HorizontalAlignment="Center"Text="Tap the picture to start thepuzzle" TextWrapping="Wrap"Foreground="#FFD0D0D0"FontSize="17.333"/>
</StackPanel>
</Grid>
註釋: 上面的XAML標記定義了一個Border元素，實現用帶有多種顏色的漸變線性畫刷來畫圖，且這些顏色彼此融入。這個元素還指定了一個RenderTransform，目的是為了建立動畫指令碼來實現視覺效果。
Border元素中有一個單獨的Canvas 元素。這個容器元素被用來明確其它子元素相對在該容器元素中的座標位置它的子元素中包含有一個Image元素，用一水印圖片來預覽拼圖解決方案（PreviewImage）。還包含了一個內部的Canvas（GameContainer），用來儲存拼圖片。
標記中還包含了一個TextBlock 元素 (TapToContinueTextBlock) 顯示瞭如何啟動一個遊戲。當遊戲進行時，該元素就會被隱藏。
10. 切換到設計來檢查頁面的佈局。要選擇檢視並切換到最大可視區域，雙擊設計工具（designer）視窗的右邊緣上的Design標籤( )。如果您不能確定正確的標籤，利用滑鼠游標停留到每個表上會顯示提示資訊的辦法來找到正確的標籤。頁面應該出現並顯示成如下圖：
圖表 26
WindowsPhone Puzzle 應用程式使用者介面
任務 2 – 程式設計實現應用程式邏輯
在這個任務中，您將會程式設計實現應用程式邏輯。包括初始化拼圖板，從應用程式資源中讀取圖片和為使用者介面上的事件建立控制代碼
1. 向專案工程中新增包含遊戲邏輯的類。在Solution Explorer上，右鍵點選Windows Phone Puzzle 工程節點,指向 Add 並選擇 Existing Item. 在 Add Existing Item 對話方塊, 點選browse定位到實驗下Source資料夾中的Assets, 選擇 PuzzleGame.cs 然後單擊 Add。
圖表 27
SolutionExplorer 顯示已經新增的工程檔案
註釋:遊戲的邏輯是被包含在PuzzleGame類中，您可以從實驗中的資源包中找到該類並新增到工程中。這個類提供了一些方法，包括開一個新遊戲，移動拼圖片，儲存和返回遊戲狀態。您可以自由的檢視整個類中的原始碼，但是詳細地分析程式碼已經超出了本實驗的範圍。
2. 開啟你在前面任務建立的拼圖頁面的程式碼隱藏檔案。要實現這一目的，在Solution Explorer上，右鍵單擊PuzzlePage.xaml 檔案，並選擇View Code 。
3. 把以下名稱空間的宣告新增到PuzzlePage.xaml.cs 程式碼隱藏檔案中。
(程式碼段 – YourFirstWP7App – 練習 2 任務 2 步驟 3 – PuzzlePage 名稱空間)
C#
using System.IO;
using System.Windows.Media.Imaging;
using System.Windows.Resources;
4. 在PuzzlePage 類,插入下面成員變數的宣告（高亮部分）。
(程式碼段 – YourFirstWP7App – 練習 2 任務 2 步驟 4 – PuzzlePage 成員變數)
C#
public partial class PuzzlePage :PhoneApplicationPage
{
private const doubleDoubleTapSpeed = 500;
private const int ImageSize =435;
private PuzzleGame game;
private Canvas[] puzzlePieces;
private Stream imageStream;
publicPuzzlePage()
{
InitializeComponent();
}
}
5. 現在， 新增一個 ImageStream 屬性，如下面程式碼段所示(高亮部分)。
(程式碼段 – YourFirstWP7App – 練習 2 任務 2 步驟 5 – ImageStream 屬性)
C#
public partial class PuzzlePage :PhoneApplicationPage
{
...
public Stream ImageStream
{
get
{
return this.imageStream;
}
set
{
this.imageStream= value;
BitmapImagebitmap = new BitmapImage();
bitmap.SetSource(value);
this.PreviewImage.Source= bitmap;
int i =0;
intpieceSize = ImageSize / this.game.ColsAndRows;
for (int ix = 0; ix < this.game.ColsAndRows;ix++)
{
for (int iy = 0; iy < this.game.ColsAndRows;iy++)
{
ImagepieceImage = this.puzzlePieces[i].Children[0] as Image;
pieceImage.Source = bitmap;
i++;
}
}
}
}
publicPuzzlePage()
{
InitializeComponent();
}
}
註釋: ImageStream 屬性返回拼圖圖片的使用流。它自動更新背景圖片以及每個拼圖碎片。您可以通過設定該屬性值為任何一個有效的點陣圖來實現替換拼圖片，例如，一張來自手機相機所拍中的圖片。在這個實驗手冊中，你可以使用應用程式包的內嵌資源。
6. 利用下面程式碼段（高亮部分）更新PuzzlePage類的建構函式。
(程式碼段 – YourFirstWP7App – 練習2 任務 2 步驟 6 – PuzzlePage建構函式)
C#
public partial class PuzzlePage :PhoneApplicationPage
{
...
publicPuzzlePage()
{
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
// Puzzle Game
this.game =new PuzzleGame(3);
this.game.GameStarted+= delegate
{
this.StatusPanel.Visibility= Visibility.Visible;
this.TapToContinueTextBlock.Opacity= 0;
this.TotalMovesTextBlock.Text= this.game.TotalMoves.ToString();
};
this.game.GameOver+= delegate
{
this.TapToContinueTextBlock.Opacity= 1;
this.StatusPanel.Visibility= Visibility.Visible;
this.TotalMovesTextBlock.Text= this.game.TotalMoves.ToString();
};
this.game.PieceUpdated+= delegate(objectsender, PieceUpdatedEventArgs args)
{
intpieceSize = ImageSize / this.game.ColsAndRows;
this.AnimatePiece(this.puzzlePieces[args.PieceId], Canvas.LeftProperty, (int)args.NewPosition.X* pieceSize);
this.AnimatePiece(this.puzzlePieces[args.PieceId], Canvas.TopProperty, (int)args.NewPosition.Y* pieceSize);
this.TotalMovesTextBlock.Text= this.game.TotalMoves.ToString();
};
this.InitBoard();
}
}
註釋:建構函式例項化遊戲的邏輯—被PuzzleGame類封裝—然後繫結其事件. The PuzzleGame類定義瞭如下事件:
GameStarted:當遊戲開始後這個事件就被觸發。這個事件的控制代碼展示了帶有圖片被移動次數統計的面板，隱藏瞭如何開始遊戲的說明並重置了已經移動拼圖片的次數統計。
GameOver: 當拼圖完成時這個事件就會發生。這個事件的控制代碼展示瞭如何運行遊戲的圖例說明，並更新了移動次數的統計。
PieceUpdated:無論何時當一個拼圖片被移動，這個事件就會被觸發。這個事件的控制代碼使評圖片動起來並更新了移動次數的統計。
最後，通過預訂一個事件控制代碼，建構函式呼叫InitBoard來初始化拼圖遊戲板。
7. 接著, 在 PuzzlePage類, 定義 InitBoard 方法來初始化遊戲板。
(程式碼段– YourFirstWP7App – 練習 2 任務 2 步驟 7 – InitBoard 方法)
C#
private voidInitBoard()
{
int totalPieces = this.game.ColsAndRows* this.game.ColsAndRows;
int pieceSize = ImageSize / this.game.ColsAndRows;
this.puzzlePieces = newCanvas[totalPieces];
int nx = 0;
for (int ix = 0; ix< this.game.ColsAndRows; ix++)
{
for (int iy = 0; iy< this.game.ColsAndRows; iy++)
{
nx = (ix *this.game.ColsAndRows) + iy;
Image image = new Image();
image.SetValue(FrameworkElement.NameProperty,"PuzzleImage_" + nx);
image.Height = ImageSize;
image.Width = ImageSize;
image.Stretch = Stretch.UniformToFill;
RectangleGeometry r = newRectangleGeometry();
r.Rect = new Rect((ix *pieceSize), (iy * pieceSize), pieceSize, pieceSize);
image.Clip= r;
image.SetValue(Canvas.TopProperty, Convert.ToDouble(iy * pieceSize * -1));
image.SetValue(Canvas.LeftProperty, Convert.ToDouble(ix * pieceSize * -1));
this.puzzlePieces[nx] = newCanvas();
this.puzzlePieces[nx].SetValue(FrameworkElement.NameProperty, "PuzzlePiece_" + nx);
this.puzzlePieces[nx].Width = pieceSize;
this.puzzlePieces[nx].Height = pieceSize;
this.puzzlePieces[nx].Children.Add(image);
this.puzzlePieces[nx].MouseLeftButtonDown += this.PuzzlePiece_MouseLeftButtonDown;
if (nx <totalPieces - 1)
{
this.GameContainer.Children.Add(this.puzzlePieces[nx]);
}
}
}
// Retrieve image
StreamResourceInfo imageResource = Application.GetResourceStream(new Uri("WindowsPhonePuzzle;component/Assets/Puzzle.jpg",UriKind.Relative));
this.ImageStream = imageResource.Stream;
this.game.Reset();
}
註釋: InitBoard方法建立了一個Canvas控制元件，該控制元件包含了拼圖的所有的拼圖片。每一片都是遊戲中整幅圖片的裁剪出的一部分。
這個方法從應用程式的資源中取得拼圖遊戲的圖片並利用結果流初始化ImageStream屬性。
8. 插入AnimatePiece方法到PuzzlePage類中。
(程式碼段 – YourFirstWP7App – 練習 2 任務 2 步驟 8 – AnimatePiece 方法)
C#
private voidAnimatePiece(DependencyObject piece, DependencyProperty dp, doublenewValue)
{
Storyboard storyBoard = newStoryboard();
Storyboard.SetTarget(storyBoard, piece);
Storyboard.SetTargetProperty(storyBoard, new PropertyPath(dp));
storyBoard.Children.Add(new DoubleAnimation
{
Duration= new Duration(TimeSpan.FromMilliseconds(200)),
From = Convert.ToInt32(piece.GetValue(dp)),
To = Convert.ToDouble(newValue),
EasingFunction = new SineEase()
});
storyBoard.Begin();
}
註釋: AnimatePiece是一個控制代碼方法用來實現使用者介面中拼圖碎片的動畫。它利用程式碼建立了一個動畫指令碼，並用該指令碼更新控制元件中的任何一個DependencyProperty屬性 。在這個應用程式中，此方法僅被用來更新拼圖碎片的Top 和Left屬性，並以此來控制碎片的位置。
9. 為MouseLeftButtonDown事件增加一個控制代碼。為了實現這個目的，插入以下高亮程式碼到PuzzlePage類中。
(程式碼段 – YourFirstWP7App – 練習 2 任務 2 步驟 9 –PuzzlePiece_MouseLeftButtonDown 事件控制代碼)
C#
private voidPuzzlePiece_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (!this.game.IsPlaying)
{
this.game.NewGame();
}
}
註釋:當點選拼圖板表面將會觸發該事件的控制代碼，除非當前遊戲還在執行，否則將會開啟一個新的遊戲。
10. 現在，為“Solve”按鈕新增Click事件的控制代碼。
(程式碼段– YourFirstWP7App – 練習2 任務 2 步驟 10 – SolveButton_Click 事件控制代碼)
C#
private voidSolveButton_Click(object sender, RoutedEventArgs e)
{
this.game.Reset();
this.game.CheckWinner();
}
註釋:按鈕的事件控制代碼會強制遊戲重置—顯示完成拼圖的原始圖片——然後呼叫PuzzleGame類中的PuzzleGame.CheckWinner 方法。這個方法驗證每張拼圖碎片是否處於正確的位置並會觸發GameOver事件，GameOver事件會使使用者介面顯示祝賀資訊。
11. 按F5 來構建並部署應用程式到WindowsPhone Emulator中，等待版權頁面出現並點選START鍵。
圖表 28
開始一個新遊戲
12. 在模擬器視窗，點選圖片來開始一個新的拼圖遊戲。 注意整張圖片被分裂成圖片碎片，這些碎片被隨機分佈在拼圖板中。此外，觀察圖片碎片不是迅速被打亂到各個位置，而是由於使用AnimatePiece方法中呼叫的動畫指令碼，使得碎片緩慢平滑的進入到各個位置。這個方法實現對每個拼圖碎片left和top座標的移動，從而實現觀察到的變化效果。
圖表 29
當遊戲開始後拼圖板上的拼圖碎片被隨機重新排列
13. 選中一張碎片並嘗試拖拽它。注意目前拖拽操作是無效的。在下一個任務中，您將會新增對multi-touch多點觸控的支援，並會允許您在拼圖板中拖拽碎片來重新排列它們。
14. 現在，點選SOLVE 按鈕，此時可以看到拼圖板上的碎片重新排列並顯示原始的完成圖片。
15. 在Visual Studio中，按下SHIFT + F5停止除錯程序。請不要關閉模擬器。
任務 3 –增加Multi-Touch支援
Multi-touch輸入允許使用者同時進行多指操作，這些操作被看成是一個單元來為應用程式和模擬提供複雜的操作命令，從而直接操控頁面上的元素，例如，同時平移和縮放。 In this task在這個任務中，您會更新Windows Phone Puzzle遊戲，使其能夠接收multi-touch的輸入並允許使用者在拼圖板上通過點選拼圖碎片然後拖拽到空槽中。
1. 在Solution Explorer中，在designer中通過右鍵點選PuzzlePage.xaml 選擇 View Code 來開啟該頁面的程式碼隱藏檔案。
2. 在PuzzlePage 類中了，在已經存在的成員變數下插入下面的宣告程式碼（高亮部分）。
(程式碼段 – YourFirstWP7App – 練習2 任務 3 步驟2 – Multi-Touch 成員變數)
C#
public partial class PuzzlePage :PhoneApplicationPage
{
private const doubleDoubleTapSpeed = 500;
private const int ImageSize =435;
private PuzzleGame game;
private Canvas[] puzzlePieces;
private Stream imageStream;
private long lastTapTicks;
private int movingPieceId = -1;
private int movingPieceDirection;
private double movingPieceStartingPosition;
publicPuzzlePage()
{
InitializeComponent();
...
}
3. 現在，右鍵單擊編輯視窗，選擇View Designer ( ) ，切換到Design檢視。
4. 在designer表面上點選圍繞模擬器的空白區域來選中PhoneApplicationPage元素並按下F4開啟Properties視窗。在Properties視窗，點選Events標籤來顯示所有可用事件。
註釋:請小心不要選擇designer上另一個使用者介面元素，否則將會顯示錯選元素的properties視窗。
圖表 30
在Microsoft Visual Studio 2010 Express中為Windows Phone 建立事件控制代碼
5. 為ManipulationStarted事件定義一個事件控制代碼。為實現這個目的，在事件列表裡雙擊相應的項訂製該事件。當您這樣操作時，Visual Studio會建立一個事件控制代碼並開啟其程式碼隱藏檔案中生成的方法體。把下面的程式碼（高亮部分）複製貼上到PhoneApplicationPage_ManipulationStarted方法體內。
(程式碼段 – YourFirstWP7App – 練習2 任務 3 步驟 5 –PhoneApplicationPage_ManipulationStarted 事件控制代碼)
C#
private voidPhoneApplicationPage_ManipulationStarted(objectsender, ManipulationStartedEventArgs e)
{
if (this.game.IsPlaying &&e.ManipulationContainer is Image && e.ManipulationContainer.GetValue(FrameworkElement.NameProperty).ToString().StartsWith("PuzzleImage_"))
{
int pieceIx= Convert.ToInt32(e.ManipulationContainer.GetValue(FrameworkElement.NamePropert