Windows FormsアプリケーションでPictureBox画像を移動させる
以下は、Windows FormsアプリケーションでPictureBox画像を移動させるサンプルコードです。このコードは、PictureBoxコントロールを使用して画像を表示し、マウスドラッグ操作を使用して画像を移動させます。
実行結果
最初に動作している様子を見てみましょう
キャラクタをマウスでドラックしたまま上下左右に移動させています
ドラッグとは、マウスをキャラクタの上に移動させ、マウスの左ボタンを押下しながら移動させること
ポイントだけ記述したサンプル
最後にそのままで実行できるコード（画像のリソース登録は必要）がありますので
まとめて確認したいときはそちらからどうぞ
PictureBoxクラスからインスタンスの作成
まず、フォームにPictureBoxコントロールを追加し、イベントハンドラーを設定します。
private PictureBox pictureBox1;
private Point clickPoint;
public Form1()
{
InitializeComponent();
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);
}マウスドラッグ操作に対応するイベントハンドラーを実装
次に、マウスドラッグ操作に対応するイベントハンドラーを実装します。
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;
}
}これで、PictureBoxコントロールに表示されている画像をマウスドラッグ操作で移動させることができます。
解説
PictureBoxクラスからインスタンスの作成
まず、フォームに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;PictureBoxコントロールを設定するためのコードです。PictureBoxコントロールは、画像を表示するためのコントロールです。
1行目では、新しいPictureBoxコントロールをインスタンス化しています。
2行目では、PictureBoxコントロールに表示する画像を設定しています。このコードでは、アプリケーションのリソースに含まれる “sampleImage" という名前の画像を表示するように設定しています。アプリケーションのリソースには、アプリケーションに組み込まれた画像、フォント、音声などが含まれます。
3行目では、PictureBoxコントロールのSizeModeプロパティを設定しています。このプロパティは、PictureBoxコントロールのサイズを画像のサイズに自動的に調整するか、手動で調整するかを指定するためのものです。AutoSizeを指定することで、画像のサイズに合わせてPictureBoxコントロールのサイズが自動的に調整されます。
4行目から6行目では、PictureBoxコントロールに対してマウスイベントを処理するためのイベントハンドラを設定しています。PictureBoxコントロール上でマウスのボタンが押された、移動した、離された時にそれぞれ実行するイベントハンドラがpictureBox1_MouseDown、pictureBox1_MouseMove、pictureBox1_MouseUpに定義されていると仮定して、それぞれのイベントに対してイベントハンドラを設定しています。イベントハンドラは、イベントが発生した時に自動的に呼び出されるメソッドです。
画像をリソースに追加
リソースに画像を登録するコードになります
pictureBox1.Image = Properties.Resources.sampleImage; // 表示する画像を設定ソリューションエクスプローラからリソースウィンドウを開きます
VisualStudio2022
VisualStudio2019
リソースウィンドウで画像ファイルを追加します
リソースウィンドウに登録された画像が表示されています
表示されている名前が、コード中で使用する名前になります
マウスドラッグ操作に対応するイベントハンドラーを実装
次に、マウスドラッグ操作に対応するイベントハンドラーを実装します。
マウスのボタンが押された時のイベントハンドラ
押された瞬間の１回だけ呼び出されます
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
clickPoint = e.Location;
}
}このコードは、WindowsフォームアプリケーションでPictureBoxコントロールがクリックされたときに、クリックされたマウスのボタンが左クリックだった場合、クリックされた場所の座標を取得するためのイベントハンドラです。具体的には、PictureBoxコントロールがクリックされたときに呼び出され、クリックされたマウスの座標を表すe.Locationを取得して、それをclickPointという変数に格納します。この変数は、後で使用されることがあるかもしれません。なお、MouseEventArgsクラスは、マウスイベントに関する情報を提供するために使用されます。
マウス移動中のイベントハンドラ
マウスが移動している間、頻繁に呼ばれるコードになります
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);
}
}このコードは、マウスカーソルが PictureBox コントロール内で移動するたびに実行されるイベントハンドラです。マウスの左ボタンが押されている場合、PictureBox の位置をマウスカーソルの移動量に応じて移動させます。具体的には、マウスカーソルの現在位置と、マウスの左ボタンが最初に押された位置との差を計算し、その差分だけ PictureBox の現在位置を変更します。つまり、マウスをドラッグして画像を移動させることができるようになります。
マウスのボタンが離された時のイベントハンドラ
離された瞬間の１回だけ呼び出されます
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
clickPoint = Point.Empty;
}
}このコードは、C#のWindowsフォームアプリケーションにおいて、PictureBoxコントロール上でマウスのボタンが離されたときに実行されるメソッドです。
具体的には、マウスの左ボタンが離された場合に、clickPointという名前のPoint型の変数に空のPointオブジェクトを代入します。clickPoint変数は、フィールドで定義されているもので、PictureBoxコントロール上でマウスの左ボタンが押された場所の座標が格納されています。
なお、PictureBoxコントロールには、画像や図形などのグラフィックを表示することができます
そのままで実行できるコード（画像のリソース登録は必要）
フォームデザインにはコントロールを事前に配置していません
コード
namespace GraphicImageMoveSample
{
public partial class Form1 : Form
{
private PictureBox pictureBox1;
private Point clickPoint;
public Form1()
{
InitializeComponent();
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;
}
}
}
}コード（コメントあり）
// GraphicImageMoveSampleという名前の名前空間を定義する
namespace GraphicImageMoveSample
{
// 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;
}
}
}
}