VS2010 教程：創建一個 WPF 應用程序 (第一節)

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

[原文發表地址]?VS2010 Tutorial: Build a WPF App (Step 1)

[原文發表時間] 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窗口。”）：