HOW TO：建立 C# WPF 應用程式

更新：2007 年 11 月

本主題的目標，是要示範如何建立簡單的 Windows Presentation Foundation (WPF) 應用程式，以及熟悉 Visual C# Express 版整合式開發環境 (IDE)。就像 Windows Form 應用程式，WPF 應用程式也可以從 [工具箱] 將控制項拖曳至設計介面以進行設計。在 WPF 專案的 IDE 中，除了設計工具、[屬性] 視窗和 [工具箱] 以外，還有包含了 XAML 的視窗。XAML 是 Extensible Application Markup Language (可延伸應用程式標記語言) 的縮寫，其用途是建立使用者介面。下圖顯示 XAML 編輯器的位置。

XAML 編輯器

這個範例示範如何建立自己的筆墨 (Ink) 應用程式，讓您能夠繪製圖片。

在本章節中，您將學習如何：

• 建立 WPF 應用程式。

• 在 [程式碼] 檢視和 [設計工具] 檢視之間切換。

• 變更 WPF 視窗的屬性。

• 使用 XAML 編輯器。

• 加入 System.Windows.Controls.InkCanvas 控制項。

• 加入 System.Windows.Controls.Button 控制項。

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

如需觀看示範影片，請參閱影片 HOW TO：建立 C# WPF 應用程式 (英文)。

若要建立 WPF 應用程式

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

   [新增專案] 對話方塊便會出現。這個對話方塊會列出 Visual C# Express 版可建立的不同預設應用程式類型。

2. 按一下 [WPF 應用程式]。

3. 將應用程式的名稱變更為 Ink Pad。

4. 按一下 [確定]。

   Visual C# Express 版會為您的專案建立新資料夾，並依專案標題予以命名，然後在 [設計工具] 檢視中顯示標題為 Window1 的新 WPF 視窗。您可以隨時以滑鼠右鍵按一下設計工具介面或程式碼視窗，然後選取 [檢視程式碼]，即可變更至 [程式碼] 檢視。根據預設，XAML 編輯器會在設計工具底下顯示，但只要以滑鼠右鍵按一下設計工具介面，再按一下 [檢視 XAML]，就能以全螢幕模式查看 XAML 標記。

   您在 [設計工具] 檢視中看到的 WPF 視窗，就是將會在啟動應用程式時所開啟之視窗的視覺表示。在 [設計工具] 檢視中，您可以將各種控制項從 [工具箱] 拖放至 WPF 視窗。將控制項拖放至 WPF 視窗之後，Visual C# 便會自動建立程式碼，使得控制項能在程式執行時放到適當位置。

5. 如果沒看到 [屬性] 視窗，請按一下 [檢視] 功能表中的 [屬性視窗]。這個視窗會列出目前所選取之 WPF 視窗或控制項的屬性，而且您可以在此變更現有的值。

6. 在 [屬性] 視窗中，將 [Height] 屬性設定為 550，並將 [Width] 屬性設定為 370，以變更 WPF 視窗的大小。

7. 將 WPF 視窗的標題變更為 Ink Pad。

8. 按一下下拉式清單方塊中的 [Brown]，然後按 Enter 鍵，將 WPF 視窗的 [Background] 屬性變更為褐色。

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

9. 若要開啟 [工具箱]，請按一下 [檢視] 功能表，然後按一下 [工具箱]。

10. 以滑鼠右鍵按一下 [工具箱]，然後按一下 [選擇項目]。

    [選擇工具箱項目] 對話方塊隨即開啟。

11. 在 [選擇工具箱項目] 對話方塊的 [WPF 元件] 索引標籤中，向下捲動至 [InkCanvas]，選取此選項後，核取方塊中會出現勾選記號。

12. 按一下 [確定]，將 [InkCanvas] 控制項加入至 [工具箱]。

13. 將 [InkCanvas] 控制項從 [工具箱] 拖曳至 WPF 視窗。

14. 在 [屬性] 視窗中，為 [InkCanvas] 控制項設定下列屬性：

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

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

    InkCanvas 控制項的背景色彩在執行階段將會呈現為淺黃色。

16. 將兩個 [Button] 控制項拖曳至 WPF 視窗內的 [InkCanvas] 下方。把 button1 放置在左方，把 button2 放置在右方。

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

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

18. 選取 button2，並如下列標記所示，變更 XAML 標記。這個標記會將文字設定為 Close。

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
        Name="button2" VerticalAlignment="Bottom" Width="75"
        Click="ButtonCloseClicked">Close</Button>
    

    WPF 應用程式應該會類似於下圖中的 Ink Pad 應用程式。

    WPF Ink 應用程式

    

若要建立事件處理常式

1. 按兩下 [清除]，並將下列程式碼加入至產生的 Click 事件處理常式：

       this.inkCanvas1.Strokes.Clear(); 
   

2. 以滑鼠右鍵按一下 [程式碼編輯器]，然後按一下 [設計工具]，返回 [設計工具] 檢視。

3. 按兩下 [關閉]，然後將下列程式碼加入至產生的 Click 事件處理常式。

       this.Close();
   

4. 請按 F5 執行專案。

5. 當應用程式開啟時，在 [InkCanvas] 控制項中繪製圖片。如果發生錯誤，請按一下 [清除] 重新開始。

6. 按一下 [關閉] 關閉應用程式。

請參閱

工作

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

HOW TO：建立 C# 主控台應用程式

HOW TO：建立 C# Windows Form 應用程式

其他資源

建立您的第一個 Visual C# 應用程式