Windows FormsでPictureBoxをマウスドラッグで移動する方法

2023年2月15日2025年2月12日

1. 概要

本記事では、Windows Formsアプリケーションで PictureBox コントロールを使用し、マウスドラッグ操作で画像を移動させる方法を紹介します。

2. 実行結果

このアプリケーションでは、PictureBox に表示された画像をマウスでドラッグしながら移動できます。

操作方法

• 画像の上にマウスを移動
• 左クリックしたままドラッグ
• マウスの移動に応じて PictureBox が動く
• 左クリックを離すと移動が終了

3. 実装方法

3.1 PictureBoxの作成と設定

まず、PictureBox のインスタンスを作成し、画像を表示するための設定を行います。

private PictureBox pictureBox1;
private Point clickPoint;

public Form1()
{
    InitializeComponent();

    // PictureBox の作成
    pictureBox1 = new PictureBox();
    pictureBox1.Image = Properties.Resources.sampleImage; // リソースに登録した画像を使用
    pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize;
    pictureBox1.MouseDown += pictureBox1_MouseDown;
    pictureBox1.MouseMove += pictureBox1_MouseMove;
    pictureBox1.MouseUp += pictureBox1_MouseUp;

    this.Controls.Add(pictureBox1);
}

3.2 マウスイベントの登録

次に、マウスの Down、Move、Up の各イベントを登録し、ドラッグ処理を実装します。

マウスボタンを押したとき

クリック位置を取得します。

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        clickPoint = e.Location;
    }
}

マウスを移動させたとき

マウスの移動量を計算し、PictureBox の位置を変更します。

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        int xDiff = e.Location.X - clickPoint.X;
        int yDiff = e.Location.Y - clickPoint.Y;
        pictureBox1.Location = new Point(pictureBox1.Location.X + xDiff, pictureBox1.Location.Y + yDiff);
    }
}

int xDiff = e.Location.X - clickPoint.X;
int yDiff = e.Location.Y - clickPoint.Y;

pictureBox1.Location = new Point(pictureBox1.Location.X + xDiff, pictureBox1.Location.Y + yDiff);

Console.WriteLine($"xDiff={xDiff}, yDiff={yDiff}");

マウスボタンを離したとき

クリック位置をリセットします。

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        clickPoint = Point.Empty;
    }
}

4. 画像リソースの登録

画像を Properties.Resources に登録する必要があります。

手順

1. Visual Studio の「ソリューションエクスプローラ」でプロジェクトを選択
2. 右クリック → [プロパティ] を開く
3. [リソース] を選択
4. 既存ファイルの追加（画像を選択）
5. sampleImage という名前をつける

これで、Properties.Resources.sampleImage で画像を取得できます。

手順の詳細

リソースを選択

リソースウィンドウで画像ファイルを追加します

リソースウィンドウに登録された画像が表示されています

表示されている名前が、コード中で使用する名前になります

5. 実行可能なコード

以下が、フォームに PictureBox を動的に追加し、マウスドラッグで移動させる完全なコードです。

namespace SimplePictureBoxExample
{
    public partial class Form1 : Form
    {
        private PictureBox pictureBox1;
        private Point clickPoint;

        public Form1()
        {
            InitializeComponent();

            // PictureBox の作成
            pictureBox1 = new PictureBox();
            pictureBox1.Image = Properties.Resources.sampleImage;
            pictureBox1.Size = new Size(100, 100);
            pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
            pictureBox1.MouseDown += pictureBox1_MouseDown;
            pictureBox1.MouseMove += pictureBox1_MouseMove;
            pictureBox1.MouseUp += pictureBox1_MouseUp;

            this.Controls.Add(pictureBox1);
        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                clickPoint = e.Location;
            }
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                int xDiff = e.Location.X - clickPoint.X;
                int yDiff = e.Location.Y - clickPoint.Y;
                pictureBox1.Location = new Point(pictureBox1.Location.X + xDiff, pictureBox1.Location.Y + yDiff);
            }
        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
            {
                clickPoint = Point.Empty;
            }
        }
    }
}

6. まとめ

• PictureBox を作成し、画像を設定
• マウスイベント (MouseDown, MouseMove, MouseUp) を登録
• マウス移動の差分を計算して PictureBox の位置を変更
• 画像をリソースに追加して管理する

この方法を活用すれば、GUIアプリでドラッグ可能な要素を簡単に作成できます。

以下は、Windows FormsアプリケーションでPictureBox画像を移動させるサンプルコードです。このコードは、PictureBoxコントロールを使用して画像を表示し、マウスドラッグ操作を使用して画像を移動させます。

コメント付きの全体コード

// SimplePictureBoxExampleという名前の名前空間を定義する
namespace SimplePictureBoxExample
{
    // Form1というクラスをFormクラスを継承して定義する
    public partial class Form1 : Form
    {
        // PictureBoxコントロールを宣言する
        private PictureBox pictureBox1;
        // クリックされた座標を保持するためのPointを宣言する
        private Point clickPoint;
        // Form1クラスのコンストラクタ
        public Form1()
        {
            // 初期化処理を実行する
            InitializeComponent();

            // PictureBoxコントロールを作成する
            pictureBox1 = new PictureBox();
            // ピクチャーボックスに表示する画像を設定する
            pictureBox1.Image = Properties.Resources.sampleImage;
            // ピクチャーボックスのサイズを設定する
            pictureBox1.Size = new Size(100, 100);
            // 画像をピクチャーボックスに合わせて表示する
            pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
            // マウスイベントの登録を行う
            pictureBox1.MouseDown += pictureBox1_MouseDown;
            pictureBox1.MouseMove += pictureBox1_MouseMove;
            pictureBox1.MouseUp += pictureBox1_MouseUp;

            // フォームにピクチャーボックスを追加する
            this.Controls.Add(pictureBox1);
        }

        // ピクチャーボックスのマウスダウンイベント
        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            // 左ぼたんが押された場合
            if (e.Button == MouseButtons.Left)
            {
                // クリックされた座標を取得する
                clickPoint = e.Location;
            }
        }

        // ピクチャーボックスのマウス移動イベント
        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            // 左クリックされたまま場合
            if (e.Button == MouseButtons.Left)
            {
                // 現在の座標とクリックされた座標の差分を計算する
                int xDiff = e.Location.X - clickPoint.X;
                int yDiff = e.Location.Y - clickPoint.Y;
                // ピクチャーボックスの位置を移動する
                pictureBox1.Location = new Point(pictureBox1.Location.X + xDiff, pictureBox1.Location.Y + yDiff);
            }
        }

        // ピクチャーボックスのマウスアップイベント
        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            // 左ボタンが離された場合
            if (e.Button == MouseButtons.Left)
            {
                // クリックされた座標を初期化する
                clickPoint = Point.Empty;
            }
        }
    }
}

e.Location　はフォームでの座標にならない

e.Location は マウスイベントが発生したコントロール（この場合 PictureBox）内の相対座標 になります。
つまり、e.Location の (0,0) は PictureBoxの左上隅 を指します。

💡 e.Location の座標系

マウスイベントの発生した座標をコンソールに出力するコード 

Console.WriteLine($"eX={e.Location.X}, eY={e.Location.Y}");

🛑 e.Location をそのまま pictureBox1.Location にするとズレる理由

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        pictureBox1.Location = new Point(e.Location.X, e.Location.Y);
    }
}

⬆ 問題点

• e.Location は pictureBox1 内の相対座標（PictureBoxの左上が (0,0) ）。
• そのため pictureBox1.Location = e.Location にすると、PictureBoxの親（Form）の座標系と合わない。
• 結果：クリック位置とずれて意図しない場所に飛ぶ。

🎯 PictureBoxを親フォームの座標系で扱う方法

Control.PointToScreen() や Control.PointToClient() を使うと、座標系を変換できます。

// PictureBoxの座標をフォーム基準に変換
Point formPoint = pictureBox1.PointToScreen(e.Location);

// フォーム基準の座標をPictureBoxの親コンテナ（この場合Form）基準に変換
Point parentPoint = this.PointToClient(formPoint);

📌 フォーム基準の座標を取得する方法

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        // PictureBox内の座標 (e.Location) をスクリーン座標に変換
        Point screenPoint = pictureBox1.PointToScreen(e.Location);

        // スクリーン座標をフォーム座標に変換
        Point formPoint = this.PointToClient(screenPoint);

        // PictureBoxの位置を更新
        pictureBox1.Location = formPoint;
    }
}

✅ これなら クリックした位置がずれずにスムーズに移動できる！

🔑 まとめ

• e.Location は イベント発生元のコントロール（PictureBox）内の座標 で、フォーム基準の座標ではない。
• Control.PointToScreen(e.Location) を使うと、スクリーン座標 に変換できる。
• this.PointToClient(screenPoint) で フォーム基準の座標 に変換できる。
• 直接 pictureBox1.Location = e.Location するとズレるので、適切な座標変換が必要！