教學課程:在 Visual Studio 中建立圖片檢視器Windows Forms應用程式

適用于:是Visual Studio否Visual Studio for Mac否Visual Studio Code

在這一系列三個教學課程中,您將建立Windows Forms應用程式來載入圖片並顯示圖片。 Visual Studio 整合式設計環境 (IDE) 提供建立應用程式所需的工具。 若要深入瞭解,請參閱 歡迎使用 Visual Studio IDE

在第一個教學課程中,您將瞭解如何:

  • 建立使用 Windows Forms 的 Visual Studio 專案
  • 新增版面配置元素
  • 執行您的應用程式

必要條件

您需要 Visual Studio 才能完成本教學課程。 如需免費版本,請流覽 Visual Studio 下載頁面

建立您的Windows Forms專案

當您建立圖片檢視器時,第一個步驟是建立Windows Forms應用程式專案。

  1. 開啟 Visual Studio。

  2. 在 [開始] 視窗中,選取 [建立新專案]。

    此螢幕擷取畫面顯示 Visual Studio 開始視窗中的 [建立新專案] 選項。

  3. 在 [建立新專案] 視窗中,搜尋Windows Forms。 然後從[專案類型]清單中選取 [桌面]。

  4. 選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本,然後選取 [下一步]。

    顯示 [建立新專案] 對話方塊的螢幕擷取畫面,其中已輸入Windows Forms和Windows Forms應用程式的選項。

    注意

    如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本,您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案嗎?] 訊息中,選取 [安裝更多工具和功能 ] 連結。

    此螢幕擷取畫面顯示 [建立新專案] 對話方塊中[找不到您要尋找的專案] 訊息中的 [安裝更多工具和功能] 連結。

    接下來,在 [Visual Studio 安裝程式] 中,選取[.NET 桌面開發]。

    此螢幕擷取畫面顯示Visual Studio 安裝程式中的 .NET Core 工作負載。

    在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來,選取 [繼續 ] 以安裝工作負載。

  5. 在 [ 設定新專案 ] 視窗中,將專案命名為 PictureViewer,然後選取 [ 建立]。

  1. 開啟 Visual Studio。

  2. 在 [開始] 視窗中,選取 [建立新專案]。

    此螢幕擷取畫面顯示 Visual Studio 開始視窗中的 [建立新專案] 選項。

  3. 在 [建立新專案] 視窗中,搜尋Windows Forms。 然後從[專案類型]清單中選取 [桌面]。

  4. 選取 C# 或 Visual Basic 的Windows Forms 應用程式 (.NET Framework) 範本,然後選取 [下一步]。

    顯示 [建立新專案] 對話方塊的螢幕擷取畫面,其中已輸入Windows Forms和Windows Forms應用程式的選項。

    注意

    如果您沒有看到Windows Forms應用程式 (.NET Framework) 範本,您可以從 [建立新專案] 視窗安裝它。 在 [找不到您要尋找的專案嗎?] 訊息中,選取 [安裝更多工具和功能 ] 連結。

    此螢幕擷取畫面顯示 [建立新專案] 對話方塊中[找不到您要尋找的專案] 訊息中的 [安裝更多工具和功能] 連結。

    接下來,在 [Visual Studio 安裝程式] 中,選取[.NET 桌面開發]。

    此螢幕擷取畫面顯示Visual Studio 安裝程式中的 .NET Core 工作負載。

    在Visual Studio 安裝程式中選取[修改]。 系統可能會提示您儲存您的工作。 接下來,選取 [繼續 ] 以安裝工作負載。

  5. 在 [ 設定新專案 ] 視窗中,將專案命名為 PictureViewer,然後選取 [ 建立]。

    顯示 [設定新專案] 對話方塊的螢幕擷取畫面。

Visual Studio 會為您的應用程式建立解決方案。 解決方案是應用程式所需所有專案和檔案的容器。

此時,Visual Studio 會在Windows Form Designer中顯示空白表單。

新增版面配置元素

您的圖片檢視應用程式包含圖片方塊、核取方塊和四個按鈕,您將在 下一個教學課程中新增。 layout 元素會控制其在表單上的位置。 本節說明如何變更表單的標題、調整表單大小,以及新增版面配置元素。

  1. 在您的專案中,選取Windows Forms Designer。 索引標籤會讀取 C# 的Form1.cs [Design]或 Visual Basic 的Form1.vb [Design]。

  2. 選取 Form1中的任何位置。

  3. [ 屬性] 視窗現在會顯示表單的屬性。 [ 屬性 ] 視窗通常位於 Visual Studio 右下角。 本節控制各種屬性,例如前景和背景色彩、出現在表單頂端的標題文字,以及表單的大小。

    如果您沒有看到[屬性],請選取 [檢視>屬性視窗]。

  4. 在 [屬性] 視窗中尋找Text屬性。 根據清單排序的方式,您可能需要向下捲動。 輸入 [ 圖片檢視器] 值,然後選擇 Enter

    您的表單現在在其標題列中有 文字圖片檢視器

    注意

    您可以依類別或依字母順序顯示內容。 使用 [ 屬性 ] 視窗上的按鈕來來回切換。

  5. 再次選取表單。 選取表單的右下拖曳控點。 控制碼是表單右下角的小型白色方形。

    顯示 [表單] 視窗的螢幕擷取畫面,其中具有右下角的 [拖曳控點]。

    拖曳控點來調整表單大小,使表單變得較寬且稍微高一些。 如果您查看 [ 屬性 ] 視窗, 則 Size 屬性已變更。 您也可以變更 Size 屬性來變更表單的大小。

  6. 在 Visual Studio IDE 的左側,選取 [工具箱] 索引標籤。如果您沒有看到它,請從功能表列或Ctrl+Alt+X中選取 [檢視>工具箱]。

  7. 選取 [容器 ] 旁的小三角形符號以開啟群組。

    此螢幕擷取畫面顯示 [工具箱] 索引標籤中的 [容器] 群組。

  8. 按兩下[工具箱] 中的[TableLayoutPanel]。 您也可以將控制項從工具箱拖曳到表單上。 TableLayoutPanel 控制項會出現在您的表單中。

    此螢幕擷取畫面顯示已新增 TableLayoutPanel 控制項的表單。

    注意

    新增 TableLayoutPanel 之後,如果表單內出現標題為 TableLayoutPanel 工作的視窗,請按一下表單內的任何位置以關閉它。

  9. 選取 TableLayoutPanel。 您可以藉由查看 [ 屬性 ] 視窗來確認選取的控制項。

    此螢幕擷取畫面顯示顯示 TableLayoutPanel 控制項屬性視窗。

  10. 選取 TableLayoutPanel 後,尋找 Dock 屬性,其值為 None。 選取下拉式箭號,然後選取 [填滿],這是下拉式功能表中間的大型按鈕。

    此螢幕擷取畫面顯示已選取 [填滿] 的屬性視窗。

    停駐 是指視窗如何附加至另一個視窗或區域。

    TableLayoutPanel 現在會填滿整個表單。 如果您再次調整表單的大小,TableLayoutPanel 會停駐不動,並調整大小來填滿表單。

  11. 在表單中,選取 TableLayoutPanel。 右上角有一個小黑色三角形按鈕。

    選取三角形以顯示控制項的工作清單。

    顯示 TableLayoutPanel 工作的螢幕擷取畫面。

  12. 選取 [編輯資料列和資料 行] 以顯示 [ 資料行和資料列樣式 ] 對話方塊。

  13. 選取 [Column1 ],並將其大小設定為 15%。 請確定已選取 [ 百分比] 按鈕。

  14. 選取 [Column2 ],並將其設定為 85%。

    顯示 TableLayoutPanel 資料行和資料列樣式的螢幕擷取畫面。

  15. 從 [資料行和資料列樣式] 對話方塊頂端的 [顯示],選取 [資料列]。 將 [資料列 1] 設定為 90%,並將 [資料列 2] 設定為 10%。 選取 [ 確定 ] 以儲存變更。

    您的 TableLayoutPanel 現在有大型頂端資料列、小型底端資料列、小型左欄,以及大型右欄。

    此螢幕擷取畫面顯示已調整大小 TableLayoutPanel 的表單。

您的版面配置已完成。

注意

在執行應用程式之前,請選擇 [ 全部儲存 ] 工具列按鈕來儲存您的應用程式。 或者,若要儲存您的應用程式,請從功能表列選擇 [檔案>全部儲存],或按Ctrl+Shift+S。 最好養成儘早並經常儲存的習慣。

執行您的應用程式

當您建立 Windows Forms App 專案時,您會建置執行的程式。 在這個階段,您的圖片檢視器應用程式不會執行太多動作。 現在,它會顯示空白視窗,以顯示標題列中的 圖片檢視器

若要執行應用程式,請遵循下列步驟。

  1. 請使用下列其中一個方法:

    • 選取 F5 鍵。
    • 在功能表列上,選取 [>偵錯開始偵錯]。
    • 在工具列上,選取 [ 開始] 按鈕。

    Visual Studio 會執行您的應用程式。 標題 為圖片檢視器 的視窗隨即出現。

    顯示執行中Windows Forms應用程式的螢幕擷取畫面。

    查看 Visual Studio IDE 工具列。 當您執行應用程式時,工具列上會出現更多按鈕。 這些按鈕可讓您執行停止和啟動應用程式等動作,並協助您追蹤任何錯誤。

    顯示 [偵錯] 工具列的螢幕擷取畫面,您可以在其中停止應用程式。

  2. 使用下列其中一種方法來停止您的應用程式:

    • 在工具列上,選取 [ 停止偵錯 ] 按鈕。
    • 在功能表列上,選取 [偵錯]>[停止偵錯]。
    • 從鍵盤輸入Shift+F5
    • 選取[圖片檢視器]視窗右上角的[X]。

    當您從 Visual Studio IDE 內執行應用程式時,稱為偵錯。 您可以執行應用程式來尋找並修正錯誤。 您遵循相同程序執行和偵錯其他程式。 若要深入瞭解偵錯,請參閱 第一次查看偵錯工具

下一步

前進到下一個教學課程,以瞭解如何將控制項新增至圖片檢視器程式。