匯出 (0) 列印
全部展開

使用 WPF 建立繪圖應用程式

Visual Studio 2008

更新:2007 年 11 月

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

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

若要建立 WPF 應用程式

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

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

  2. 選取 [WPF 應用程式] 做為專案類型。

  3. 將應用程式的名稱變更為 Ink Pad,然後按一下 [確定]。

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

若要設計使用者介面

  1. 如果看不到 [屬性] 視窗,請按一下 [檢視] 功能表上的 [屬性視窗]。這個視窗會列出目前選取的表單或控制項的屬性。您可以在這個視窗中變更現有屬性值。

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

  3. 將 WPF 視窗的標題屬性變更為 Ink Pad

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

    注意事項:

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

  5. 若要開啟 [工具箱],請按一下 [檢視] 功能表上的 [工具箱]。

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

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

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

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

  9. 從 [工具箱] 將 [InkCanvas] 控制項拖曳至設計介面。

  10. 在 [屬性] 視窗中,為 InkCanvas 控制項設定下列屬性:

    屬性

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margins

    9, 9, 9, 68

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

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

  12. 將兩個 [Button] 控制項拖曳至 WPF 視窗,然後放置在 InkCanvas 控制項下。將 button1 放置在左邊,button2 放在右邊。

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

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
        Name="Button1" VerticalAlignment="Bottom" 
        Width="75">Clear</Button>
    
  14. 選取 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 應用程式

    WPF Ink 應用程式

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

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

        Me.InkCanvas1.Strokes.Clear() 
    
  2. 以滑鼠右鍵按一下 [程式碼編輯器] 並按一下 [設計工具],即可返回 [設計] 檢視。

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

        Me.Close()
    
  4. 請按 F5 執行專案。

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

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

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

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

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

社群新增項目

新增
顯示:
© 2014 Microsoft