來自：https://msdn.microsoft.com/zh-cn/library/ff629048.aspx

[原文發表時間] Friday, May 22, 2009 8:00 AM

這篇文章裡，我將使用VS2010 Beta 1建立一個WPF 應用程式。並且 我將展示這個產品裡的一些新的特性。我寫的這個Demo使用的是Winodows7 RC的Beta1這個版本。這個程式同時也能適用於其他的作業系統。

如果你還沒有下載這個軟體。請訪問 Brian Keller 第九頻道，在那裡你會找到詳細的步驟教你如何來作。Brian描述了怎樣去安裝完整的產品，包括 TFS。TFS 在這個章節裡不是重點，它將出現在稍後的第二節裡面。

首先我們將從VS2010開始講起，點選工具欄裡的檔案選項，建立新工程。我這裡選擇 “WPF 應用程式”，並且給它起名為 PicViewer (這是在新VS Beta 1版本上的對話方塊)：

這樣就為我們生成了一個預設的工程模板，裡面包括一個表格窗體，還有預設生成的C#程式碼：

一開始，我將拖動視窗把它變大，可以直接在這個設計器裡拖拽實際的窗體，或者使用編輯器來設定XAML檔案裡的width這個屬性。這裡暫且讓它的寬度設為700：

在這個應用程式裡，我們想通過操作按鈕控制元件來顯示一個圖片列表中上一個和下一個圖片。並且顯示這個圖片的完整路徑，所以這裡還需要一個標籤控制元件。第一步是新增一行到這個表格中，只需單擊藍色邊框，滑鼠點選下圖中紅色區域裡的箭頭處：

當我建立這行的時候，它也同時調整了這頁的XAML檔案，就像下面這樣：

我們調整這個第一行的高度到“35” 來替代先前的“29*” 。這裡的尺寸並非絕對，也可以以你的感覺來自由修改。

我們想讓WPF為按鈕和標籤佈局。因此需要建立一個<StackPanel> 邦定Grid.Row=“0”。這個 StackPanel 預設子項的排列方向是垂直的，因此我們改變它的方向為“Horizontal”（水平）。你可以通過使用XMAL編輯器修改其屬性來實現。最後你應該核對一下是否如下面這個效果：

讓我們從工具箱裡拖拽一個按鈕到這行上面：

我想要一個瀏覽上一副圖片的按鈕，我首先要編輯這個屬性窗口裡的設定：

修改這個Name欄位為“buttonPrev”， 然後修改這個Content 設定為“Prev”。重複這個步驟 拖拽另一個按鈕到這個Prev 按鈕的右邊，然後編輯其Name屬性為“buttonNext” 還有 Content屬性為 “Next”。你可以看到像下面這樣：

這僅僅是實現了功能上面的需求，但是看上去外觀卻不敢恭維。我們可以新增一些空白圍繞在這兩個按鈕周圍。可以通過設定這個margin屬性來實現，這個屬性的作用是，用來控制有多少空格將出現在這個控制元件項的四周。選擇這個Prev 按鈕，我們就可以設定這個屬性了：

這裡我們給這個按鈕的Margin屬性賦值為5 代表四周的間距都是5 (你也可以單獨地給上|下|左|右設定各自的值)。為Next 按鈕做同樣的操作。這時候，你可以看到這個效果：

最後，拖一個標籤到Next 按鈕的右邊並且修改這個標籤的名稱為 “labelPath” ，然後給它的寬度設定為 “400”。當修改完成後，你的 XAML 應該呈現為下面這個樣子 (如果這個文字不正確，你也可以編輯它。)：

為了顯示我們的圖片，我們需要在底部新增一個圖片控制元件。從工具箱中拖一個圖片控制元件。你可以看到如下圖這樣：

這種情況下，擁有智慧標籤這個特性的Forms視窗就顯得很便於操作了。但是這個功能目前只在我們的功能列表中，還沒有整合到WPF 設計器中。因此，我將編輯這個XAML檔案，除了Grid.Row，Margin和Name的屬性設定外，刪除所有設計器為圖片控制元件自動新增的其他屬性設定。你的設定看上去應該像下面這樣。現在這個圖片控制元件已經部署到表格的底端，而且與表格邊界有適當的間隙：

現在應用程式的外觀已經完成，我們需要新增一些程式碼來讓它工作。雙擊Window的標題欄可以建立一個load事件的處理方法。

接著雙擊Prev和Next按鈕，可以得到以下程式碼行：

對於這個圖片預覽器，我準備從我的Windows 7 使用者目錄下得到jpg檔案列表，並展示它們。我習慣於在Window1.xaml.cs先寫預覽程式碼，這樣便於我理解。接著寫它的邏輯實現。起先，我宣告一個還不存在的類的例項。

因為這個類還不存在，所以在這個型別下會有紅色曲線。我們接下來建立這個類。

下一步是在這個檔案裡完成所有預覽的程式碼。我們會從Window_Load()方法開始。注意到儘管這個類還沒有被定義，但在類關鍵字之後智慧感知（IntelliSense）會包含這個型別，所以你可以使用它。

我們希望在啟動應用程式的時候，能初始化這個列表並展示第一幅圖片。程式碼如下：

因為一些方法還不存在，所以會有錯誤提示，這裡先不處理它們。接著換到Prev按鈕的處理方法。當我呼叫DisplayPicture 方法時，由於它並不存在，你會注意到智慧感知（IntelliSense）視窗中沒有這個方法。

如果你按<Ctrl>+<Alt>+空格鍵，你能將模式轉變成“consume first”模式。這種模式下編輯器能在我鍵入方法名時提供這些名字。現在當我開始鍵入時，那個新的（還未宣告的）方法也能在列表中出現，但是智慧感知（IntelliSense）不會按照完成列表中的項來自動補全（譯者注：“在譯者的Visual Studio Team Suite2010版本上沒有找到 “consume first”功能。”）：

完成後我的程式碼如下：

我對這個預覽的基本邏輯很滿意。現在我需要真正的建立這個功能類來找到我的圖片。我們將游標放到PictureList類宣告上並按<Ctrl>+句點鍵（<Ctrl>+.）來展開智慧標籤。你會得到下面的彈出項：

選擇第一個選單項“為‘PictureList’生成類”。這樣一個新檔案PictureList.cs會被增加到專案中並且PictureList類會被生成在該檔案中。現在類已經被定義了，所以錯誤提示消失了：

接下來你會發現你呼叫的類的方法都會被顯示為語法錯誤。把游標放在Init()方法上並按<Ctrl>+.，可以得到如下結果：

選取該選單項可以生成這個方法的程式碼。對Peek()，Prev()和Next()方法重複上述步驟。如果我們此時開啟Picture.cs檔案，你會發現如下程式碼已經被生成：

注意到由於我們所寫的如PicList.Peek()這樣的方法需要一個字串的返回值，編輯器已經自動將這個方法的返回型別定位成字串型別。

現在我將新增一個獲得Windows安裝中自帶圖片列表的邏輯以便我能遍歷它們：

最後一步是在Windows1.xaml.cs中寫DisplayPicture方法。只需要再次選擇方法名並按<Ctrl>+.，然後填入以下程式碼就可以完成該步驟：

這段程式碼會獲取jpg檔案並將它轉化為BitmapImage型別以便顯示。下一行程式碼將我們的XAML影象控制元件的Source設定到這個點陣圖上，這樣它就能被顯示到螢幕上。

現在這個程式已經完成。我將斷點設定在Peek()和DisplayPicture方法上。通過將游標移動到這些方法並按F9鍵就能完成（注意到在空白處的紅色斷點）：

現在讓我們按F5鍵來執行這個程式。我們在Peek()方法處遇到了第一個斷點：

你會發現在我們停下的地方的斷點被標記為黃色。此外你會在右下方發現傳統的堆疊呼叫視窗。因為我使用的是Visual Studio Team System，預設情況下，我會有除錯歷史檢視（譯者注：“在譯者的Visual Studio Team Suite2010版本上無此Debug History視窗。”）：

預設設定已經捕獲到關於目前我的程式執行情況的相關資訊，包括程式所做的所有（由我或由系統引起的）登錄檔訪問和系統事件（例如斷點，異常等等）。

如果我把游標放到編輯器中的PicList變數上，我可以得到彈出的觀察視窗。假如我把游標移動到末尾的小方塊上並點選的話：

你能在編輯器中得到一個粘附資料提示視窗（箭頭僅用來演示結果，在編輯器中並不存在）：

這是一個使用新的WPF編輯器的簡單例子。粘附資料提示視窗是WPF對偵錯程式中文字緩衝區的裝飾。通過展開陣列內容等等，你可以像使用一般的觀察視窗那樣使用它。

讓我們按F5鍵繼續這個程式。我的應用程式包括Prev和Next按鈕現在都能工作了：

唯一的問題是檔案的名稱沒有被更新。再次點選Next按鈕到DisplayPicture()方法的斷點上。在這個方法中沒有更新標籤的程式碼：

我們增加一行新的程式碼來修復這個問題：

由於有編輯並繼續的特性，你在應用程式執行時可以做新的程式碼修改。更新程式碼如下：

現在按F5鍵讓程式繼續，可以看到路徑被更新了：

我還想要做一些完善和收尾工作。讓我們通過增加Stretch=“Fill”來伸展圖片到適合窗體：

接下來我們新增一個長方形作為圖片的邊框：

然後你可以選擇長方形並設定填充屬性來設定顏色。這會呼叫新的內建調色盤：

我選擇藍/黑色，可以得到如下效果：

最終的XAML完成如下：

這段示例，尚有很多方法可以去改進它，諸如使用資料邦定控制元件來列舉 ，給所有的屬性新增異常處理的邏輯等等。但是我此篇主旨在於展示編輯器和設計器的一些新特性，所以我點到即止，將這些作為練習留給大家。

暢享!