チュートリアル: Visual Studio でピクチャビューアー Windows フォームアプリにコードを追加する

[アーティクル]
03/20/2023

この一連の 3 つのチュートリアルでは、画像を読み込んで表示する Windows フォームアプリケーションを作成します。 Visual Studio の統合開発環境 (IDE) には、アプリを作成するために必要なツールが含まれています。詳細については、「Visual Studio IDE へようこそ」を参照してください。

コントロールとは、C# または Visual Basic のコードを使用して、関連付けられているアクションを実行するものです。

この 3 番目のチュートリアルでは、次の作業を行う方法について説明します。

コントロールのイベントハンドラーを追加する
ダイアログボックスを開くコードを書く
他のコントロールのコードを書く
アプリケーションを実行する

前提条件

このチュートリアルは、前の「ピクチャビューアーアプリケーションの作成」および「ピクチャビューアーに UI コントロールを追加する」チュートリアルに基づいて作成されています。それらのチュートリアルをまだ行っていない場合は、最初に実行してください。

コントロールのイベントハンドラーを追加する

このセクションでは、ピクチャビューアーアプリケーションにコントロールを追加する 2 番目のチュートリアルで追加したコントロールの イベントハンドラー を追加します。これは、ボタンの選択などのアクションが発生したときにイベントハンドラーを呼び出すアプリケーションです。

Visual Studio を開きます。 [最近開いた項目] の下にピクチャビューアーのプロジェクトが表示されます。
Windows フォームデザイナーで、 [Show a picture] ボタンをダブルクリックします。代わりに、フォームの [Show a picture] ボタンを選択してから Enter キーを押すこともできます。

Visual Studio IDE のメインウィンドウにタブが開かれます。 C# の場合、タブの名前は Form1.cs です。 Visual Basic を使用している場合、タブの名前は Form1.vb になります。

このタブには、フォームの背後にあるコードファイルが表示されます。

Note

[Form1.vb] タブには、showButton が ShowButton として表示されることがあります。
コードの次の部分にフォーカスを設定します。
- C#
- VB
```
private void showButton_Click(object sender, EventArgs e)
{
}
```
```
Private Sub showButton_Click() Handles showButton.Click

End Sub
```
重要

このページの右上にあるプログラミング言語のコントロールを使用して、C# コードスニペットまたは Visual Basic コードスニペットのいずれかを表示します。
もう一度 [Windows フォームデザイナー] タブを選択し、 [Clear the picture] ボタンをダブルクリックしてそのコードを開きます。残りの 2 つのボタンについてもこれを繰り返します。それぞれについて、Visual Studio IDE でフォームのコードファイルに新しいメソッドが追加されます。

Windows フォームデザイナーで CheckBox コントロールをダブルクリックして、checkBox1_CheckedChanged() メソッドを追加します。チェックボックスをオンまたはオフにすると、このメソッドが呼び出されます。

コードエディターに表示される新しいコードを次のスニペットに示します。

private void clearButton_Click(object sender, EventArgs e)
{
}

private void backgroundButton_Click(object sender, EventArgs e)
{
}

private void closeButton_Click(object sender, EventArgs e)
{
}

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
}

Private Sub clearButton_Click() Handles clearButton.Click

End Sub

Private Sub backgroundButton_Click() Handles backgroundButton.Click

End Sub

Private Sub closeButton_Click() Handles closeButton.Click

End Sub

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged

End Sub

イベントハンドラーを含めて、メソッドには任意の名前を指定できます。 IDE でイベントハンドラーを追加した場合は、コントロールの名前と処理されるイベントに基づいて名前が作成されます。

たとえば、showButton というボタンの Click イベントには showButton_Click() または ShowButton_Click() という名前が付けられます。コード変数名を変更する場合は、コードの変数を右クリックし、 [リファクター]>[名前の変更] の順に選択します。コードのその変数のすべてのインスタンスの名前は変更されます。詳細については、名前の変更リファクタリングに関するページを参照してください。

ダイアログボックスを開くコードを書く

[Show a picture] ボタンは、OpenFileDialog コンポーネントを使用して画像ファイルを表示します。この手順では、そのコンポーネントを呼び出すコードを追加します。

Visual Studio IDE には、IntelliSense と呼ばれる強力なツールが用意されています。入力時、IntelliSense によってコードの入力候補が表示されます。

Windows フォームデザイナーで、 [Show a picture] ボタンをダブルクリックします。 IDE で showButton_Click() または ShowButton_Click() メソッドにカーソルが移動します。
2 つの中かっこ { } の間、または Private Sub... と End Sub の間の空の行に「i」と入力します。 IntelliSense ウィンドウが開きます。
IntelliSense ウィンドウで、if という単語が強調表示されます。 Tab キーを押して if を挿入します。
true を選択し、C# の場合は「op」、または Visual Basic の場合は「Op」と入力してそれを上書きします。

IntelliSense で openFileDialog1 が表示されます。
Tab キーを押して openFileDialog1 を追加します。
openFileDialog1 の直後にピリオド (.) または ドット を入力します。 OpenFileDialog コンポーネントのすべてのプロパティとメソッドが IntelliSense で表示されます。「ShowDialog」の入力を開始し、Tab キーを押します。ShowDialog() は、[Open File] ダイアログボックスを表示するメソッドです。
() の "g" の直後にかっこ ShowDialog を追加します。コードは openFileDialog1.ShowDialog() になります。
C# の場合は、空白文字を追加し、2 つの等号 (==) を追加します。 Visual Basic の場合は、空白文字を追加し、1 つの等号 (=) を使用します
空白文字をもう 1 つ追加します。 IntelliSense を使用して DialogResult を追加します。
ドットを入力します。DialogResult の値を示す IntelliSense ウィンドウが開きます。「O」と入力し、Tab キーを押して OK を挿入します。

注意

コードの 1 行目はこれで完了です。 C# の場合、次のようになります。

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

Visual Basic の場合は、次のようになります。

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

次のコード行を追加します。

pictureBox1.Load(openFileDialog1.FileName);

PictureBox1.Load(OpenFileDialog1.FileName)

コピーして貼り付けるか、IntelliSense を使用して追加できます。 showButton_Click() メソッドは、最終的に次のコードのようになります。

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

コードに次のコメントを追加します。

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

コードには常にコメントを付けることがベストプラクティスです。コードコメントを使用すると、今後のコードの理解と保守が簡単になります。

他のコントロールのコードを書く

アプリケーションを今すぐ実行する場合は、 [Show a picture] を選択できます。ピクチャビューアーで [Open File] ダイアログボックスが開き、表示する画像を選択できます。

このセクションでは、他のイベントハンドラーのコードを追加します。

Windows フォームデザイナーで、Clear the picture ボタンをダブルクリックします。中かっこ内にコードを追加します。

private void clearButton_Click(object sender, EventArgs e)
{
    // Clear the picture.
    pictureBox1.Image = null;
}

Private Sub clearButton_Click() Handles clearButton.Click
    ' Clear the picture.
    PictureBox1.Image = Nothing
End Sub

[Set the background color] ボタンをダブルクリックし、中かっこ内にコードを追加します。

private void backgroundButton_Click(object sender, EventArgs e)
{
    // Show the color dialog box. If the user clicks OK, change the
    // PictureBox control's background to the color the user chose.
    if (colorDialog1.ShowDialog() == DialogResult.OK)
        pictureBox1.BackColor = colorDialog1.Color;
}

Private Sub backgroundButton_Click() Handles backgroundButton.Click
    ' Show the color dialog box. If the user clicks OK, change the
    ' PictureBox control's background to the color the user chose.
    If ColorDialog1.ShowDialog() = DialogResult.OK Then
        PictureBox1.BackColor = ColorDialog1.Color
    End If
End Sub

[Close] ボタンをダブルクリックし、中かっこ内にコードを追加します。

private void closeButton_Click(object sender, EventArgs e)
{
    // Close the form.
    this.Close();
}

Private Sub closeButton_Click() Handles closeButton.Click
    ' Close the form.
    Close()
End Sub

[Stretch] チェックボックスをダブルクリックし、中かっこ内にコードを追加します。

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
    // If the user selects the Stretch check box, 
    // change the PictureBox's
    // SizeMode property to "Stretch". If the user clears 
    // the check box, change it to "Normal".
    if (checkBox1.Checked)
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
    else
        pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
}

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
    ' If the user selects the Stretch check box, change 
    ' the PictureBox's SizeMode property to "Stretch". If the user 
    ' clears the check box, change it to "Normal".
    If CheckBox1.Checked Then
        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
    Else
        PictureBox1.SizeMode = PictureBoxSizeMode.Normal
    End If
End Sub

アプリケーションを実行する

アプリケーションは、作成中にいつでも実行できます。前のセクションでのコード追加後、ピクチャビューアーは完成しています。前のチュートリアルと同様に、次のいずれかの方法を使用してアプリケーションを実行します。

F5 キーを押します。
メニューバーで、 [デバッグ]>[デバッグ開始] の順に選択します。
ツールバーの [開始] ボタンを選択します。

Picture Viewer というタイトルのウィンドウが表示されます。すべてのコントロールをテストします。

[Set the background color] ボタンを選択します。 [色] ダイアログボックスが表示されます。
色を選択して背景色を設定します。
[Show a picture] を選択して画像を表示します。
[Stretch] を選択し、選択解除します。
[Clear the picture] ボタンを選択して、表示が消去されることを確認します。
[Close] をクリックしてアプリを終了します。

次のステップ

お疲れさまでした。このチュートリアルシリーズが完了しました。 Visual Studio IDE で、これらのプログラミングタスクと設計タスクを行いました。

Windows フォームを使用した Visual Studio プロジェクトを作成しました
画像表示アプリケーションのレイアウトを追加しました
ボタンとチェックボックスを追加しました
ダイアログボックスを追加しました
コントロールのイベントハンドラーを追加しました
イベントを処理するための C# または Visual Basic コードを書きました

時間指定の計算クイズの作成方法について、別のチュートリアルシリーズで学習を続けてください。

チュートリアル 2: 制限時間ありの計算クイズの作成

次の方法で共有

チュートリアル: Visual Studio でピクチャビューアー Windows フォームアプリにコードを追加する

前提条件

コントロールのイベントハンドラーを追加する

ダイアログボックスを開くコードを書く

他のコントロールのコードを書く

アプリケーションを実行する

次のステップ

フィードバック

その他のリソース

次の方法で共有

チュートリアル: Visual Studio でピクチャ ビューアー Windows フォーム アプリにコードを追加する

前提条件

コントロールのイベント ハンドラーを追加する

ダイアログ ボックスを開くコードを書く

他のコントロールのコードを書く

アプリケーションを実行する

次のステップ

フィードバック

その他のリソース

チュートリアル: Visual Studio でピクチャビューアー Windows フォームアプリにコードを追加する

コントロールのイベントハンドラーを追加する

ダイアログボックスを開くコードを書く