WinFormsで画像を表示する方法の選び方｜PictureBox・外部ファイル・リソースの違い

広告

WinFormsアプリで画像を表示するときは、主に PictureBox を使います。ただし、画像をどこに置くか、いつ選ぶかによって、設定やコードが変わります。

この記事では、PictureBoxの基本から、外部ファイル、Imagesフォルダ、リソース、OpenFileDialogまでを整理します。目的に合う方法を選び、詳しい手順は関連記事で確認していきましょう。

まずはPictureBoxの役割を知ろう

PictureBoxは、フォームに置く「写真立て」のようなコントロールです。表示する場所を担当し、Image プロパティに画像を設定します。外部ファイルとリソースは、その写真立てに入れる画像の用意のしかたです。

画像をPictureBoxのImageプロパティに設定してフォームに表示する流れ
PictureBoxは画像を表示する場所です。画像の用意のしかたは目的に合わせて選べます。

最初はフォームにPictureBoxを配置し、Visual Studioのプロパティ画面で Image を選ぶ方法がわかりやすいです。設計時に画像を設定する操作を通して、表示までの流れをつかめます。

SizeMode は画像の表示方法です。Normal は元のサイズで表示し、StretchImage は枠に合わせて引き伸ばします。CenterImage は中央に配置し、Zoom は縦横比を保って枠に収めます。まずはZoomで試してみましょう。

pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

関連記事：【学習】WinFormsでPictureBoxに画像を表示してみよう — 設計時に画像を登録する

関連記事：【学習】WinFormsでPictureBoxに画像を設計時に登録する — いちばんシンプルなチュートリアル

方法1：プロジェクト直下に追加した画像ファイルを読み込む

画像ファイル your_image.png をプロジェクトに追加し、そのファイルのプロパティで「出力ディレクトリにコピー」を「新しい場合はコピー」または「常にコピー」に設定します。ビルドすると、画像が出力先へコピーされます。

  1. ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」→「既存の項目」を選択します。
  2. 表示されたダイアログは既定でファイルの種類が「C# Files」になっているため、そのままだと画像ファイルが表示されません。右下のファイルの種類を「イメージ ファイル」（またはファイル名欄に *.png などと直接入力）に切り替えてから your_image.png を選び、「追加」をクリックしてプロジェクトに取り込みます。
  3. 追加した画像ファイルをソリューションエクスプローラーで選択し、プロパティウィンドウで「出力ディレクトリにコピー」を「新しい場合はコピー」または「常にコピー」に変更します。

ここで、ソースコードを置くプロジェクトフォルダと、ビルドしたアプリを置く出力フォルダは別の場所だと押さえておきましょう。プロジェクトに追加しただけでは、実行時に読み込めるとは限りません。

pictureBox1.Image = Image.FromFile("your_image.png");

この短いコードは、カレントディレクトリ（現在の作業フォルダ）を基準に画像を探します。カレントディレクトリが画像をコピーした出力フォルダと一致していれば表示できますが、起動方法などによって一致しない場合があります。

以下のコード例はWindows向けのC# WinFormsを想定しています。必要に応じて using System.Drawing;、using System.IO;、using System.Windows.Forms; を追加してください。初期表示のコードは、フォームの InitializeComponent(); の後などに記述します。

関連記事：C# WinFormsアプリケーションにおける画像表示（外部ファイル取り込み）

方法2：Imagesフォルダで画像を整理する

画像が増えたら、プロジェクト内に Images フォルダを作り、その中に画像を入れます。これも外部ファイルを読み込む方法の一つです。画像ごとのコピー設定も確認しましょう。

  1. ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」→「新しいフォルダー」を選択して、フォルダ名を「Images」にします。
  2. 作成した「Images」フォルダを右クリックし、「追加」→「既存の項目」を選択します。ファイルの種類が既定で「C# Files」になっているので「イメージ ファイル」に切り替えてから your_image.png を選び、「追加」をクリックします。
  3. 追加した画像ファイルを選択し、プロパティウィンドウで「出力ディレクトリにコピー」を「新しい場合はコピー」または「常にコピー」に変更します。
プロジェクト
 └ Images
    └ your_image.png

ビルド後の出力フォルダ
 ├ アプリの実行ファイルなど
 └ Images
    └ your_image.png
画像をプロジェクト直下に置く構成とImagesフォルダに整理する構成の比較
Imagesフォルダを使うと画像を整理できます。出力先にも必要な画像とフォルダ構成を用意しましょう。
pictureBox1.Image = Image.FromFile(@"Images\your_image.png");

@ を付けると、文字列内のバックスラッシュをそのまま書けます。通常の文字列では、次のようにバックスラッシュを二つ重ねます。どちらもカレントディレクトリを基準にした相対パスです。

pictureBox1.Image = Image.FromFile("Images\\your_image.png");

関連記事：C# WinFormsアプリケーションにおけるフォルダ内の画像表示

Application.StartupPathで基準の場所を明確にする

アプリと一緒に配布する画像は、実行ファイルのあるフォルダを基準にすると場所が明確になります。Application.StartupPath と Path.Combine を組み合わせてパスを作ります。

string imagePath = Path.Combine(
    Application.StartupPath, "Images", "your_image.png");

pictureBox1.Image = Image.FromFile(imagePath);

Imagesフォルダを使わず、実行ファイルと同じフォルダに画像を置く場合は次のように書きます。

string imagePath = Path.Combine(
    Application.StartupPath, "your_image.png");

pictureBox1.Image = Image.FromFile(imagePath);

短い相対パスの例で動きを確かめたら、この書き方へ進むとよいでしょう。基準の場所を明示しても、画像のコピー漏れやファイル名の間違いが自動で直るわけではありません。

関連記事：C# WinFormsアプリケーションにおける実行ディレクトリからの画像表示

方法3：画像をリソースに登録して使う

アプリに固定で含めたい画像は、プロジェクトのリソースに登録する方法が便利です。プロジェクトのリソースに sampleImage という名前で画像を登録した場合、次のように参照できます。

  1. ソリューションエクスプローラーで対象のプロジェクトを右クリックし、「プロパティ」を選択します。
  2. プロジェクトのプロパティ画面で左側の「リソース」タブを開きます。初めて開く場合は「このプロジェクトにはデフォルトのリソースファイルがありません。作成する場合はここをクリックしてください。」というリンクが表示されるので、クリックしてリソースファイルを作成します。
  3. 画面上部が「イメージ」の表示になっていることを確認し、「追加」の▼から「既存のファイルの追加」を選んで your_image.png を選択します。
  4. 追加された画像は一覧の「名前」列がそのままリソース名になります。コード内で参照しやすい名前（例: sampleImage）にリネームしておくと分かりやすくなります。
  5. プロジェクトを保存すると、Properties.Resources.リソース名 の形でコードから画像を参照できるようになります。
pictureBox1.Image = Properties.Resources.sampleImage;

sampleImage は登録したリソース名に置き換えます。プロジェクト構成によって、生成されるクラス名や名前空間は異なることがあります。

この方法では実行時の画像ファイルのパスを指定しません。通常はビルド時に画像をアプリ側へ組み込み、固定のロゴやボタン用の絵などを管理します。画像の変更には、基本的にリソースの更新と再ビルドが必要です。

設計時にPictureBoxのImageを設定する操作でも、画像をフォームやプロジェクトのリソースとして保存する場合があります。「設計時に設定する」は設定のタイミングで、「外部ファイル／リソース」は画像の持ち方だと分けて考えると整理しやすくなります。

関連記事：【C#】WindowsFormsアプリで画像をリソースに追加する方法

関連記事：Visual Studio における画像リソース管理

外部ファイルとリソースはどう使い分ける？

外部の画像ファイルを読み込む方法と画像をアプリのリソースに組み込む方法の違い
外部ファイルは差し替えや追加に向き、リソースはアプリに固定で含めたい画像に向いています。
観点外部ファイルリソース
画像の置き場所アプリの外のファイル通常はビルド時にアプリへ組み込む
読み込み方ファイルパスを指定するリソース名で参照する
差し替え読み込みを解除した後、ファイルを交換して再読込できる基本的に再ビルドが必要
向いている用途写真、変更する教材画像、ユーザーが追加する画像固定のロゴ、ボタン画像、アプリ共通の絵
配布時の確認画像の同梱と配置を確認するビルドしたアプリに含まれているか確認する

Imagesフォルダは外部ファイルを整理する場所です。一方、OpenFileDialogは読み込むファイルをユーザーが選ぶ仕組みです。同じ外部ファイルでも、「アプリが決まった場所から読む」「ユーザーが場所を選ぶ」という使い分けがあります。

方法4：OpenFileDialogで画像を選んで表示する

写真ビューアのように、実行中にユーザーが自分の画像を選ぶ場合は OpenFileDialog を使います。「画像を開く」ボタンのClickイベントに、次のような処理を記述します。

  1. ツールボックスから Button をフォームにドラッグ＆ドロップして配置し、プロパティウィンドウの Text を「画像を開く」などに変更します。
  2. 配置したボタンをデザイン画面でダブルクリックすると、Click イベントのハンドラーメソッドが自動生成され、コードエディターが開きます。
  3. 生成されたメソッドの中に、次のコードを記述します。
using (OpenFileDialog dialog = new OpenFileDialog())
{
    dialog.Filter = "画像ファイル|*.jpg;*.jpeg;*.png;*.bmp";

    if (dialog.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Image = Image.FromFile(dialog.FileName);
        pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
    }
}

これは流れをつかむための最小例です。DialogResult.OK のときだけ読み込むので、キャンセルした場合は現在の表示を保ちます。選択した画像をプロジェクトに追加する必要はありません。

OpenFileDialogで画像を選びOKを押すとPictureBoxに表示される流れ
OpenFileDialogは画像を選ぶための画面です。選ばれたファイルを読み込み、PictureBoxに設定します。

繰り返し画像を開くアプリでは、自分で読み込んだ古いImageを使い終えたら Dispose() で解放する処理も必要です。Image.FromFile はImageを解放するまで元ファイルをロックします。共有しているリソース画像を不用意に解放しないよう、画像の所有者を区別しましょう。また、拡張子のフィルターだけでは有効な画像とは保証できないので、実用時には読み込み失敗時の処理も加えます。

関連記事：【学習】WinFormsでPictureBoxに画像を表示してみよう — ファイルから画像を開く

学習順：表示する体験から、画像の管理へ

初めて学ぶときは、次の順番で一つずつ試してみましょう。

① PictureBoxの基本：設計時にImageを設定し、SizeModeによる違いを確認します。
② 外部ファイル：1枚の画像をコードで読み込み、コピー設定を確かめます。
③ Imagesフォルダとパス：画像を整理し、相対パスとApplication.StartupPathの違いを学びます。
④ リソース：固定画像を登録し、リソース名で参照します。
⑤ OpenFileDialog：ユーザーが選んだ画像を表示するアプリへ進みます。

PictureBoxの基本から外部ファイル、フォルダとパス、リソース、OpenFileDialogへ進む学習順
まず表示を体験し、その後に画像の置き場所と選び方を学ぶと理解しやすくなります。

つまずきチェック：画像が表示されないとき

1．ファイル名と拡張子
your_image.png と your-image.png は別名です。拡張子が.jpgになっていないか、二重の拡張子になっていないかも確認します。

2．フォルダ名と配置
コードがImagesを指定しているのに、実際はImageというフォルダになっていないか確認します。プロジェクト内だけでなく、実際に読み込む出力先も見ましょう。

3．出力ディレクトリへのコピー
画像ファイルの「出力ディレクトリにコピー」が「コピーしない」になっていないか確認し、設定後に再ビルドします。配布時も画像の同梱を確認してください。

4．パスの基準
相対パスが意図した場所を指しているかを確認します。次のコードで、現在の作業フォルダと実行ファイルのフォルダを比べられます。

MessageBox.Show(
    "現在の作業フォルダ: " + Environment.CurrentDirectory +
    "\n実行ファイルのフォルダ: " + Application.StartupPath);

5．PictureBoxの表示設定
Imageに画像を設定したか、PictureBoxに十分な大きさがあるか、Visibleがtrueかを確認します。画像の一部しか見えない場合はSizeModeをZoomにして試しましょう。

6．画像の形式・使用状態
画像が破損していないか、対応形式か、読み込み中のファイルを上書きしようとしていないかを確認します。エラーが出る場合は例外の内容も読みましょう。

画像が表示されないときにファイル名、配置、コピー設定、パス、表示設定、画像の状態を確認するチェックリスト
表示されないときは、画像の場所と名前を確かめてから、読み込みと表示の設定を順に見直しましょう。

目的に合わせて選んでみよう

まず表示を試すならPictureBoxの設計時設定、あとから交換する画像なら外部ファイル、複数の画像を整理するならImagesフォルダ、固定画像ならリソース、ユーザーに選ばせるならOpenFileDialogが出発点になります。

どれか一つがいつでも正解というわけではありません。「誰が画像を用意するか」「あとから変更するか」「どこから読み込むか」を考えると、必要な方法を選びやすくなります。

技術補足の参照：Microsoft Learn：Windowsのファイルパス形式／Microsoft Learn：Image.FromFile

訪問数 15 回, 今日の訪問数 15回

広告

C#,PictureBox,WindowsFormアプリ

Posted by hidepon