手順 4: 各ラベルへの Click イベント ハンドラーの追加Step 4: Add a Click Event Handler to Each Label

絵合わせゲームは、次のように動作します。The matching game works as follows:

  1. プレーヤーが、アイコンが非表示になっているいずれかの四角をクリックすると、アイコンの色が黒に変更され、プレーヤーにアイコンが表示されます。When a player chooses one of the squares with a hidden icon, the program shows the icon to the player by changing the icon color to black.

  2. 次に、プレーヤーが他の非表示のアイコンをクリックします。Then the player chooses another hidden icon.

  3. アイコンが一致した場合は、表示されたままになります。If the icons match, they stay visible. 一致しない場合は、両方のアイコンが再び非表示になります。If not, both icons are hidden again.

    プログラムをこのように動作させるには、クリックされたラベルの色を変更させる Click イベント ハンドラーを追加します。To get your program to work that way, you add a Click event handler that changes the color of the label that is chosen.

各ラベルに Click イベント ハンドラーを追加するにはTo add a Click event handler to each label

  1. Windows フォーム デザイナーでフォームを開きます。Open the form in the Windows Forms Designer. ソリューション エクスプローラーで Form1.cs または Form1.vb を選択します。In Solution Explorer, choose Form1.cs or Form1.vb. メニュー バーで [表示][デザイナー] の順にクリックします。On the menu bar, choose View, Designer.

  2. 最初のラベル コントロールをクリックして選択します。Choose the first label control to select it. 次に、Ctrl キーを押しながら他のラベルを 1 つずつクリックして選択します。Then, hold down the CTRL key while you choose each of the other labels to select them. すべてのラベルが選択されていることを確認します。Be sure that every label is selected.

  3. [プロパティ] ウィンドウのツール バーにある [イベント] をクリックして、[プロパティ] ウィンドウに [イベント] ページを表示します。Choose the Events button on the tool bar in the Properties window to view the Events page in the Properties window. Click イベントまで下へスクロールし、次の図に示すように、ボックスに「label_Click」と入力します。Scroll down to the Click event, and enter label_Click in the box, as shown in the following picture.

    Click イベントが表示された [プロパティ] ウィンドウProperties window showing Click event
    Click イベントが表示された [プロパティ] ウィンドウProperties window showing Click event

  4. Enter キーを押します。Choose the ENTER key. IDE により、label_Click() という名前の Click イベント ハンドラーがコードに追加され、フォーム上の各ラベルにフックされます。The IDE adds a Click event handler called label_Click() to the code, and hooks it to each of the labels on the form.

  5. コードの残りの部分を次のように入力します。Fill in the rest of the code, as follows:

    /// <summary>
    /// Every label's Click event is handled by this event handler
    /// </summary>
    /// <param name="sender">The label that was clicked</param>
    /// <param name="e"></param>
    private void label_Click(object sender, EventArgs e)
    {
        Label clickedLabel = sender as Label;
    
        if (clickedLabel != null)
        {
            // If the clicked label is black, the player clicked
            // an icon that's already been revealed --
            // ignore the click
            if (clickedLabel.ForeColor == Color.Black)
                return;
    
            clickedLabel.ForeColor = Color.Black;
        }
     }
    
    ''' <summary>
    ''' Every label's Click event is handled by this event handler
    ''' </summary>
    ''' <param name="sender">The label that was clicked</param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Private Sub label_Click(ByVal sender As System.Object, 
                            ByVal e As System.EventArgs) Handles Label9.Click, 
        Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, 
        Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, 
        Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click
    
        Dim clickedLabel = TryCast(sender, Label)
    
        If clickedLabel IsNot Nothing Then
    
            ' If the clicked label is black, the player clicked 
            ' an icon that's already been revealed -- 
            ' ignore the click
            If clickedLabel.ForeColor = Color.Black Then Exit Sub
    
            clickedLabel.ForeColor = Color.Black
        End If
    End Sub
    

    注意

    label_Click() コード ブロックを手動で入力せずにコピーして貼り付ける場合は、既存の label_Click() コードと置き換えてください。If you copy and paste the label_Click() code block rather than entering the code manually, be sure to replace the existing label_Click() code. 置き換えないと、コード ブロックが重複することになります。Otherwise, you'll end up with a duplicate code block.

    注意

    イベント ハンドラーの上部に「チュートリアル 2: 制限時間ありの計算クイズの作成」チュートリアルで使用した同じ object sender があります。You may recognize object sender at the top of the event handler as the same one used in the Tutorial 2: Create a Timed Math Quiz tutorial. 単一のイベント ハンドラー メソッドに異なるラベル コントロールの Click イベントをフックしたため、ユーザーがどのラベルをクリックしたかにかかわらず、同じメソッドが呼び出されます。Because you hooked up different label control Click event to a single event handler method, the same method is called no matter which label the user chooses. イベント ハンドラー メソッドは、どのラベルがクリックされたのかを知る必要があるため、そのラベル コントロールに対して sender という名前を使用します。The event handler method needs to know which label was chosen, so it uses the name sender to identify the label control. メソッドの 1 行目は、sender が単なる汎用オブジェクトではなく、具体的にはラベル コントロールであること、さらに clickedLabel という名前を使用してラベルのプロパティとメソッドにアクセスすることをプログラムに通知します。The first line of the method tells the program that it's not just a generic object, but specifically a label control, and that it uses the name clickedLabel to access the label's properties and methods.

    このメソッドは、最初に clickedLabel がオブジェクトからラベル コントロールに正常に変換 (キャスト) されたかどうかをチェックします。This method first checks whether clickedLabel was successfully converted (cast) from an object to a label control. 正常に変換されなかった場合は、値が null (C#) または Nothing (Visual Basic) となり、メソッドの残りのコードは実行されません。If unsuccessful, it has a value of null (C#) or Nothing (Visual Basic), and you don't want to execute the remainder of the code in the method. 次に、メソッドはラベルの ForeColor プロパティを使用して、クリックされたラベルのテキストの色をチェックします。Next, the method checks the chosen label's text color by using the label's ForeColor property. ラベルのテキストの色が黒になっている場合は、アイコンが既にクリックされていて、メソッドは実行されています If the label's text color is black, then that means the icon's already been chosen and the method is done. (この場合、return ステートメントが、メソッドの実行を停止するようにプログラムに指示します)。アイコンがクリックされていない場合、プログラムはそのテキストの色を黒に変更します。(That's what the return statement does: It tells the program to stop executing the method.) Otherwise, the icon hasn't been chosen, so the program changes the label's text color to black.

  6. メニュー バーで、[ファイル][すべてを保存] の順にクリックして、ここまでの進捗を保存したら、[デバッグ][デバッグ開始] の順にクリックしてプログラムを実行します。On the menu bar, choose File, Save All to save your progress, and then, on the menu bar, choose Debug, Start Debugging to run your program. 青色の背景の空のフォームが表示されます。You should see an empty form with a blue background. フォーム内で任意のセルをクリックすると、いずれかのアイコンが表示されます。Choose any of the cells in the form, and one of the icons should become visible. フォーム内のさまざまな場所でクリックし続けます。Continue choosing different places in the form. アイコンをクリックすると、そのアイコンが表示されます。As you choose the icons, they should appear.

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