共用方式為


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

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

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

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

必要條件

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

建立您的 Windows Forms 專案

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

  1. 開啟 Visual Studio。

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

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

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

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    注意

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

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    然後,在 Visual Studio 安裝程式中選取 [.NET 桌面開發]

    Screenshot shows .NET Core workload in the Visual Studio Installer.

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

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

  1. 開啟 Visual Studio。

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

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

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

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    注意

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

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    然後,在 Visual Studio 安裝程式中選取 [.NET 桌面開發]

    Screenshot shows .NET Core workload in the Visual Studio Installer.

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

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

    Screenshot shows the Configure your new project dialog box.

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

此時,Visual Studio 會在 Windows Forms 設計工具中顯示空白表單。

新增配置元素

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

  1. 在您的專案中,選取 [Windows Forms 設計工具]。 索引標籤會顯示為 Form1.cs [Design] (C#) 或 Form1.vb [Design] (Visual Basic)。

  2. 選取 Form1 中的任一處。

  3. [屬性] 視窗此時會顯示表單的屬性。 [屬性] 視窗通常位於 Visual Studio 右下方。 此區段控制多種不同屬性,例如前景和背景色彩、表單頂端顯示的標題文字,以及表單的大小。

    若未看到 [屬性],請選取 [檢視]>[屬性視窗]

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

    您的表單此時在其標題列中會有圖片檢視器文字。

    注意

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

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

    Screenshot shows the Forms window with the Drag handle in the lower right.

    拖曳控點來調整表單大小,使表單變得較寬且稍微高一些。 查看 [屬性] 視窗時,您會看到 [大小] 屬性已變更。 您也可藉由變更 [大小] 屬性來變更表單的大小。

  6. 在 Visual Studio IDE 左側,選取 [工具箱] 索引標籤。若未看到,請從功能表列中選取 [檢視]>[工具箱],或按 Ctrl+Alt+X

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

    Screenshot shows the Containers group in the Toolbox tab.

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

    Screenshot show the form with the TableLayoutPanel control added.

    注意

    新增 TableLayoutPanel 之後,如果表單內出現標題為 [TableLayoutPanel 工作] 的視窗,請按一下表單內的任一處將其關閉。

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

    Screenshot shows the Properties window showing the TableLayoutPanel control.

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

    Screenshot shows the Properties window with Fill selected.

    停駐是指視窗連結至另一個視窗或區域的方式。

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

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

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

    Screenshot shows TableLayoutPanel tasks.

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

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

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

    Screenshot shows TableLayoutPanel column and row styles.

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

    TableLayoutPanel 此時會有大型的上方資料列、小型的下方資料列和大型的右側資料行。

    Screenshot shows the form with resized TableLayoutPanel.

您的配置已完成。

注意

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

執行您的應用程式

在建立 Windows Forms 應用程式專案時,您會建置執行的程式。 在此階段中,您的圖片檢視器應用程式不會有太多作為。 它會暫時顯示一個空白視窗,標題列顯示為圖片檢視器

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

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

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

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

    Screenshot shows the Windows Forms app running.

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

    Screenshot shows the Debugging toolbar where you can stop the app.

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

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

    從 Visual Studio IDE 內部執行應用程式時,我們稱之為偵錯。 您執行應用程式以尋找錯誤 (bug) 並加以修正。 您遵循相同程序執行和偵錯其他程式。 若要深入了解偵錯,請參閱偵錯工具簡介

下一步

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