步驟 9:檢閱、註解和測試您的程式碼Step 9: Review, comment, and test your code

您接下來要將註解加入至程式碼。You next add a comment to your code. 注釋是一個注釋,不會更改應用的顯示方式。A comment is a note that doesn't change the way the app behaves. 它可讓讀取程式碼的人容易了解您的程式碼有何用途。It makes it easier for someone who is reading your code to understand what it does. 將註解加入至您的程式碼是個好習慣。Adding comments to your code is a good habit to get into.

在 C# 中,兩個正向斜杠 (//) 將行標記為注釋。In C#, two forward slashes (//) mark a line as a comment. 在 Visual Basic 中,使用單引號 (') 將一行標示成註解。In Visual Basic, a single quotation mark (') is used to mark a line as a comment. 添加注釋後,將測試應用程式。After you add a comment, you test your application. 較好的做法是,經常在您處理專案時執行和測試程式碼,以便在程式碼變得更複雜之前早期攔截並修正所有問題。It's good practice to run and test your code frequently while you're working on your projects, so you can catch and fix any problems early, before the code gets more complicated. 這稱為「反覆測試」**。This is called iterative testing.

您剛才已建置一些有作用的功能,雖然尚未完成,但已能夠載入圖片。You just built something that works, and although it's not done yet, it can already load a picture. 在將註解加入至程式碼並測試之前,請花一點時間檢閱程式碼概念,因為您會經常用到這些概念:Before you add a comment to your code and test it, take time to review the code concepts, because you will use these concepts frequently:

  • 當您在 Windows Forms 設計工具中按兩下 [顯示圖片]**** 按鈕時,IDE 會自動將方法新增至程式的程式碼。When you double-clicked the Show a picture button in Windows Forms Designer, the IDE automatically added a method to your program's code.

  • 方法是用來組織程式碼的方式,也就是將程式碼組合在一起的方式。Methods are how you organize your code: It's how your code is grouped together.

  • 大多數時候,方法按特定循序執行少量操作,例如showButton_Click()(或ShowButton_Click()) 方法如何顯示對話方塊,然後載入圖片。Most of the time, a method does a small number of things in a specific order, like how your showButton_Click() (or ShowButton_Click()) method shows a dialog box and then loads a picture.

  • 方法是由程式碼「陳述式」** 或程式碼行所構成。A method is made up of code statements, or lines of code. 可將方法視為將程式碼陳述式配套起來的機制。Think of a method as a way to bundle code statements together.

  • 執行 (或「呼叫」**) 方法時,會從第一個陳述式開始依序逐一執行方法中的陳述式。When a method is executed, or called, the statements in the method are executed in order, one after another, starting with the first one.

    下列是陳述式的範例。The following is an example of a statement.

    PictureBox1.Load(openFileDialog1.FileName);
    
    pictureBox1.Load(openFileDialog1.FileName)
    

    陳述式就是讓程式執行動作的機制。Statements are what make your programs do things. 在 C# 中,語句始終以分號結尾。In C#, a statement always ends in a semicolon. 在 Visual Basic 中,行尾就代表陳述式結尾 In Visual Basic, the end of a line is the end of a statement. (視覺基本版中不需要分號。前面的語句告訴控制項PictureBox載入使用者使用OpenFileDialog元件選擇的檔。(No semicolon is needed in Visual Basic.) The preceding statement tells your PictureBox control to load the file that the user selected with the OpenFileDialog component.

加入註解To add comments

  1. 將下列註解加入至程式碼。Add the following comment to your code.

    重要

    使用此頁面右上角的程式設計語言控制項查看 C# 程式碼片段或 Visual Basic 程式碼片段。Use the programming language control at the top right of this page to view either the C# code snippet or the Visual Basic code snippet.

    程式設計語言控制Docs.Microsoft.comProgramming language control for Docs.Microsoft.com

    private void showButton_Click(object sender, EventArgs e)
    {
        // Show the Open File dialog. If the user clicks OK, load the
        // picture that the user chose.
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);
        }
    }
    
    Private Sub showButton_Click() Handles showButton.Click
    
        ' Show the Open File dialog. If the user clicks OK, load the
        ' picture that the user chose.
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

    showButton 按鈕的 Click 事件處理常式現在已完成,可以運作。Your showButton button's Click event handler is now finished, and it works. 您已從 if 陳述式開始撰寫程式碼。You have started writing code, starting with an if statement. 語句if是告訴應用"檢查這一件事,如果這是真的,請執行這些操作。An if statement is how you tell your app, "Check this one thing, and if it's true, do these actions." 在這種情況下,您告訴你的應用打開 "打開檔" 對話方塊,如果使用者選擇檔並選擇 "確定"按鈕,請在圖片盒中載入該檔。In this case, you tell your app to open the Open File dialog box, and if the user selects a file and chooses the OK button, load that file in the PictureBox.

    提示

    建置 IDE 可讓您輕鬆撰寫程式碼,而「程式碼片段」** 就是它基於此目的而提供的一種方式。The IDE is built to make it easy for you to write code, and code snippets are one way it does that. 程式碼片段是捷徑,可展開成一小段程式碼區塊。A snippet is a shortcut that gets expanded into a small block of code.

    您可以看到所有可用的程式碼片段。You can see all of the snippets available. 在功能表列上,選擇工具 > 代碼程式碼片段管理器On the menu bar, choose Tools > Code Snippets Manager. 對於 C#,if程式碼片段位於Visual C# 中。For C#, the if snippet is in Visual C# . 對於if視覺化基本,程式碼片段位於代碼模式 > 條件和迴圈中For Visual Basic, the if snippets are in Code Patterns > Conditionals and Loops. 您可以使用此管理員來瀏覽現有的程式碼片段或加入您自己的程式碼片段。You can use this manager to browse existing snippets or add your own snippets.

    若要在輸入程式碼時啟動程式碼片段,請輸入程式碼並選擇 Tab 鍵。To activate a snippet when typing code, type it and choose the Tab key. 許多程式碼片段會出現在 [IntelliSense]**** 視窗中,這就是為何選擇兩次 Tab 鍵的原因:第一次是從 [IntelliSense]**** 視窗中選取程式碼片段,第二次是指示 IDE 使用該程式碼片段。Many snippets appear in the IntelliSense window, which is why you choose the Tab key twice: first to select the snippet from the IntelliSense window, and then to tell the IDE to use the snippet. (IntelliSense 支援 if 程式碼片段,但不支援 ifelse 程式碼片段)。(IntelliSense supports the if snippet, but not the ifelse snippet.)

  2. 在運行應用程式之前,請選擇"全部保存" 工具列按鈕來保存應用,該按鈕應類似于以下螢幕截圖。Before you run your application, save your app by choosing the Save All toolbar button, which should look similar to the following screenshot.

    [全部儲存] 工具列按鈕Save All toolbar button
    **保存所有****按鈕Save All button

    或者,要保存你的應用,請從功能表列中選擇 "全部檔 > 保存"(或按Ctrl+Shift+S)。Alternatively, to save your app, choose File > Save All from the menu bar (or press Ctrl+Shift+S). 最好養成儘早並經常儲存的習慣。It's a best practice to save early and often.

    運行時,程式應類似于下圖。When it's running, your program should look like the following image.

    圖片檢視器Picture Viewer
    圖片檢視器Picture Viewer

測試應用To test your app

  1. 選擇F5鍵或選擇 "開始調試"工具列按鈕。Choose the F5 key or choose the Start Debugging toolbar button.

  2. 選擇 [顯示圖片]**** 按鈕,執行您剛撰寫的程式碼。Choose the Show a picture button to run the code you just wrote. 首先,應用將打開 "打開檔" 對話方塊。First, the app opens an Open File dialog box. 確認篩選出現在對話方塊底部的 [檔案類型]**** 下拉式清單中。Verify that your filters appear in the Files of type drop-down list at the bottom of the dialog box. 然後,瀏覽至圖片並開啟它。Then navigate to a picture and open it. 在 [我的文件]** 資料夾的 [我的圖片\範例圖片]** 資料夾內,您通常可以找到 Windows 作業系統隨附的範例圖片。You can usually find sample pictures that ship with the Windows operating system in your My Documents folder, inside the My Pictures\Sample Pictures folder.

    提示

    如果未在 [選取圖片檔案]**** 對話方塊中看見任何影像,請確定已選取對話方塊右下方的下拉式清單中的 [所有檔案 (*.*)]**** 篩選條件。If you don't see any images in the Select a picture file dialog box, be sure that the All files (*.*) filter is selected in the drop-down list on the lower right side of the dialog box.

  3. 載入圖片,而它會出現在 PictureBox 中。Load a picture, and it appears in your PictureBox. 然後藉由拖曳框線,嘗試調整表單大小。Then try resizing your form by dragging its borders. 因為您將 PictureBox 停駐在 TableLayoutPanel 內,而此面板本身又停駐在表單內,所以圖片區域會自行調整大小,成為與表單一樣寬,並填滿表單上方 90% 的空間。Because you have your PictureBox docked inside a TableLayoutPanel, which itself is docked inside the form, your picture area will resize itself so that it's as wide as the form, and fills the top 90 percent of the form. 這就是為何使用 TableLayoutPanelFlowLayoutPanel 容器的原因:當使用者調整表單的大小時,這些容器可讓表單保持正確大小。That's why you used the TableLayoutPanel and FlowLayoutPanel containers: They keep your form sized correctly when the user resizes it.

    就在此時,更大的圖片超過圖片檢視器的範圍框線。Right now, larger pictures go beyond the borders of your picture viewer. 在下一個步驟中,您會加入程式碼,將圖片調整為符合視窗大小。In the next step, you'll add code to make pictures fit in the window.

若要繼續或檢視To continue or review

另請參閱See also