【学習】WinFormsでPictureBoxに画像を表示してみよう — 設計時に画像を登録する
これまでの学習では、
- テキストファイルの保存・読み込み
- ダイアログでファイルを選ぶ（OpenFileDialog）
という形でファイル操作を学んできました。
しかし、ファイルにはもう一つの種類があります。
画像ファイル
という仕組みです。jpg、png、bmp などの画像を、PictureBox というコントロールで表示できます。
今回は PictureBox に、設計時（デザイナー） で画像を登録して表示するアプリを作ります。コードを書かずに、プロパティの設定だけで画像を表示できます。
今日作るもの
フォームを起動すると、あらかじめ登録した画像が PictureBox に表示されます。
前提
ダイアログで保存・開くのチュートリアルで OpenFileDialog の使い方を学んでいることを想定しています。まだの場合は、先にそちらを学習してください。
※前提なしで PictureBox だけを学びたい場合は、いちばんシンプルなチュートリアル（05） を参照してください。
ソリューションとプロジェクトを作る
FileSample ソリューションに、新しいプロジェクトを追加します。
- ソリューションエクスプローラーでソリューションを右クリック → 追加 → 新しいプロジェクト
- テンプレート: Windows Forms アプリ (.NET Framework)
- プロジェクト名: ImageViewer
作成すると Form1 が表示されます。
フォームに配置するコントロール
フォームに PictureBox を配置します。
| コントロール | 名前 |
|---|---|
| PictureBox | pictureBox1 |
ツールボックスから PictureBox をドラッグしてフォームに配置し、適当なサイズに調整してください。
画像をプロジェクトに追加する
設計時に画像を登録するには、まず画像ファイルをプロジェクトに含める必要があります。
- ソリューションエクスプローラーでプロジェクト（ImageViewer）を右クリック
- 追加 → 既存の項目 を選択
- 表示したい画像ファイル（.jpg、.png、.bmp など）を選んで 追加
- 追加した画像ファイルのプロパティで 出力ディレクトリにコピー を 常にコピー に設定（任意だが、実行時に画像が見つからない場合に有効）
PictureBox の Image プロパティを設定する
- フォーム上の PictureBox をクリックして選択
- プロパティウィンドウで Image プロパティを探す
- Image の右側にある （なし） または ▼ をクリック
- リソースの選択 または プロジェクトリソースファイルの選択 を選ぶ
- ローカルリソース タブで インポート をクリック
- 先ほどプロジェクトに追加した画像ファイルを選択して 開く
- 一覧に表示された画像を選んで OK をクリック
これで PictureBox に画像が設定されます。
SizeMode プロパティを設定する
画像の表示の仕方を調整します。
- PictureBox を選択した状態で、プロパティウィンドウの SizeMode を探す
- Zoom を選択する（縦横比を保ったまま拡大縮小されます）
| 値 | 説明 |
|---|---|
| Normal | 画像の元のサイズ（はみ出す場合あり） |
| StretchImage | PictureBox の幅・高さに合わせて伸縮 |
| Zoom | 縦横比を保ったまま表示領域に収める |
| CenterImage | 中央に配置（元のサイズ） |
実行して確認する
F5 キーまたは 開始 ボタンでプログラムを実行します。
フォームが表示され、設計時に登録した画像が PictureBox に表示されていれば成功です。
プログラムの流れ
設計時登録のため、コードは不要です。
フォームを起動
↓
PictureBox に設定済みの Image が自動的に表示されるPictureBox とは
PictureBox は画像を表示するためのコントロールです。
Imageプロパティに画像を設定すると表示される- 設計時（プロパティウィンドウ）でも、実行時（コード）でも設定できる
SizeModeで表示の仕方を変えられる（Normal / StretchImage / Zoom など）
重要ポイント
PictureBox は「画像を表示する」 ためのコントロールです。
- 設計時に
Imageプロパティを設定すれば、コードなしで画像を表示できる - 画像ファイルはプロジェクトに追加し、リソースとしてインポートする
SizeModeで表示の見た目を調整できる- 次回のチュートリアルでは、実行時に OpenFileDialog で画像を選んで表示する方法を学びます
これで設計時登録による画像表示の基本が完成します。
発展アイデア
PictureBox の設計時登録をマスターしたら、次のステップに進めます。
- 実行時に OpenFileDialog で画像を開く（次のチュートリアル）
- 画像の保存（SaveFileDialog と
pictureBox1.Image.Save()） - クリップボードからの貼り付け（
Clipboard.GetImage()） - ドラッグ＆ドロップで画像を読み込む
画像表示は写真管理アプリやビューアの基本です。