步驟 8:為顯示圖片按鈕事件處理常式撰寫程式碼Step 8: Write code for the show a picture button event handler

在此步驟中,使 "顯示圖片"按鈕的工作方式如下:In this step, you make the Show a picture button work as follows:

  • 當使用者選擇該按鈕時,應用將打開一個OpenFileDialog框。When a user chooses that button, the app opens an OpenFileDialog box.

  • 如果使用者打開圖片檔,則應用將在 中顯示該PictureBox圖片。If a user opens a picture file, the app shows that picture in the PictureBox.

IDE 提供一個功能強大的工具,稱為 IntelliSense,可幫助您撰寫程式碼。The IDE has a powerful tool called IntelliSense that helps you write code. 鍵入代碼時,IDE 將打開一個框,其中建議完成您輸入的部分單詞。As you type code, the IDE opens a box with suggested completions for partial words that you enter.

IntelliSense 嘗試確定您接下來要執行哪些操作,並自動跳轉到從清單中選擇的最後一個專案。IntelliSense tries to determine what you want to do next, and automatically jumps to the last item you choose from the list. 您可以利用向上或向下箭號在清單中移動,也可以繼續輸入字母來縮小選項範圍。You can use the up or down arrows to move in the list, or you can keep typing letters to narrow the choices. 當您看到想要的選項時,選擇 Tab 鍵加以選取。When you see the choice you want, choose the Tab key to select it. 或者,如果不需要的話,您也可以忽略建議。Or, you can ignore the suggestions, if not needed.

為顯示圖片按鈕事件處理常式撰寫程式碼To write code for the show a picture button event handler

  1. 移至 Windows Forms 設計工具,然後按兩下 [顯示圖片]**** 按鈕。Go to Windows Forms Designer and double-click the Show a picture button. IDE 立即轉到代碼設計器並移動游標,使其位於之前添加的showButton_Click()(或者)ShowButton_Click()方法內。The IDE immediately goes to the code designer and moves your cursor so it's inside the showButton_Click() (alternatively, ShowButton_Click()) method that you added previously.

  2. 在兩個大括弧 { } 之間的空白行上鍵入 iType an i on the empty line between the two braces { }. (在視覺化基本中,在Private Sub...End Sub之間的空行上鍵入 。將打開 "IntelliSense" 視窗,如下圖所示。(In Visual Basic, type on the empty line between Private Sub... and End Sub.) An IntelliSense window opens, as shown in the following image.

    包含 Visual C# 程式碼的 IntelliSense

    注意

    您的代碼可能不會以"camelCase"字母顯示事件處理常式。Your code might not display event handlers in "camelCase" letters.

  3. "IntelliSense" 視窗應突出顯示該if單詞。The IntelliSense window should highlight the word if. (如果沒有,請輸入小寫f,它將。請注意 "IntelliSense" 視窗旁邊的工具提示框如何與說明一起顯示,如果語句的代碼程式碼片段(If not, enter a lowercase f, and it will.) Notice how a tooltip box next to the IntelliSense window appears with the description, Code snippet for if statement. (在 Visual Basic 中,工具提示還指出這是一個片段,但措辭略有不同。您希望使用該程式碼片段,因此請選擇Tab鍵以插入if到代碼中。(In Visual Basic, the tooltip also states that this is a snippet, but with slightly different wording.) You want to use that snippet, so choose the Tab key to insert if into your code. 然後再次選擇 Tab 鍵來使用 if 程式碼片段。Then choose the Tab key again to use the if snippet. (如果您選擇其他位置並造成 [IntelliSense]**** 視窗消失,請按退格鍵刪除 i 並重新鍵入,[IntelliSense]**** 視窗就會再次開啟)。(If you chose somewhere else and your IntelliSense window disappeared, backspace over the i and retype it, and the IntelliSense window opens again.)

    Visual C# 程式碼

使用 IntelliSense 輸入更多代碼Use IntelliSense to enter more code

接下來,您使用 IntelliSense 輸入更多程式碼,以開啟 [開啟檔案]**** 對話方塊。Next, you use IntelliSense to enter more code to open an Open File dialog box. 如果使用者選擇 [確定]**** 按鈕,則 PictureBox 會載入使用者選取的檔案。If the user chose the OK button, the PictureBox loads the file that the user selected. 以下步驟演示如何輸入代碼,儘管有許多步驟,但只需幾下擊鍵:The following steps show how to enter the code, and although there are many steps, it's just a few keystrokes:

  1. 從程式碼片段中選取的文字 true 開始。Start with the selected text true in the snippet. 鍵入 op 覆寫它Type op to overwrite it. (在 Visual Basic 中,開頭是大寫,因此請鍵入 Op)。(In Visual Basic, you start with an initial cap, so type Op.)

  2. [IntelliSense]**** 視窗隨即開啟並顯示 [openFileDialog1]****。The IntelliSense window opens and displays openFileDialog1. 選擇 Tab 鍵加以選取。Choose the Tab key to select it. (在 Visual Basic 中,它的開頭是大寫,因此您會看到 [OpenFileDialog1]****。(In Visual Basic, it starts with an initial cap, so you see OpenFileDialog1. 確定已選取 [OpenFileDialog1]****)。Ensure that OpenFileDialog1 is selected.)

    若要深入了解 OpenFileDialog,請參閱 OpenFileDialogTo learn more about OpenFileDialog, see OpenFileDialog.

  3. 鍵入句點.( (許多程式師稱之為點)。由於您在打開 FileDialog1後直接鍵入了一個點,因此將打開一個IntelliSense視窗,其中包含所有OpenFileDialog元件的屬性和方法。Type a period (.) (Many programmers call this a dot.) Because you typed a dot right after openFileDialog1, an IntelliSense window opens, filled in with all of the OpenFileDialog component's properties and methods. 當您在 Windows Forms 設計工具中選擇該元件時,[屬性]**** 視窗中也會顯示相同的屬性。These are the same properties that appear in the Properties window when you choose it in Windows Forms Designer. 您也可以選擇指示元件執行動作 (例如開啟對話方塊) 的方法。You can also choose methods that tell the component to do things (like open a dialog box).

    注意

    [IntelliSense]**** 視窗可以同時顯示屬性和方法。The IntelliSense window can show you both properties and methods. 若要判斷顯示的內容,請查看 [IntelliSense]**** 視窗中每個項目左方的圖示。To determine what is being shown, look at the icon on the left side of each item in the IntelliSense window. 在每種方法旁邊可以看到一個塊的圖像,每個屬性旁邊都有扳手(或扳手)的圖像。You see an image of a block next to each method, and an image of a wrench (or spanner) next to each property. 每一個事件旁邊也會出現閃電圖示。There's also a lightning bolt icon next to each event.

    下面是顯示的圖示:Here are the icons that appear:

    方法圖示Method icon
    屬性圖示Property icon
    事件圖示Event icon

  4. 開始鍵入 ShowDialog (大小寫對 IntelliSense 而言不重要)。Start to type ShowDialog (capitalization is unimportant to IntelliSense). ShowDialog() 方法會顯示 [開啟檔案]**** 對話方塊。The ShowDialog() method will show the Open File dialog box. 視窗反白顯示 ShowDialog 後,請選擇 Tab 鍵。After the window has highlighted ShowDialog, choose the Tab key. 您也可以反白顯示 "ShowDialog" 並選擇 F1 鍵以取得其說明。You can also highlight "ShowDialog" and choose the F1 key to get help for it.

    若要深入了解 ShowDialog() 方法,請參閱 ShowDialog 方法To learn more about the ShowDialog() method, see ShowDialog Method.

  5. 當您在控制項或元件上使用方法時 (稱為「呼叫方法」**),需要新增括號。When you use a method on a control or a component (referred to as calling a method), you need to add parentheses. 因此,在 ShowDialog 中緊接 "g" 之後輸入左括弧和右括弧:()。現在這應該看起來像 "openFileDialog1.ShowDialog()"。So enter opening and closing parentheses immediately after the "g" in ShowDialog: () It should now look like "openFileDialog1.ShowDialog()".

    注意

    方法是任何應用的重要組成部分,本教程演示了幾種使用方法的方法。Methods are an important part of any app, and this tutorial has shown several ways to use methods. 您可以呼叫元件的方法來指示元件執行動作,就像您呼叫 OpenFileDialog 元件的 ShowDialog() 方法一樣。You can call a component's method to tell it to do something, like how you called the OpenFileDialog component's ShowDialog() method. 您可以創建自己的方法,使應用執行操作操作,例如您現在構建的方法,稱為showButton_Click()方法,當使用者選擇按鈕時,該方法將打開對話方塊和圖片。You can create your own methods to make your app do things, like the one you're building now, called the showButton_Click() method, which opens a dialog box and a picture when a user chooses a button.

  6. 對於 C#,添加空格,然後添加兩個相等的符號==( 。For C#, add a space, and then add two equal signs (==). 在 Visual Basic 中,新增空格,然後使用單一等號 (=)For Visual Basic, add a space, and then use a single equal sign (=). (C# 和視覺化基本使用不同的相等運算子。(C# and Visual Basic use different equality operators.)

  7. 加入另一個空格。Add another space. 這樣做之後,另一個 [IntelliSense]**** 視窗會隨即開啟。As soon as you do, another IntelliSense window opens. 開始鍵入 DialogResult,並選擇 Tab 鍵將其新增。Start to type DialogResult and choose the Tab key to add it.

    注意

    當您撰寫程式碼來呼叫方法時,有時會傳回一個值。When you write code to call a method, sometimes it returns a value. 在這個案例中,OpenFileDialog 元件的 ShowDialog() 方法會傳回 DialogResult 值。In this case, the OpenFileDialog component's ShowDialog() method returns a DialogResult value. DialogResult 是特殊值,可讓您得知對話方塊中發生的情形。DialogResult is a special value that tells you what happened in a dialog box. OpenFileDialog 元件可讓使用者選擇 [確定]**** 或 [取消]****,因此其 ShowDialog() 方法會傳回 DialogResult.OKDialogResult.CancelAn OpenFileDialog component can result in the user choosing OK or Cancel, so its ShowDialog() method returns either DialogResult.OK or DialogResult.Cancel.

  8. 鍵入一個點來開啟 DialogResult 值 [IntelliSense]**** 視窗。Type a dot to open the DialogResult value IntelliSense window. 輸入字母 O,然後選擇 Tab 鍵來插入 OKEnter the letter O and choose the Tab key to insert OK.

    若要深入了解 DialogResult,請參閱 DialogResultTo learn more about DialogResult, see DialogResult.

    注意

    第一行程式碼應該就完成。The first line of code should be complete. 對於 C#,它應該類似于以下內容。For C#, it should be similar to the following.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    在 Visual Basic 中,程式碼應該如下所示。For Visual Basic, it should be the following.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

  9. 現在再加入另一行程式碼。Now add one more line of code. 您可以直接輸入它 (或複製並貼上),但建議使用 IntelliSense 來加入它。You can type it (or copy and paste it), but consider using IntelliSense to add it. 只要愈熟悉 IntelliSense,您自己撰寫程式碼的速度就會愈快。The more familiar you are with IntelliSense, the more quickly you can write your own code. 最終showButton_Click()方法應類似于以下代碼。Your final showButton_Click() method should look similar to the following 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)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    
    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

後續步驟Next steps

另請參閱See also