手順 8: [Show a Picture] ボタンのイベント ハンドラーのコードの記述Step 8: Write code for the show a picture button event handler

この手順では、[Show a picture] ボタンの機能を次のように設定します。In this step, you make the Show a picture button work like this:

  • ユーザーがボタンをクリックすると OpenFileDialog ダイアログ ボックスが開く。When a user chooses that button, the program opens an OpenFileDialog box.

  • ユーザーがピクチャ ファイルを開くとそのピクチャが PictureBox に表示される。If a user opens a picture file, the program shows that picture in the PictureBox.

    IDE には、コードの記述に役立つ IntelliSense と呼ばれる強力なツールが備わっています。The IDE has a powerful tool called IntelliSense that helps you write code. コードを入力する際に単語の一部を入力すると、入力に合わせてボックスが開き、入力候補が提示されます。As you enter code, the IDE opens a box with suggested completions for partial words that you enter. このツールは、ユーザーの次の操作を予測し、ユーザーが一覧から選択した最後の項目に自動的にジャンプします。It 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.

    ビデオへのリンクこのトピックのビデオ版については、「Tutorial 1: Create a picture viewer in Visual Basic - Video 4」(チュートリアル 1: Visual Basic によるピクチャ ビューアーの作成 - ビデオ 4) または「Tutorial 1: Create a picture viewer in C# - Video 4」(チュートリアル 1: C# によるピクチャ ビューアーの作成 - ビデオ 4) をご覧ください。link to videoFor a video version of this topic, see Tutorial 1: Create a picture viewer in Visual Basic - Video 4 or Tutorial 1: Create a picture viewer in C# - Video 4. これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニュー コマンドやその他のユーザー インターフェイス要素が若干異なります。These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。However, the concepts and procedures work similarly in the current version of Visual Studio.

[Show a picture] ボタンのイベント ハンドラーのコードを記述するにはTo write code for the show a picture button event handler

  1. Windows フォーム デザイナーに移動し、[Show a picture] ボタンをダブルクリックします。Go to Windows Forms Designer and double-click the Show a picture button. IDE がすぐにコード デザイナーに切り替わり、前に追加した showButton_Click() メソッド内にカーソルが移動します。The IDE immediately goes to the code designer and moves your cursor so it's inside the showButton_Click() method that you added previously.

  2. 2 つの中かっこ { } の間の空の行に「i」と入力します Type an i on the empty line between the two braces { }. (Visual Basic の場合は、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 picture.

    Visual C# コードの IntelliSense Visual C# コードの IntelliSenseIntelliSense with Visual C# code IntelliSense with Visual C# code

  3. IntelliSense ウィンドウで、if という単語が強調表示されます The IntelliSense window should be highlighting the word if. (強調表示されない場合は、小文字で「f」と入力すると強調表示されます)。IntelliSense ウィンドウの横にある小さな [ツールヒント] ボックスに "if ステートメントに対するコード スニペット" と表示されます。(If not, enter a lowercase f, and it will.) Notice how a little 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] ウィンドウが非表示になった場合は、BackSpace キーで 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# コード Visual C# コードVisual C# code Visual C# code

  4. 次に、IntelliSense を使用して、[ファイルを開く] ダイアログ ボックスを開くためのコードを入力します。Next, you use IntelliSense to enter more code to open an Open File dialog box. ユーザーが [OK] をクリックすると、ユーザーが選択したファイルが 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 it's numerous 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 の詳細については、「OpenFileDialog クラス」を参照してください。To learn more about OpenFileDialog, see OpenFileDialog.

    3. ピリオド (.) を入力します (多くのプログラマはこれをドットと呼んでいます)。openFileDialog1 のすぐ後にドットを入力したため、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 フォーム デザイナーでクリックした場合に [プロパティ] ウィンドウに表示されるプロパティと同じです。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 a picture of a block next to each method, and a picture of a wrench (or spanner) next to each property. また、各イベントの横には稲妻のアイコンが表示されます。There's also a lightning bolt icon next to each event. これらの画像は次のとおりです。These pictures display as follows.

      [メソッド] アイコン [メソッド] アイコンMethod icon Method icon

      [プロパティ] アイコン [プロパティ] アイコンProperty icon Property icon

      [イベント] アイコン [イベント] アイコンEvent 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 program, 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 program 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. Visual C# の場合は、空白文字を追加し、2 つの等号 (==) を追加します。For Visual C#, add a space, and then add two equal signs (==). Visual Basic の場合は、空白文字を追加し、1 つの等号 (=) を使用します For Visual Basic, add a space, and then use a single equal sign (=). (Visual C# と Visual Basic で、使用する等値演算子が異なります)。(Visual C# and Visual Basic use different equality operators.)

    7. 空白文字をもう 1 つ追加します。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 コンポーネントではユーザーが [OK] をクリックする場合と [キャンセル] をクリックする場合があるため、ShowDialog() メソッドから DialogResult.OK または DialogResult.Cancel が返されます。An 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 キーを押して OK を挿入します。Enter the letter O and choose the Tab key to insert OK.

      DialogResult について詳しくは、「DialogResult 列挙体」をご覧ください。To learn more about DialogResult, see DialogResult.


      コードの 1 行目はこれで完了です。The first line of code should be complete. Visual C# の場合は、次のようになります。For Visual C#, it should be the following.

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

      Visual Basic の場合は、次のようになります。For Visual Basic, it should be the following.

      If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

    9. 次に、コードをもう 1 行追加します。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 looks like the following. (コードの Visual Basic バージョンを表示するために [VB] タブをクリックします)。(Choose the VB tab to view the Visual Basic version of the code.)

      private void showButton_Click(object sender, EventArgs e)
          if (openFileDialog1.ShowDialog() == DialogResult.OK)
      Private Sub showButton_Click() Handles showButton.Click
          If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
          End If
      End Sub

続行または確認するにはTo continue or review