6月 17

イメージをスクロール表示してマウスでドラッグ可能に

PictureBoxにイメージを表示し、それをスクロールするサンプルです。

PictureBox単体で実現しようとすると難しいので
Panelと組み合わせて実現します。

まず、FormにPanelを配置します。
そのPanelの中にPictureBoxを配置します。

Panelには、Panel内のコントロールが大きく、はみ出る場合に
自動でスクロールバーを表示する便利な AutoScroll プロパティーがあります。
これを利用します。

あとはPictureBox側で、画像を読み込んで
画像の実サイズにPictureBoxをリサイズすれば
勝手にスクロールバーが表示されます。

ここまではよくあるテクニックですが
マウスドラッグでスクロールしたくなると思うので
マウス関連のイベントを利用し、それを実現しています。

クリックしたままマウスドラッグすると
画像を全方向にスクロール可能です。

以下はデザイン時のサンプルです。
FormにPanelを配置し、PictureBoxを中に入れます。

picturebox_scroll1

このように表示されます。

picturebox_scroll2

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        bool bDrag = false;
        Point posStart;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // パネル上のコントロールがはみ出る場合、スクロール可能にする
            panel1.AutoScroll = true;

            // PictureBoxコントロールのサイズを画像の実サイズにする
            pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize;

            // 画像読み込み
            pictureBox1.ImageLocation = @"C:\sample.jpg";
        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            // ドラッグ開始
            bDrag = true;
            posStart = e.Location;
        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            // ドラッグ終了
            bDrag = false;
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            // ドラッグ中ならスクロール
            if(bDrag)
            {
                Point pos = new Point(
                    e.Location.X - posStart.X,
                    e.Location.Y - posStart.Y);

                panel1.AutoScrollPosition = new Point(
                    -panel1.AutoScrollPosition.X - pos.X,
                    -panel1.AutoScrollPosition.Y - pos.Y);
            }
        }
    }
}
6月 17

イメージの読み込みを同期、或いは非同期で行う

PictureBoxは、デフォルトで非同期でイメージを読み込みますが
これを同期的に読み込みたい場合
WaitOnLoadプロパティーにtrueを設定します。

// イメージが同期的に読み込まれるか否かを決定する。初期値:false
pictureBox1.WaitOnLoad = true;

// イメージの読み込みが完了するまで待ちます
pictureBox1.ImageLocation = @"c:\sample.png";
6月 17

イメージを表示する

PictureBoxにイメージを表示するサンプルです。

Imageプロパティーに表示したいイメージを設定します。
或いは単純に
ImageLocationプロパティーに画像ファイルのファイル名を設定しても良いです。

SizeModeプロパティーによって
PictureBox上にどのようにイメージが表示されるかが決定されます。

PictureBoxSizeMode.AutoSize;        // PictureBoxはイメージと同じ大きさに
PictureBoxSizeMode.CenterImage;     // 中央に表示。はみ出した部分はClipされます
PictureBoxSizeMode.Normal;          // 左上に表示
PictureBoxSizeMode.StretchImage;    // PictureBoxのサイズに引き伸ばされます
PictureBoxSizeMode.Zoom;            // サイズ比率を保持したまま拡大縮小されます

picturebox

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // PictureBoxの大きさにイメージを合わせてストレッチ表示します
            pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;

            // 表示するイメージを設定
            Bitmap bmp = new Bitmap(@"c:\hp\image\download.png");
            pictureBox1.Image = bmp;

            // 或いは単純にファイル名を指定してもOK
            pictureBox1.ImageLocation = @"C:\sample.jpg";
        }
    }
}