*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*

<C#>

大きな画像を、パネルのスクロールにより、ピクチャボックスに表示


*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*


「C# でのマウスの使い方」における一連の説明(知恵ノート)において、ここでは、

「<C#> 大きな画像を、パネルのスクロールにより、ピクチャボックスに表示」

について説明します。






総合の目次


本ページを含めた関連事項の総合目次です。

http://note.chiebukuro.yahoo.co.jp/detail/n153215


 



 

はじめに


パネル上のピクチャボックスに画像ファイルを貼り付けます。
なお、貼り付けた画像が大き過ぎる場合は、パネルのスクロールバーが現れ、それでスクロールすることが可能です。

 

 

(なお、パネルは無しで、フォーム上のピクチャボックスに、直接画像ファイルを貼り付けることは可能です。ただし、その場合は、フォームに、ぴったりと(ピクチャボックスと)画像を貼り付けることになります。これに対して、本サンプルは、パネルを使って画像の表示領域を指定することが可能になります)






 

サンプルコード


ここで取り上げるサンプルは、なるべく複雑にならない範囲で、マウスを確かめられるものとします。






本サンプの仕様概要


<画像ファイルの仕様>
画像は、

C:背景.bmp

とします(大きめな画像)。

 

<横スクロール>
横スクロールバーを操作すると、画像が右、又は左に移動します。

 

<縦スクロール>
縦スクロールバーを操作すると、画像が上、又は下に移動します。



フォームデザイン等の前準備


コードを記述する前に、フォームのデザイン作成などの、以下の前準備を行なって下さい。

<プロジェクトの作成>
本サンプルの確認用に、新規にプロジェクトを作成して下さい。
プロジェクトの種類は、「Windowsフォームアプリケーション」です。

<フォームのデザイン>
デザイン画面で、パネル(panel)を1個貼り付けて下さい。
そのパネルの上で、ピクチャボックス(pictureBox)を1個貼り付けて下さい。
(なお、ピクチャボックスの配置や大きさは、コード上で定めるので、デザイン画面上では、気にしなくて大丈夫です)

 

 デザイン画面

 

 

 

<イベントプロシージャの作成>

 

デザイン画面のフォーム(ピクチャボックスやスクロールバーを貼り付いていない無地の部分)をダブルクリックすることにより、Form1_Load() メソッドを作って下さい。

 

次に、デザイン画面のピクチャボックス(pictureBox)が選択された状態で、「プロパティ」画面の「イベント」ボタン(雷マークのボタン)をクリックして下さい。
その「プロパティ」画面で、Paint と言う項目をダブルクリックして下さい。
そうすると、pictureBox1_Paint()メソッドが作成されます。







コード

 

 

 

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


// 大きな画像を、パネルのスクロールにより、ピクチャボックスに表示
namespace ShowBigImageByPanel
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

 

        // 表示処理を行なう画像
        public Bitmap img;

 

        // ==============
        // フォーム起動時に実行されるイベントプロシージャ
        private void Form1_Load(object sender, EventArgs e)
        {

            // 画像指定
            img = new Bitmap("C:背景.bmp"); // キャラクター画像


            // パネル内部のコントロール(ピクチャボックス)が、パネルより
            // も大きくなったら、スクロールバーが現れるように設定。
            panel1.AutoScroll = true;


            // ピクチャボックス(クライアント領域)の横幅で、最大値とする
            pictureBox1.ClientSize = new System.Drawing.Size(img.Width, img.Height);
            //pictureBox1.ClientSize.Width = img.Width;

            pictureBox1.Location = new System.Drawing.Point(0, 0);

        }

 

 

        //============
        // ピクチャボックスの再描画時に実行されるイベントプロシージャ
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {

            // 画像の描画
            e.Graphics.DrawImage(img, new Point(0, 0));

        }


    }
}

 


 

コードの解説


サンプルコードの中に書かれていますコメントを読んで下さい。
すなわち、コードの解説は、基本的にサンプルコードの中に書かれているコメントとします。





実行結果


大きな画像を設定するとスクロールバーが現れます。
縦スクロールバーを操作すると、画像が上下に移動します。
また、横スクロールバーを操作すると、画像が左右に移動します。

 

 実行結果

 



 

さいごに

 

関連サンプルは幾つか有りますが、大きな画像をスクロールして表示するだけならば、本サンプルがシンプルで良いと思います。

パネルにスクロールを任せれば良いのですから。

ただし、さらにコードに手を加えたい場合もあると思います(例えば、拡大縮小して表示する機能を付け加えるなど)。

その場合は、パネルに任せるのではなく、スクロールバーを設けて、コード上でスクロールを管理したほうが良いです。

すなわち、今までの関連サンプルのやり方です。

関連サンプルは、総合目次から参照して下さい。

なお、代表例として下記参照先を記しておきます。

「<C#> 画像をパネルとスクロールバーで、スクロールして表示 <ピクチャボックス上での扱い方>」
http://note.chiebukuro.yahoo.co.jp/detail/n155099

このノートのライターが設定した関連知恵ノート

  • ttttttt00 C# でのマウスの使い方 <目次>
  • <C#> 画像をパネルとスクロールバーで、スクロールして表示 <ピクチャボックス上での扱い方>