WinForms PictureBox チュートリアル（初学者向け技術資料）

2025年2月10日

1. はじめに

このチュートリアルでは、Windows Forms（WinForms） の PictureBox コントロールを使用して、画像を表示するアプリを作成します。
2つの方法 を紹介します：

1. コードで UI を作る方法（プログラムで作成）
2. ツールボックスを使う方法（GUI エディタで作成）

このアプリでは、ボタンをクリックすると画像が表示されるシンプルな動作 を実装します。
WinForms の基本を学ぶのに最適な入門編です。

---

2. 必要な環境

✅ Visual Studio（2022 以上を推奨）
✅ .NET（.NET Core または .NET Framework）

まだインストールしていない場合は、Visual Studio の公式サイト からダウンロードしてください。

---

3.（コードで作る方法）PictureBox を使った画像表示アプリ

1. Visual Studio で新しいプロジェクトを作成

• 「C# Windows フォームアプリ（.NET Framework）」を選択
• 「次へ」をクリック
• プロジェクト名：PictureBoxSample
• 「作成」をクリック

2. Form1.cs を開き、以下のコードを入力

using System;
using System.Drawing;
using System.Windows.Forms;

namespace PictureBoxSample
{
    public class Form1 : Form
    {
        private PictureBox pictureBox;
        private Button loadButton;

        public Form1()
        {
            Text = "PictureBox サンプル";
            Size = new Size(400, 400);

            pictureBox = new PictureBox
            {
                Size = new Size(300, 200),
                Location = new Point(50, 50),
                BorderStyle = BorderStyle.Fixed3D,
                SizeMode = PictureBoxSizeMode.Zoom
            };

            loadButton = new Button
            {
                Text = "画像を読み込む",
                Location = new Point(50, 270)
            };
            loadButton.Click += LoadButton_Click;

            Controls.Add(pictureBox);
            Controls.Add(loadButton);
        }

        private void LoadButton_Click(object sender, EventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.Filter = "画像ファイル (*.jpg; *.png)|*.jpg;*.png";

            if (openFileDialog.ShowDialog() == DialogResult.OK)
            {
                pictureBox.Image = Image.FromFile(openFileDialog.FileName);
            }
        }
    }
}

✅ PictureBox（画像表示） → SizeMode を Zoom に設定
✅ Button（ボタン） → クリックで画像を読み込む
✅ OpenFileDialog（ファイル選択） → ユーザーが画像を選べるようにする

---

4.（ツールボックスを使う方法）GUI エディタを使った PictureBox アプリ

1. フォームデザイナーで作成

1. Form1.cs のデザイナーを開く
2. ツールボックスから以下のコントロールをドラッグ＆ドロップ

• PictureBox（名前: pictureBox）
• Button（名前: loadButton）

3. プロパティ設定

• PictureBox
  • Size = (300, 200)
  • Location = (50, 50)
  • BorderStyle = Fixed3D
  • SizeMode = Zoom
• Button
  • Text = "画像を読み込む"
  • Location = (50, 270)

2. イベントハンドラを追加

1. loadButton を選択
2. プロパティウィンドウの「イベント（雷アイコン）」を開く
3. Click イベントを LoadButton_Click に設定

3. Form1.cs に以下のコードを追加

private void LoadButton_Click(object sender, EventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    openFileDialog.Filter = "画像ファイル (*.jpg; *.png)|*.jpg;*.png";

    if (openFileDialog.ShowDialog() == DialogResult.OK)
    {
        pictureBox.Image = Image.FromFile(openFileDialog.FileName);
    }
}

✅ ツールボックスを使えば、コードをほとんど書かずに同じアプリを作れる！

---

5. カスタマイズ例

1️⃣ 「クリア」ボタンを追加

画像をクリアするボタンを追加する。

ツールボックスでボタンを追加する場合:

1. ツールボックスから Button を追加
2. Text → “クリア"
3. Name → “clearButton"
4. Location → (200, 270)

Form1.cs に以下のコードを追加

private void ClearButton_Click(object sender, EventArgs e)
{
    pictureBox.Image = null;
}

イベントを関連付ける

1. clearButton をクリック
2. イベントプロパティで Click に ClearButton_Click を設定

---

6. 実行方法

どちらの方法（コード / ツールボックス）でも、プログラムを実行できます。

1. Visual Studio でプロジェクトを開く
2. F5キーを押してプログラムを実行
3. 「画像を読み込む」ボタンをクリックし、任意の画像を選択
4. 画像が PictureBox に表示される
5. 「クリア」ボタンで画像を削除できる

---

7. まとめ

🎯 本チュートリアルで学んだこと

• WinForms の PictureBox の基本構造
• コードで UI を作成する方法
• ツールボックスを使って GUI エディタで作成する方法
• イベントハンドラの設定
• カスタマイズの方法（クリアボタンの追加など）

✅ 画像表示アプリをマスターすれば、スライドショーや画像エディタへの応用も可能！