使用 WPF 建立繪圖應用程式

發行項
08/21/2008

更新：2007 年 11 月

在本課程中，您將學習如何建立可讓您繪圖的 Windows Presentation Foundation (WPF) 應用程式。建立 WPF 應用程式就像建立 Windows Form 應用程式一樣。要從 [工具箱] 中將控制項拖曳至設計介面，然後撰寫程式碼以處理控制項的事件。

視訊的連結如需觀看示範影片，請參閱影片 HOW TO：使用 WPF 建立繪圖應用程式。

試試看！

若要建立 WPF 應用程式

在 [檔案] 功能表上，按一下 [新增專案]。

[新增專案] 對話方塊便會出現。這個對話方塊會列出預設可使用 Visual Basic Express 版建立的應用程式類型。
選取 [WPF 應用程式] 做為專案類型。
將應用程式的名稱變更為 Ink Pad，然後按一下 [確定]。

Visual Basic Express 版會為您的專案建立一個新的資料夾。資料夾的名稱和專案的標題相同。Visual Basic Express 版也會以 [設計] 檢視顯示您的新 WPF 視窗，標題為 Window1。只要以滑鼠右鍵按一下設計介面再按一下 [檢視程式碼]，您隨時都可以到 [程式碼編輯器]。根據預設，XAML 編輯器會在設計工具底下顯示，但只要以滑鼠右鍵按一下設計工具介面，再按一下 [檢視 XAML]，就能以全螢幕模式查看 XAML 檢視。

若要設計使用者介面

如果看不到 [屬性] 視窗，請按一下 [檢視] 功能表上的 [屬性視窗]。這個視窗會列出目前選取的表單或控制項的屬性。您可以在這個視窗中變更現有屬性值。
在 [屬性] 視窗中，將 [Height] 屬性設定為 550，並將 [Width] 屬性設定為 370，以變更 WPF 視窗的大小。
將 WPF 視窗的標題屬性變更為 Ink Pad。
按一下下拉式清單方塊中的 [Brown]，然後按 ENTER，將 WPF 視窗的 [Background] 屬性變更為褐色。

注意事項：

或者，您可以加入 [Background] 屬性 (Attribute)，並將其值設定為 BrownBackground="Brown"，以直接修改 XAML 標記。
若要開啟 [工具箱]，請按一下 [檢視] 功能表上的 [工具箱]。
以滑鼠右鍵按一下 [工具箱]，然後按一下 [選擇項目]。

[選擇工具箱項目] 對話方塊隨即開啟。
在 [選擇工具箱項目] 對話方塊的 [WPF 元件] 索引標籤中，向下捲動至 [InkCanvas]，選取此選項後，核取方塊中會出現勾選記號。
按一下 [確定]，將 [InkCanvas] 控制項加入至 [工具箱]。
從 [工具箱] 將 [InkCanvas] 控制項拖曳至設計介面。
在 [屬性] 視窗中，為 InkCanvas 控制項設定下列屬性：

屬性

值

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
將 [InkCanvas] 控制項的 [Background] 屬性設定為 [LightYellow]，將色彩變更為黃色。

InkCanvas 控制項的背景色彩在執行階段將會呈現為淺黃色。
將兩個 [Button] 控制項拖曳至 WPF 視窗，然後放置在 InkCanvas 控制項下。將 button1 放置在左邊，button2 放在右邊。

注意事項：
或者，您可以加入 [Background] 屬性 (Attribute)，並將其值設定為 BrownBackground="Brown"，以直接修改 XAML 標記。

屬性	值
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

選取 button1，並如下列標記所示，變更 XAML 檢視中的 XAML 標記。這個標記會將 [Text] 屬性設定為 Clear。

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>

選取 button2，並如下列標記所示，變更 XAML 標記。這個標記會將 [Text] 屬性設定為 Close。
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
WPF 應用程式應該會類似於下圖中的 Ink Pad 應用程式。

WPF Ink Pad 應用程式

若要將程式碼加入至按鈕的事件處理常式

按兩下 [清除]，並將下列程式碼加入產生的 Click 事件處理常式：
```
    Me.InkCanvas1.Strokes.Clear() 
```
以滑鼠右鍵按一下 [程式碼編輯器] 並按一下 [設計工具]，即可返回 [設計] 檢視。
按兩下 [關閉]，然後將下列程式碼加入產生的 Click 事件處理常式：
```
    Me.Close()
```
請按 F5 執行專案。
當應用程式啟動時，在 [InkCanvas] 控制項中繪製圖片。如果發生錯誤，請按一下 [清除] 重新開始。
按一下 [關閉] 結束應用程式。

後續步驟

在本課程中，您學會如何使用 WPF 建立繪圖應用程式。

在下一節中，您將學習如何使用 Visual Basic 工具以尋找和修正錯誤 (一般稱為「Bug」)。

下一個課程：何處發生錯誤？透過偵錯尋找和修正錯誤

請參閱

工作

HOW TO：建立新的 WPF 應用程式專案

HOW TO：加入新項目至 WPF 專案

設計 WPF 應用程式的使用者介面 (Visual Basic)

使用一般 WPF 控制項

建立 WPF 控制項的事件處理常式

其他資源

建立程式的視覺外觀：Windows Presentation Foundation 簡介