C#

【C#】ドラッグ&ドロップでPictureBoxに画像を表示する

ドラッグ&ドロップは最も代表的なマウス操作の一つです。

ドラッグ(drag)とは”引きずる”、”引きずって行く”という意味です。

ドロップ(drop)とは”落とす”という意味です。

この記事では、ドラッグ&ドロップで PictureBox に画像を表示する方法について紹介したいと思います。

名無し君
名無し君
ドラッグ&ドロップして画像を表示したい

こんな方にオススメの記事です。ぜひ最後まで読んでみて下さい。

ドラッグ&ドロップでPictureBoxに画像を表示する

ここでは、C#の「Windows フォーム アプリケーション」で PictureBox にドラッグ&ドロップで画像を表示する方法を紹介します。

Visual Studio を起動して、プロジェクトを新規作成しましょう。プロジェクト名は任意の名前で構いません。

デザイン(Form)

まずは、Form のサイズを調整します。ここでは WidthHeight の値をそれぞれ ”500” にしました。

Formのプロパティ
Size – Width : 500
Size – Height : 500

次に PictureBox を Form に配置します。

Form のサイズに合わせて PictureBox のサイズを変更します。また、ウィンドウがリサイズされた時に、PictureBox もリサイズされるように Anchor プロパティを設定します。Anchor プロパティは4辺をすべて固定するように設定します。

PictureBoxのプロパティ
Anchor : Top,Bottom,Left,Right
Location – X : 12
Location – Y : 12
Size – Width : 460
Size – Height : 437

ドラッグする領域を分かりやすくする為に、PictureBox の枠線を表示します。枠線を表示するには BorderStyle プロパティを FixedSingle に変更します。

ドラッグ&ドロップした画像の縦横比は変更せずに(アスペクト比は維持して)、PictureBox の枠内にピッタリと表示するように、SizeMode プロパティを Zoom に変更します。

PictureBoxのプロパティ
BorderStyle : FixedSingle
SizeMode : Zoom

これでデザインの設定は完了です。

コード(C#)

続けて、コードを記述します。

PictureBox(コントロール)にドラッグ&ドロップを許可する為に、AllowDrop プロパティを ”true” にします。

この AllowDrop プロパティは、デザイナのPictureBoxのプロパティ一覧に表示されない事があります。その際はコードから設定をします。

この記述を忘れてしまうとドラッグ&ドロップができないので、注意しましょう。

public Form1()
{
    InitializeComponent();

    pictureBox1.AllowDrop = true;
}

pictureBox に ドラッグ&ドロップのイベントである DragDropDragEnter を実装します。

ドラッグ&ドロップに関連するイベントは他にもあります。

DragDrop:ドラッグ&ドロップの操作が完了したときにイベントが発生する。
DragEnter:コントロールの境界内にドラッグされる時にイベントが発生する。
DragOver:コントロールの境界を超えてドラッグされる時にイベントが発生する。
DragLeave:コントロールの境界の外へドラッグされる時にイベントが発生する。

DragEnter イベントが発生した時に、マウスカーソルの形状が変更されるようにします。

マウスカーソルの形状は、DragDropEffects 列挙体の値によって変化します。

DragDrop
Effects
マウス
形状
説明
All-2147483645「Copy」「Move」「Scroll」の3つを組み合わせたもの。ドロップ先で、データがコピーされたり、移動されたり、スクロールが発生したりする状態。
None0いかなるデータもドロップ先が受け付けようとしない状態。
Copy1データがドロップ先にコピーされようとしている状態。
Move2データがドロップ先に移動されようとしている状態。
Link4データのリンクがドロップ先に作成されようとしている状態。
Scroll-2147483645データによってドロップ先でスクロールが開始されようとしている状態、あるいは現在スクロール中である状態。

ここでは、DragDropEffects.All を指定します。

/// <summary>
/// DragEnterのイベントハンドラー
/// </summary>
/// <param name="sender"></param&gt;
/// <param name="e"></param>
private void pictureBox1_DragEnter(object sender, DragEventArgs e)
{
    // マウスカーソルの形状を変更
    if (e.Data.GetDataPresent(DataFormats.FileDrop))
    {
        e.Effect = DragDropEffects.Link;
    }
    else
    {
        e.Effect = DragDropEffects.None;
    }
}

PictureBox に画像ファイルをドラッグすると、次の図のようにマウスカーソルの形状が変わります。

DragDrop イベントが発生した時に、ドラッグ&ドロップされたファイルのパスのパスを取得して、PictureBox に画像を表示されるようにします。

複数のファイルをドラッグ&ドロップすることが想定されますが、ここでは1個の画像ファイルのデータだけを PictureBox に表示します。

/// <summary>
/// DragDropのイベントハンドラー
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void pictureBox1_DragDrop(object sender, DragEventArgs e)
{
    // ドラッグされたファイルのパスを取得
    string[] fileName = (string[])e.Data.GetData(DataFormats.FileDrop, false);
    if (!System.IO.File.Exists(fileName[0]))
    {
        return;
    }
    // 画像ファイルのパスを指定
    pictureBox1.ImageLocation = fileName[0];
}

動作確認

それでは、このアプリケーションを実行してみましょう。

Form アプリケーションを起動して、PictureBox に画像ファイルをドラッグ&ドロップします。

このようにドラッグ&ドロップした画像ファイルを PictureBox に表示する事ができました。

画像のアスペクト比は維持したまま、PictureBox の枠内に収まっていますね。

改善点としては画像ファイル以外の動画ファイルやテキストファイル等も PictureBox の ImageLocation プロパティにパスを渡しているので、画像ファイルの拡張子だけに絞る処理を追加した方が良さそうです。

まとめ

この記事では、ドラッグ&ドロップで PictureBox に画像を表示する方法について紹介しました。

ドラッグ&ドロップはマウス操作でよく使うので、PictureBox に画像を表示する用途以外でも利用しそうですね。

ドラッグ&ドロップに関連する4つのイベントを上手に活用して、プログラムの開発をしてみて下さい。

DragDrop
DragEnter
DragOver
DragLeave

以上、最後まで読んで頂きありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA