C# PictureBoxの使い方完全ガイド|画像表示・サイズ調整・読み込みを初心者向けに解説
はじめに
C# PictureBoxは、Windowsフォームアプリで画像を表示するときに最もよく使われるコントロールの1つです。jpg、png、bmpなどの画像をフォーム上に表示したり、サイズを調整したり、ボタンクリックで画像を読み込んだり、URL上の画像を表示したりできます。
初心者がつまずきやすいポイントは、「画像が表示されない」「サイズが合わない」「ファイルを削除できない」「画像を差し替えるとメモリが増える」といった部分です。この記事では、C# PictureBoxの基本的な使い方から、画像表示、サイズ調整、ファイル選択、URL読み込み、画像の解放、イベント処理、よくあるエラー対策まで順番に解説します。
1. C#のPictureBoxとは?できることと使う場面
1-1. PictureBoxはWindowsフォームで画像を表示するためのコントロール
PictureBoxは、C#のWindowsフォームアプリで画像を表示するためのコントロールです。フォーム上に画像表示エリアを作り、その中に画像ファイルやBitmapオブジェクトなどを表示できます。Microsoft Learnでも、PictureBoxは通常、ビットマップ、メタファイル、アイコン、JPEG、GIF、PNGファイルからのグラフィックス表示に使うと説明されています。
たとえば、プロフィール画像、商品画像、プレビュー画像、画像ビューア、サムネイル一覧などを作るときにPictureBoxを使います。ボタンやテキストボックスと同じようにフォームに配置できるため、初心者でも扱いやすいのが特徴です。
1-2. PictureBoxで表示できる主な画像形式
PictureBoxでよく扱う画像形式は、次のようなものです。
| 形式 | 用途 |
|---|---|
| jpg / jpeg | 写真画像 |
| png | 透明部分を含む画像、UI素材 |
| bmp | Windows系のビットマップ画像 |
| gif | 簡単なアニメーションや軽量画像 |
| ico | アイコン画像 |
System.Drawing.Image.FromFileのドキュメントでは、BMP、GIF、JPEG、PNG、TIFFなどがマネージドGDI+の組み込みエンコーダー・デコーダーとして挙げられています。
1-3. PictureBoxを使う代表的な用途
PictureBoxは、単に画像を表示するだけでなく、さまざまな用途に使えます。
| 用途 | 例 |
|---|---|
| 画像ビューア | 選択した画像を大きく表示する |
| サムネイル表示 | 複数画像を小さく一覧表示する |
| プレビュー機能 | 印刷前、アップロード前の画像確認 |
| 画像クリック処理 | 画像をクリックして詳細を表示する |
| 描画処理 | Paintイベントで文字や図形を重ねる |
| カメラ・スキャン画像表示 | 取得した画像を画面に表示する |
画像を「見せる」目的であればPictureBoxが向いています。一方で、本格的な画像加工やピクセル単位の編集を行う場合は、BitmapやGraphicsを組み合わせて使うことが多くなります。
1-4. PictureBoxとImage・Bitmapの違い
PictureBox、Image、Bitmapは似た場面で出てきますが、役割が違います。
| 種類 | 役割 |
|---|---|
| PictureBox | 画像をフォーム上に表示するコントロール |
| Image | 画像を表す抽象クラス |
| Bitmap | ピクセルデータを持つ具体的な画像クラス |
ImageはBitmapやMetafileなどの基底となる抽象クラスで、Bitmapはピクセルデータによって定義される画像を扱うためのクラスです。
簡単に言うと、PictureBoxは「画像を置く場所」、ImageやBitmapは「表示する画像データ」です。
2. Visual StudioでPictureBoxを配置する基本手順
2-1. Windowsフォームアプリを作成する
Visual Studioを起動し、「新しいプロジェクトの作成」から「Windows フォーム アプリ」を選びます。C#で作成する場合は、言語がC#になっていることを確認してください。
プロジェクトを作成すると、Form1という画面が表示されます。この画面にPictureBoxを配置して、画像表示用のアプリを作っていきます。
2-2. ツールボックスからPictureBoxをフォームに追加する
フォームデザイナーを開いた状態で、左側の「ツールボックス」から「PictureBox」を探します。見つからない場合は、ツールボックス内の検索欄に「PictureBox」と入力すると見つけやすくなります。
PictureBoxをフォーム上にドラッグ&ドロップすると、画像表示用の枠が追加されます。
2-3. Name・Size・Locationなど基本プロパティを設定する
PictureBoxを配置したら、プロパティウィンドウで基本設定を行います。
| プロパティ | 説明 | 例 |
|---|---|---|
| Name | コードから使う名前 | pictureBox1 |
| Size | 幅と高さ | 300, 200 |
| Location | フォーム上の位置 | 20, 20 |
| BorderStyle | 枠線の有無 | FixedSingle |
| SizeMode | 画像の表示方法 | Zoom |
特に重要なのはNameとSizeModeです。コードで画像を設定するときは、pictureBox1.ImageのようにNameを使います。
2-4. デザイナーで画像を設定する方法
コードを書かずに画像を設定することもできます。PictureBoxを選択し、プロパティウィンドウの「Image」から画像ファイルを指定します。
固定画像を表示するだけなら、この方法が簡単です。ただし、実行中にユーザーが画像を選ぶ場合や、ボタンで画像を切り替える場合は、C#コードで設定する方法を使います。
2-5. 実行して画像が表示されるか確認する
画像を設定したら、Visual Studioの開始ボタンを押して実行します。フォーム上のPictureBoxに画像が表示されれば成功です。
画像が大きすぎて切れる場合は、PictureBoxのSizeModeをZoomまたはStretchImageに変更してください。SizeModeは画像のクリッピングや配置を制御するプロパティです。
3. C#コードでPictureBoxに画像を表示する方法
3-1. Imageプロパティに画像を設定する基本コード
PictureBoxに画像を表示する基本は、Imageプロパティに画像を代入することです。
C#pictureBox1.Image = Image.FromFile(@"C:\Images\sample.jpg");
この1行で、指定した画像ファイルをPictureBoxに表示できます。Imageプロパティは、PictureBoxに表示する画像を設定するための代表的なプロパティです。
3-2. Image.FromFileでローカル画像を読み込む
ローカルPCにある画像ファイルを読み込む場合は、Image.FromFileを使います。
C#using System;
using System.Drawing;
using System.Windows.Forms;
private void Form1_Load(object sender, EventArgs e)
{
pictureBox1.Image = Image.FromFile(@"C:\Images\photo.png");
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
}
Image.FromFileは指定したファイルからImageを作成します。ただし、作成したImageが破棄されるまでファイルがロックされたままになる点に注意が必要です。
3-3. Bitmapを使って画像を表示する
Bitmapを使って画像を表示することもできます。
C#Bitmap bitmap = new Bitmap(@"C:\Images\sample.bmp");
pictureBox1.Image = bitmap;
Bitmapはピクセルデータを持つ画像クラスなので、画像編集や描画処理と組み合わせる場面でよく使います。たとえば、画像の上に線を描く、文字を重ねる、ピクセル単位で加工する場合などです。
3-4. プロジェクトのリソース画像を表示する
プロジェクトに追加したリソース画像を表示する場合は、Properties.Resourcesを使います。
C#pictureBox1.Image = Properties.Resources.sampleImage;
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
リソース画像はアプリに埋め込まれるため、画像ファイルのパスを気にせず使えるのがメリットです。アイコン画像や固定のロゴ画像などに向いています。
画像を後でDisposeする設計にする場合は、共有リソースを直接代入するのではなく、コピーして使うと安全です。
C#pictureBox1.Image = new Bitmap(Properties.Resources.sampleImage);
3-5. 画像を差し替える・再表示する方法
画像を差し替えるときは、古い画像を解放してから新しい画像を設定します。
C#private void ChangeImage(string path)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = Image.FromFile(path);
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
ただし、この書き方では新しく読み込んだファイルがImageの破棄までロックされます。ファイルロックを避けたい場合は、後述する安全な読み込み方を使いましょう。
4. PictureBoxの画像サイズを調整する方法
4-1. SizeModeプロパティの基本
PictureBoxの画像サイズ調整では、SizeModeプロパティが重要です。SizeModeにより、画像をそのまま表示するのか、引き伸ばすのか、中央表示するのか、比率を保って拡大縮小するのかを指定できます。
C#pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
初心者におすすめなのはZoomです。画像の縦横比を保ったまま、PictureBoxの枠内に収めて表示できます。
4-2. Normal・StretchImage・AutoSize・CenterImage・Zoomの違い
PictureBoxSizeModeには、主に次の5種類があります。
| SizeMode | 表示方法 |
|---|---|
| Normal | 左上にそのまま表示。大きい画像は切れる |
| StretchImage | PictureBoxのサイズに合わせて引き伸ばす |
| AutoSize | PictureBox自体を画像サイズに合わせる |
| CenterImage | 中央に表示。大きい画像は切れる |
| Zoom | 縦横比を保って拡大縮小する |
Microsoft Learnでは、Normalは左上配置で大きい場合はクリップ、StretchImageはPictureBoxサイズに合わせて伸縮、AutoSizeはPictureBoxを画像サイズに合わせる、CenterImageは中央配置、Zoomは縦横比を維持して拡大縮小すると説明されています。
4-3. 画像を枠内に収めたい場合はZoomを使う
画像全体を切らずに表示したい場合は、Zoomを使います。
C#pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
Zoomは縦横比を保つため、写真やイラストの見た目が崩れません。画像ビューアやプレビュー画面では、基本的にZoomを選ぶとよいでしょう。
4-4. 画像をPictureBoxいっぱいに引き伸ばす方法
PictureBox全体を画像で埋めたい場合は、StretchImageを使います。
C#pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
ただし、画像とPictureBoxの縦横比が違う場合、画像が横長や縦長に歪みます。見た目を重視するならZoom、枠を完全に埋めることを重視するならStretchImageと覚えると分かりやすいです。
4-5. アスペクト比を保ったまま表示するコツ
アスペクト比を保つには、次の設定が基本です。
C#pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
pictureBox1.BorderStyle = BorderStyle.FixedSingle;
Zoomを使えば画像の比率は維持されます。ただし、画像とPictureBoxの比率が違う場合は上下または左右に余白ができます。余白が出ても画像が歪まない方を優先するのが、写真表示では一般的です。
4-6. PictureBox自体のサイズを変更する方法
PictureBox自体のサイズは、SizeまたはClientSizeで変更できます。
C#pictureBox1.Size = new Size(400, 300);
実行中に表示領域のサイズを変えたい場合は、ClientSizeを使う方法もあります。PictureBoxの表示領域は実行時にClientSizeで変更できると説明されています。
C#pictureBox1.ClientSize = new Size(400, 300);
5. ファイル選択ダイアログから画像を読み込む方法
5-1. OpenFileDialogを使う基本手順
ユーザーに画像ファイルを選ばせるには、OpenFileDialogを使います。手順は次の通りです。
OpenFileDialogを作成する
選択できる拡張子を指定する
ダイアログを表示する
選択されたファイルパスを取得する
PictureBoxに画像を表示する
5-2. jpg・png・bmpなど画像ファイルだけを選択できるようにする
画像ファイルだけ選べるようにするには、Filterを設定します。
C#openFileDialog1.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp;*.gif|すべてのファイル|*.*";
これにより、ユーザーが画像以外のファイルを選んでしまう可能性を減らせます。
5-3. 選択した画像をPictureBoxに表示するサンプルコード
ボタンをクリックして画像を選び、PictureBoxに表示するサンプルです。
C#private void buttonOpen_Click(object sender, EventArgs e)
{
using (OpenFileDialog dialog = new OpenFileDialog())
{
dialog.Title = "画像ファイルを選択してください";
dialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp;*.gif|すべてのファイル|*.*";
if (dialog.ShowDialog() == DialogResult.OK)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = Image.FromFile(dialog.FileName);
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
}
}
このコードで、選択した画像をPictureBoxに表示できます。ただし、Image.FromFileを使っているため、読み込んだ画像ファイルはImageが破棄されるまでロックされます。
5-4. 画像を読み込めないときのエラー処理
画像ファイルが壊れている、対応していない形式である、パスが存在しないなどの場合は例外が発生します。安全に処理するにはtry-catchを使います。
C#try
{
pictureBox1.Image = Image.FromFile(filePath);
}
catch (Exception ex)
{
MessageBox.Show("画像を読み込めませんでした。\n" + ex.Message);
}
Image.FromFileでは、ファイルが存在しない場合や有効な画像形式でない場合に例外が発生する可能性があります。
5-5. 画像ファイルのパスを取得して再利用する方法
選択した画像ファイルのパスは、変数に保存しておくと再利用できます。
C#private string currentImagePath = "";
private void buttonOpen_Click(object sender, EventArgs e)
{
using (OpenFileDialog dialog = new OpenFileDialog())
{
dialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp;*.gif";
if (dialog.ShowDialog() == DialogResult.OK)
{
currentImagePath = dialog.FileName;
pictureBox1.Image = Image.FromFile(currentImagePath);
}
}
}
後で同じ画像を再読み込みしたい場合や、画像パスを設定ファイルに保存したい場合に便利です。
6. URLや外部画像をPictureBoxに読み込む方法
6-1. ImageLocationプロパティを使う方法
PictureBoxには、画像のパスまたはURLを指定できるImageLocationプロパティがあります。Microsoft Learnでも、ImageLocationはPictureBoxに表示する画像のパスまたはURLを取得・設定するプロパティと説明されています。
C#pictureBox1.ImageLocation = "https://example.com/sample.png";
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
ローカルファイルだけでなくWeb上の画像を指定できるため、簡単な画像取得には便利です。
6-2. Loadメソッドで画像を読み込む方法
Loadメソッドを使うと、指定したパスまたはURLから画像を同期的に読み込めます。
C#pictureBox1.Load("https://example.com/sample.jpg");
同期読み込みでは、画像の取得が終わるまで画面操作が止まったように見えることがあります。大きな画像やネットワーク上の画像では、次のLoadAsyncを検討しましょう。
6-3. LoadAsyncで非同期に画像を読み込む方法
LoadAsyncを使うと、画像を非同期に読み込めます。
C#pictureBox1.WaitOnLoad = false;
pictureBox1.LoadAsync("https://example.com/sample.jpg");
LoadAsyncでは、WaitOnLoadをfalseに設定することで非同期読み込みを行い、読み込み状況はLoadProgressChanged、完了はLoadCompletedで扱えます。
6-4. 読み込み中の画像・エラー時の画像を設定する
画像読み込み中に表示する画像は、InitialImageで設定できます。InitialImageは、メイン画像の読み込み時にPictureBoxに表示される画像です。
C#pictureBox1.InitialImage = Properties.Resources.loading;
pictureBox1.ErrorImage = Properties.Resources.error;
pictureBox1.WaitOnLoad = false;
pictureBox1.LoadAsync("https://example.com/sample.jpg");
Web画像を表示する場合は、通信失敗やURL間違いに備えてErrorImageも設定しておくと親切です。
6-5. Web画像を表示するときの注意点
Web画像を扱うときは、次の点に注意します。
| 注意点 | 内容 |
|---|---|
| URLの有効性 | 画像URLが直接画像を返すか確認する |
| 通信エラー | ネットワーク切断や404に備える |
| 表示速度 | 大きな画像は読み込みに時間がかかる |
| 著作権 | 外部画像を無断使用しない |
| UI停止 | 同期読み込みでは画面が固まることがある |
読み込み完了を検知したい場合はLoadCompletedイベントを使います。このイベントは、非同期の画像読み込みが完了、取り消し、または例外発生したときに発生します。
7. PictureBoxの画像をクリア・削除・解放する方法
7-1. PictureBox.Imageをnullにして画像を消す
PictureBoxの画像を消すだけなら、Imageにnullを代入します。
C#pictureBox1.Image = null;
これで画面上の画像は消えます。ただし、古い画像オブジェクトがすぐに解放されるとは限らないため、画像を頻繁に差し替えるアプリではDisposeも行いましょう。
7-2. Disposeで画像リソースを解放する
古い画像を解放する基本コードは次の通りです。
C#Image oldImage = pictureBox1.Image;
pictureBox1.Image = null;
oldImage?.Dispose();
Disposeを呼ぶことで、画像が使用しているリソースを解放できます。特に大きな画像を扱う場合や、何度も画像を読み込む場合は重要です。
7-3. Image.FromFile使用時にファイルがロックされる原因
Image.FromFileで読み込んだ画像ファイルは、そのImageが破棄されるまでロックされます。Microsoft Learnにも、ファイルはImageが破棄されるまでロックされたままになると明記されています。
そのため、次のような問題が起きることがあります。
| 問題 | 原因 |
|---|---|
| 画像ファイルを削除できない | PictureBoxが画像を保持している |
| 同じファイルを上書き保存できない | Image.FromFileでロックされている |
| 差し替え後もファイルが使用中になる | 古いImageをDisposeしていない |
7-4. ファイルロックを防ぐ安全な読み込み方
ファイルロックを避けたい場合は、ファイルを一度ストリームで読み込み、Bitmapとしてコピーします。
C#private Image LoadImageWithoutLock(string path)
{
using (var stream = new System.IO.FileStream(path, System.IO.FileMode.Open, System.IO.FileAccess.Read))
using (var temp = Image.FromStream(stream))
{
return new Bitmap(temp);
}
}
Image.FromStreamはImageの存続中にストリームを開いておく必要があるため、すぐに閉じたい場合はnew Bitmap(temp)でコピーを作るのがポイントです。
使う側は次のように書きます。
C#private void SetPicture(string path)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = LoadImageWithoutLock(path);
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
7-5. メモリリークを防ぐ画像差し替えの書き方
画像を何度も切り替える場合は、古いImageを必ず解放します。
C#private void ReplaceImage(Image newImage)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = newImage;
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
このように、差し替え前の画像を変数に退避し、新しい画像を設定してから古い画像をDisposeすると安全です。
8. PictureBoxでよく使うイベントと実装例
8-1. Clickイベントで画像クリック処理を行う
画像がクリックされたときに処理を行うには、Clickイベントを使います。
C#private void pictureBox1_Click(object sender, EventArgs e)
{
MessageBox.Show("画像がクリックされました");
}
画像ビューアで拡大表示したり、サムネイルをクリックして詳細画像を表示したりする場合に便利です。
8-2. MouseMoveイベントでマウス座標を取得する
PictureBox上のマウス座標を取得するには、MouseMoveイベントを使います。
C#private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
label1.Text = $"X: {e.X}, Y: {e.Y}";
}
画像上の座標を表示したい場合や、画像編集ツールのような処理を作る場合に使えます。
8-3. Paintイベントで画像の上に文字や図形を描画する
PictureBox上に文字や図形を重ねたい場合は、Paintイベントを使います。
C#private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawString(
"Sample",
new Font("Arial", 20),
Brushes.Red,
new PointF(10, 10)
);
e.Graphics.DrawRectangle(
Pens.Blue,
new Rectangle(50, 50, 100, 80)
);
}
画像認識結果の枠表示、注釈テキスト、選択範囲の描画などに使えます。
8-4. SizeChangedイベントでリサイズ時の処理を行う
PictureBoxのサイズが変わったときに処理したい場合は、SizeChangedイベントを使います。
C#private void pictureBox1_SizeChanged(object sender, EventArgs e)
{
pictureBox1.Invalidate();
}
Invalidateを呼ぶと再描画されるため、Paintイベントで描画している図形や文字を更新したいときに便利です。
8-5. LoadCompletedイベントで読み込み完了を検知する
LoadAsyncで画像を読み込んだ場合、読み込み完了はLoadCompletedで検知できます。
C#private void pictureBox1_LoadCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
if (e.Error != null)
{
MessageBox.Show("画像の読み込みに失敗しました: " + e.Error.Message);
return;
}
if (e.Cancelled)
{
MessageBox.Show("画像の読み込みがキャンセルされました");
return;
}
MessageBox.Show("画像の読み込みが完了しました");
}
LoadCompletedでは、エラーやキャンセル情報も確認できます。非同期読み込み時の例外はイベント引数のErrorプロパティで扱えます。
9. PictureBoxでよくあるエラーと解決策
9-1. 画像が表示されないときの確認ポイント
画像が表示されない場合は、次の点を確認します。
| 確認項目 | 内容 |
|---|---|
| パス | ファイルパスが正しいか |
| 拡張子 | 対応している画像形式か |
| ファイル存在 | 実際にファイルが存在するか |
| SizeMode | 画像が切れて見えていないか |
| PictureBoxサイズ | 幅・高さが0になっていないか |
| 例外 | try-catchでエラー内容を確認したか |
まずはFile.Existsでパスを確認すると原因を絞り込みやすくなります。
C#if (!System.IO.File.Exists(path))
{
MessageBox.Show("ファイルが見つかりません");
return;
}
9-2. パスが正しいのに画像を読み込めない場合
パスが正しいのに読み込めない場合は、画像ファイルが壊れている、形式が対応していない、拡張子と中身が一致していない可能性があります。
C#try
{
pictureBox1.Image = Image.FromFile(path);
}
catch (OutOfMemoryException)
{
MessageBox.Show("有効な画像形式ではない可能性があります");
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
Image.FromFileでは、有効な画像形式でない場合やGDI+がピクセル形式をサポートしていない場合にOutOfMemoryExceptionが発生することがあります。
9-3. サイズが合わず画像が切れる場合
画像が切れる場合は、SizeModeがNormalまたはCenterImageになっている可能性があります。画像全体を表示したい場合はZoomに変更しましょう。
C#pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
Normalは左上に配置され、大きい画像はクリップされます。CenterImageも大きい画像では外側が切れるため、全体表示にはZoomが適しています。
9-4. 画像が粗く見える・ぼやける場合
画像がぼやける場合は、画像の解像度が低い、StretchImageで無理に引き伸ばしている、元画像と表示サイズの差が大きいなどが原因です。
対策は次の通りです。
| 原因 | 対策 |
|---|---|
| 小さい画像を拡大している | 高解像度画像を使う |
| StretchImageで歪んでいる | Zoomに変更する |
| サムネイルを拡大している | 元画像を読み込む |
| 描画品質が低い | Paintイベントで補間モードを設定する |
Paintイベントで独自描画する場合は、InterpolationModeを設定すると縮小・拡大時の品質を調整できます。
9-5. 使用中のファイルとして削除できない場合
画像ファイルを削除しようとして「使用中」と表示される場合は、Image.FromFileで読み込んだImageがまだ生きています。
C#Image oldImage = pictureBox1.Image;
pictureBox1.Image = null;
oldImage?.Dispose();
ファイルロックを根本的に避けたい場合は、FileStreamとnew Bitmap(temp)を使って画像をコピーしてから表示する方法を使いましょう。
9-6. 大きな画像でアプリが重くなる場合
高解像度の画像をそのまま大量に読み込むと、メモリ使用量が増えてアプリが重くなります。
対策としては、次のような方法があります。
| 対策 | 内容 |
|---|---|
| サムネイルを作る | 一覧表示では小さい画像を使う |
| 不要画像をDispose | 差し替え時に古い画像を解放する |
| 非同期読み込み | Web画像や大きな画像ではLoadAsyncを使う |
| 読み込み数を制限 | 画面に見える分だけ読み込む |
| キャッシュ管理 | 必要な画像だけ保持する |
画像ビューアやサムネイル一覧を作る場合は、表示用の縮小画像と元画像を分けて管理すると効率的です。
10. 初心者向けPictureBoxサンプルコード集
10-1. 画像を表示する最小コード
C#pictureBox1.Image = Image.FromFile(@"C:\Images\sample.jpg");
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
まずはこの2行を覚えれば、C# PictureBoxで画像表示ができます。
10-2. ボタンクリックで画像を読み込むコード
C#private void button1_Click(object sender, EventArgs e)
{
using (OpenFileDialog dialog = new OpenFileDialog())
{
dialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp;*.gif";
if (dialog.ShowDialog() == DialogResult.OK)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = Image.FromFile(dialog.FileName);
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
}
}
画像選択機能を作りたい場合の基本形です。
10-3. 画像をZoom表示するコード
C#pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
画像全体を表示したい場合は、基本的にZoomを使います。
10-4. 画像をクリアするコード
C#private void buttonClear_Click(object sender, EventArgs e)
{
Image oldImage = pictureBox1.Image;
pictureBox1.Image = null;
oldImage?.Dispose();
}
表示を消すだけでなく、古い画像リソースも解放します。
10-5. 複数画像を切り替えて表示するコード
C#private string[] imagePaths =
{
@"C:\Images\image1.jpg",
@"C:\Images\image2.jpg",
@"C:\Images\image3.jpg"
};
private int currentIndex = 0;
private void buttonNext_Click(object sender, EventArgs e)
{
currentIndex++;
if (currentIndex >= imagePaths.Length)
{
currentIndex = 0;
}
Image oldImage = pictureBox1.Image;
pictureBox1.Image = Image.FromFile(imagePaths[currentIndex]);
pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
oldImage?.Dispose();
}
簡単な画像ビューアを作るときの基本になります。
11. PictureBoxを使うときの実践的なコツ
11-1. 画像ビューアを作る場合の基本設計
画像ビューアを作る場合は、次のように役割を分けると作りやすくなります。
| 部品 | 役割 |
|---|---|
| PictureBox | 現在の画像を表示する |
| Button | 前へ・次へ・開く・削除など |
| Label | ファイル名や画像サイズを表示する |
| ListBox | 画像一覧を表示する |
| Panel | スクロールや配置調整に使う |
PictureBoxは表示専用、画像のパスや一覧管理は別の変数やコレクションで行うと、コードが整理しやすくなります。
11-2. サムネイル表示にPictureBoxを使う方法
複数のPictureBoxを配置すれば、サムネイル一覧を作れます。
C#PictureBox thumb = new PictureBox();
thumb.Size = new Size(120, 90);
thumb.SizeMode = PictureBoxSizeMode.Zoom;
thumb.Image = Image.FromFile(path);
thumb.BorderStyle = BorderStyle.FixedSingle;
thumb.Click += Thumb_Click;
flowLayoutPanel1.Controls.Add(thumb);
サムネイルをたくさん表示する場合は、元画像をそのまま読み込むと重くなるため、縮小画像を作って表示するのがおすすめです。
11-3. Panelと組み合わせてスクロール表示する方法
大きな画像をスクロール表示したい場合は、Panelの中にPictureBoxを配置します。
C#panel1.AutoScroll = true;
pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize;
pictureBox1.Image = Image.FromFile(@"C:\Images\large.jpg");
panel1.Controls.Add(pictureBox1);
AutoSizeを使うとPictureBoxが画像サイズに合わせて大きくなります。PanelのAutoScrollを有効にすれば、大きな画像をスクロールして確認できます。
11-4. 画像編集や描画処理ではBitmapとの使い分けが重要
PictureBoxは表示用のコントロールです。画像を加工したい場合は、BitmapやGraphicsを使って画像データ側を編集します。
C#Bitmap bmp = new Bitmap(300, 200);
using (Graphics g = Graphics.FromImage(bmp))
{
g.Clear(Color.White);
g.DrawString("Hello", new Font("Arial", 24), Brushes.Black, 10, 10);
}
pictureBox1.Image = bmp;
このように、Bitmapに描画した結果をPictureBoxに表示すると、画像生成や編集処理を分かりやすく実装できます。
11-5. PictureBoxで対応しにくい処理と代替方法
PictureBoxは便利ですが、すべての画像処理に向いているわけではありません。
| やりたいこと | PictureBoxでの向き不向き | 代替 |
|---|---|---|
| 単純な画像表示 | 向いている | PictureBox |
| サムネイル表示 | 小規模なら向いている | FlowLayoutPanel併用 |
| 高速な大量画像表示 | 不向き | 仮想化リスト、独自描画 |
| 本格的な画像編集 | 表示だけなら可 | Bitmap、Graphics |
| クロスプラットフォームUI | WinForms限定 | WPF、MAUI、Avaloniaなど |
また、.NET 6以降のSystem.Drawing.CommonはWindowsのみサポートされる点にも注意が必要です。Windowsフォームアプリで使う分には自然ですが、クロスプラットフォームの画像処理アプリでは別ライブラリも検討しましょう。
12. C# PictureBoxに関するよくある質問
12-1. PictureBoxに複数の画像を表示できる?
PictureBoxのImageプロパティに設定できる画像は基本的に1つです。複数画像を表示したい場合は、次の方法があります。
| 方法 | 内容 |
|---|---|
| 複数のPictureBoxを使う | サムネイル一覧向け |
| 1枚のBitmapに合成する | 複数画像をまとめて表示 |
| Paintイベントで描画する | 画像や図形を重ねる |
複数のPictureBoxで同じImageを使う場合は、それぞれに画像の複製を作る必要があります。同じイメージへ複数コントロールからアクセスすると例外が発生する可能性があるためです。
12-2. PictureBoxの画像を保存できる?
PictureBoxに表示している画像は、Image.Saveで保存できます。
C#pictureBox1.Image.Save(@"C:\Images\saved.png", System.Drawing.Imaging.ImageFormat.Png);
ただし、pictureBox1.Imageがnullの場合は保存できないため、事前に確認します。
C#if (pictureBox1.Image != null)
{
pictureBox1.Image.Save(@"C:\Images\saved.png");
}
12-3. PictureBoxの背景色を透明にできる?
BackColorにColor.Transparentを設定できます。
C#pictureBox1.BackColor = Color.Transparent;
ただし、Windowsフォームの透明表現は完全な画像編集ソフトのレイヤー透明とは異なります。親コントロールの背景が見えるような動作になるため、複雑な重ね合わせでは期待通りに表示されないことがあります。
12-4. PictureBoxでGIFアニメーションは表示できる?
PictureBoxはGIF画像を表示できます。アニメーションGIFも表示できる場合がありますが、画像の読み込み方法や環境によって期待通りに動かないケースもあります。単純なGIF表示ならPictureBoxで十分ですが、細かい再生制御をしたい場合は別の方法を検討しましょう。
12-5. PictureBoxとWPFのImageコントロールの違いは?
PictureBoxはWindowsフォーム用の画像表示コントロールです。一方、WPFでは主にImageコントロールを使います。
| 項目 | PictureBox | WPF Image |
|---|---|---|
| 対象 | Windows Forms | WPF |
| 表示方法 | SizeMode | Stretch |
| 描画モデル | GDI+系 | WPFの描画システム |
| 初心者向け | WinFormsでは扱いやすい | XAMLに慣れが必要 |
| UI表現 | シンプル | 柔軟なレイアウトや効果 |
WinFormsアプリならPictureBox、WPFアプリならImageコントロールを使うのが基本です。
まとめ
C# PictureBoxは、Windowsフォームアプリで画像を表示するための基本コントロールです。画像を表示するだけなら、pictureBox1.Image = Image.FromFile(path);で簡単に実装できます。画像のサイズ調整にはSizeModeを使い、初心者には縦横比を保って表示できるZoomがおすすめです。
ファイル選択から画像を読み込む場合はOpenFileDialog、URL画像を読み込む場合はImageLocationやLoadAsyncを使います。画像を差し替えるときは、古いImageをDisposeしてメモリリークを防ぎましょう。特にImage.FromFileはImageが破棄されるまでファイルをロックするため、削除や上書きが必要なアプリでは、ストリームから読み込んでBitmapにコピーする方法が安全です。
まずは「PictureBoxを配置する」「Imageに画像を設定する」「SizeModeをZoomにする」「不要な画像をDisposeする」という4点を押さえれば、C# PictureBoxの基本は十分に使いこなせます。

