チュートリアル: 画像ビューアーの Windows フォームアプリ (.NET Framework) にコードを追加する

2025-06-12

この 3 つのチュートリアルシリーズでは、画像を読み込んで表示する Windows フォームアプリケーションを作成します。 Visual Studio 統合デザイン環境 (IDE) には、アプリを作成するために必要なツールが用意されています。

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

この 3 番目のチュートリアルでは、次の方法を学習します。

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

.NET を使用して新しい Windows フォームアプリを作成するには、.NET を使用して Windows フォームアプリを作成するチュートリアルに従います。詳細については、Windows フォーム .NET のデスクトップガイドを参照してください。

前提条件

このチュートリアルは、前のチュートリアルに基づいています。画像ビューアーアプリケーションを作成し、図ビューアーに UI コントロールを追加するします。最初にそれらを完了し、これらのチュートリアル用に作成したプロジェクトから始めます。

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

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

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

Visual Studio IDE がメインウィンドウにタブを開きます。 C# の場合、タブには Form1.csという名前が付けられます。 Visual Basic を使用している場合、タブには Form1.vbという名前が付けられます。

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

手記

[Form1.vb] タブには、showButton が ShowButton として表示されることがあります。

コードのこの部分に焦点を当てます。

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

Private Sub showButton_Click() Handles showButton.Click

End Sub

[Windows フォームデザイナーの] タブをもう一度選択し、[をダブルクリックして 画像をクリアする] ボタンをクリックしてコードを開きます。残りの 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 でイベントハンドラーを追加すると、コントロールの名前と処理されるイベントに基づいて名前が作成されます。

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

ダイアログボックスを開くコードを記述する

[図の表示] ボタンは、OpenFileDialog コンポーネントを使用して画像ファイルを表示します。このプロシージャは、そのコンポーネントの呼び出しに使用するコードを追加します。

Visual Studio IDE には、IntelliSenseと呼ばれる強力なツールが用意されています。入力すると、IntelliSense によって可能なコードが提案されます。

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

IntelliSense は openFileDialog1を表示します。
タブを選択して、openFileDialog1 を追加します。
openFileDialog1 の直後にピリオド (.) または "ドット" を入力します。 IntelliSense は、OpenFileDialog コンポーネントのプロパティとメソッドをすべて提供します。 ShowDialog を入力してから、タブを選択します。ShowDialog() メソッドは[ファイルを開く] ダイアログボックス を表示します。
ShowDialogの "g" の直後に括弧 () を追加します。コードは openFileDialog1.ShowDialog()する必要があります。
C# の場合は、スペースを追加し、2 つの等号 (==) を追加します。 Visual Basic の場合は、スペースを追加し、単一の等号 (=) を使用します。
別のスペースを追加します。 IntelliSense を使用して、DialogResultを入力します。
ドットを入力して、IntelliSense ウィンドウで DialogResult 値を開きます。文字 O を入力し、タブキー を選択して、OKを挿入します。

手記

コードの最初の行が完了している必要があります。 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

常にコードにコメントを付けるのがベストプラクティスです。コードコメントを使用すると、将来のコードの理解と保守が容易になります。

他のコントロールのコードを記述する

アプリケーションを今すぐ実行する場合は、[画像を表示する] を選択できます。 [画像ビューアー] [ファイル を開く] ダイアログボックスが開き、表示する画像を選択できます。

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

Windows フォームデザイナーで、[Clear the picture] ボタンをダブルクリックします。 C# の場合は、コードを中かっこ内に追加します。 Visual Basic の場合は、Private Sub と End Subの間にコードを追加します。
- C#
- VB
```
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   
```

[背景色 設定] ボタンをダブルクリックし、コードを追加します。

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

[閉じる] ボタンをダブルクリックし、コードを追加します。

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 キーを選択します。
メニューバーで、[デバッグ] >[デバッグの開始]選択します。
ツールバーの [開始] ボタンを選択します。

「画像ビューアー」 というタイトルのウィンドウが表示されます。すべてのコントロールをテストします。

「背景色 設定」ボタンを選択します。 [色] ダイアログボックスが表示されます。
背景色を設定する色を選択します。
[Show a picture] を選択して画像を表示します。
[Stretch] を選択し、選択解除します。
[図をクリア]ボタンを選択して、表示がクリアされていることを確認します。
[閉じる] を選択してアプリを終了します。

おめでとうございます！この一連のチュートリアルを完了しました。 Visual Studio IDE では、次のプログラミングタスクと設計タスクを実行しました。

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

次の手順

時間指定された数学クイズを作成する方法に関する別のチュートリアルシリーズで学習を続けます。

チュートリアル 2: 時間指定の数学クイズを作成する

次の方法で共有

チュートリアル: 画像ビューアーの Windows フォーム アプリ (.NET Framework) にコードを追加する

前提 条件

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

ダイアログ ボックスを開くコードを記述する