C#・WinFormsでPictureBoxに画像を表示する｜コード不要の設計時登録
このチュートリアルでは、コードを書かずに、WinFormsのPictureBoxに画像を表示する方法を学びます。Visual StudioのデザイナーでImageプロパティに画像を登録し、SizeModeをZoomに設定するだけで、フォームを起動したときに画像が表示されます。
初めてPictureBoxを使う人向けの手順です。OpenFileDialogやファイル操作の知識は必要ありません。
このチュートリアルで作るもの
- Windows フォーム アプリにPictureBoxを配置する
- Imageプロパティで画像をリソースとして登録する
- 画像の縦横比を保って表示し、実行して確認する
Windows版Visual Studioと「.NET デスクトップ開発」の環境、表示したい画像（PNG・JPEG・BMPなど）を用意してください。ここではWindows Forms アプリ (.NET Framework)を使います。Visual Studioのバージョンやプロジェクトの種類によって、画面の名称は多少異なります。
プロジェクトを作り、Form1を開く
Visual Studioの「新しいプロジェクトの作成」で、C#のWindows Forms アプリ (.NET Framework)を選びます。
- ソリューション名：PictureBoxImageSample
- プロジェクト名：PictureBoxImageSample
作成するとForm1のデザイナーが開きます。白いフォームがアプリの画面です。コードが表示されている場合は、ソリューションエクスプローラーのForm1.csから「デザイナーの表示」を選びます。
すでに学習用のソリューションがある場合は、それを右クリックして「追加」→「新しいプロジェクト」でも作成できます。画像ビューアの教材を続けて学ぶ場合は、プロジェクト名をImageViewerとしても構いません。
PictureBoxを配置して大きさを調整する
「ツールボックス」からPictureBoxをフォームへドラッグ＆ドロップします。ツールボックスが見つからない場合は「表示」メニューから開いてください。
配置したPictureBoxを選び、マウスで横300・縦200程度の見やすい大きさに広げます。NameはpictureBox1のままで進めます。
図はImageViewerという名前のプロジェクトでの配置例です。PictureBoxの配置とNameの設定は、PictureBoxImageSampleでも同じです。
Imageプロパティで画像を登録する
- フォーム上のpictureBox1を選択します。
- 「プロパティ」ウィンドウでImageを探します。表示されていなければF4キーを押します。
- Imageの値の欄にある…ボタンを押し、リソースの選択画面を開きます。
- 「ローカル リソース」を選べる画面では、それを選んでインポートを押します。
- 表示したい画像ファイルを選び、開く→OKで確定します。
デザイナーのPictureBoxに画像が表示されれば登録完了です。画面によっては「プロジェクト リソース ファイル」からインポートします。複数のフォームで同じ画像を使うときは、プロジェクト共通のリソースとして管理する方法も使えます。
今回のように画像をリソースとして取り込む場合、画像ファイルをあらかじめ「既存の項目」で追加したり、「出力ディレクトリにコピー」を設定したりする必要はありません。実行時に外部画像ファイルをパスで読み込む方法とは、画像の管理方法が異なります。
SizeModeをZoomにして表示を整える
pictureBox1を選択したまま、プロパティのSizeModeをZoomへ変更します。縦横比を保ったまま、PictureBoxの表示領域に収まるように拡大・縮小されます。
| 値 | 表示のされ方 |
|---|---|
| Normal | 元の大きさで左上に表示します。画像が大きいとはみ出した部分が見えません。 |
| StretchImage | PictureBoxの幅と高さに合わせて伸縮します。画像の縦横比が変わることがあります。 |
| Zoom | 縦横比を保ち、画像全体が収まるように表示します。最初はこの設定がおすすめです。 |
| CenterImage | 画像を元の大きさのまま中央に表示します。 |
| AutoSize | 画像の大きさに合わせてPictureBox自体のサイズを変更します。 |
実行して画像の表示を確認する
F5キーまたは「開始」ボタンで実行します。フォームの中にPictureBoxがあり、登録した画像が表示されれば完成です。今回は画像表示用のコードを自分で書く必要はありません。デザイナーで設定したImageがフォームの初期化時に反映されます。
よく使う設定と、表示されないときの確認
| 項目 | 役割・設定例 |
|---|---|
| Name | コードから参照するときの名前です。この教材ではpictureBox1を使います。 |
| Image | 表示する画像を登録します。 |
| SizeMode | 画像の収め方を指定します。まずはZoomにします。 |
| BorderStyle | FixedSingleにすると枠線が付き、PictureBoxの範囲が分かりやすくなります。 |
- 画像が切れる：SizeModeがZoomになっているか確認します。
- 画像がゆがむ：StretchImageからZoomへ変更します。
- 何も表示されない：PictureBoxを選び直し、Imageに画像を登録できているか確認します。
- デザイナーでは見えるのに実行時には見えない：実行しているプロジェクトとフォームが正しいか確認します。すでにコードを書いている場合は、Imageを上書きしていないかも確認します。
次のステップ：実行時に画像を選ぶ
設計時の登録ができたら、次はOpenFileDialogで画像ファイルを選んで表示するチュートリアルへ進みましょう。起動前に画像を固定する方法から、ユーザーが実行中に画像を選ぶ方法へ発展させます。
続きの教材でプロジェクト名がImageViewerになっていても、今回作成したPictureBoxImageSampleで同じ操作を試せます。pictureBox1を配置したForm1を使って進めてください。
さらに練習するなら、複数のPictureBoxの配置、クリックイベント、画像の保存、クリップボードからの貼り付け、ドラッグ＆ドロップでの読み込みなどに挑戦できます。
まとめと関連する教材
基本はPictureBoxを置く → Imageで画像を登録する → SizeModeをZoomにする → 実行して確認するの4段階です。画像をいつ、どこから読み込むかに応じて、次の教材も参考にしてください。
参考：Microsoft Learn：コントロールに画像を表示する方法