C#:リソースに設定した画像を表示する

リソースに設定した画像を表示する実行イメージ画像C#
スポンサーリンク

この記事では例としてC#を使ってアプリに画像ファイルを埋め込む場合のリソースの設定と使い方について説明します。

Windowsアプリ作成にはリソースという言葉が時々出てきます。
リソースは、英語でresource(=資源)を表しています。
この場合は、アプリから利用する画像や音声ファイルなどの素材をイメージすると分かりやすいかもしれません。
ただWindowsアプリから利用できるリソースは、内部リソース、外部リソースと色々あるようです。
今回はアプリケーション内部に画像をリソースとして設定して使ってみます。

この方法は、時に「アプリに画像を埋め込む」などという言い方をするかもしれません。
画像を埋め込むと基本的には実行ファイルのサイズがその分大きくなります。~.exeファイルの中に画像ファイルも含まれている感じです。

スポンサーリンク

プロジェクトの作成

ファイル >新規作成 >プロジェクト… からWindowsフォームアプリケーションを選択してください。

プロジェクト名はリソースに設定した画像を表示するとしておきます。

フォームにピクチャボックスを1つ貼り付けてください。
大きさは適当で大丈夫です。
リソースに設定した画像を表示するフォームデザインの画像

今回は、ピクチャボックスの大きさをフォームの大きさに合わせてフィットさせて画像を表示させようと思います。

フォームの何もないところでダブルクリックしてフォームロードイベントを作成します。
以下のように記述してください。

private void Form1_Load(object sender, EventArgs e)
{
	this.Text = ProductName;
	// ピクチャボックスの設定
	pictureBox1.Dock = DockStyle.Fill;	// フォームいっぱいに貼り付ける
	pictureBox1.SizeMode = PictureBoxSizeMode.Zoom; // 縦横比を変えずに引き延ばす
}

ピクチャボックスのDockプロパティFillにすることで画面いっぱいに張り付くようになります。
関係ない話ですが、テキストボックスのDockプロパティをFillにするとメモ帳っぽくなります。

次に、ピクチャボックスのSizeModeプロパティPictureBoxSizeMode.Zoomを設定します。
ウインドウの大きさを変えた場合、合わせて画像も伸び縮みするようになります。(現段階では、画像は表示されません

リソースに設定した画像を表示するウインドウの伸び縮みに対応の画像

ちなみにSizeModeにPictureBoxSizeMode.StretchImageを指定すると縦横比に関係なく画像が伸び縮みするのに対し、PictureBoxSizeMode.Zoomにすると縦横比を維持したまま伸び縮みしてくれます。

リソースに画像を埋め込む手順

kero.bmpというデスクトップ上の画像ファイルをリソースに設定する手順を示します。

ソリューションエクスプローラのPropertiesをダブルクリックしてください。

リソースに設定した画像を表示する_リソース管理画面表示の画像
プロジェクトプロパティ画面が表示されます。
左側のメニューからリソースタブを選択します。

これがリソース管理画面です。
ここにデスクトップにある画像ファイルkero.bmpをドラッグ&ドロップします。

リソースに設定した画像を表示する_リソース追加の画像

これだけです。
このドラッグ&ドロップで次の2点が実行されます。

・画像ファイルをプロジェクトのResourcesフォルダに追加する
・追加したファイルのリソース名称を自動的に設定

リソースに設定した画像を表示する_リソースファイルとリソース名の画像

とりあえず設定だけでOKの方は次の項を読み飛ばしても構いません。
リソースのプロジェクトでの管理方法を詳しく知りたい方は次の項をご覧ください。

リソース名とリソース画像に指定するファイルの管理

リソースに画像ファイルを設定した場合、プロジェクトにはその画像ファイルがコピーされます。
コピーされる位置はプロジェクトフォルダ内のResourcesというフォルダになります。

リソースに設定した画像を表示する_リソースファイルの保存場所の画像

コピーした画像ファイルの管理は、ソリューションエクスプローラのプロジェクトにあるPropertiesを展開して表示されるResources.resxファイルで行っています。
階層をたどっていくと今回追加した画像ファイルがkeroというリソース名で登録されているのが分かります。

リソースに設定した画像を表示する_リソースの管理

ドラッグ&ドロップで画像を追加した場合、自動的に登録されるリソース名は、ファイル名から拡張子を抜いた名前になるようです。
先ほどドラッグ&ドロップで行った手順を一からやってみると以下のようになります。
試す方は、まず一度Resourcesフォルダの画像ファイル(例ではkero.bmp)とPropertiesのリソース管理画面にあるリソースアイコン(例ではkero)をそれぞれ右クリックして削除してください。(先ほど登録したリソースが完全に削除されます)

次にソリューションエクスプローラのResourcesフォルダを右クリックします。

追加> 既存の項目…

を選択して既存の項目追加ウインドウを表示させてください。

リソースに設定した画像を表示する_リソースフォルダに既存の項目を追加する画像

ファイル名入力の右側からイメージファイルを選択すると画像ファイルが選択できるようになります。(追加できる画像は、PNG形式やJPEG、GIF等も選べるようです)

画像ファイルを選択してください。

リソースに設定した画像を表示する_画像の追加の画像

この時点でリソース管理画面を表示させても何も存在していません。

リソースとして使うには、

リソースに設定した画像を表示する_追加した画像をリソースに設定する画像

ソリューションエクスプローラの画像ファイル名をリソース管理画面にドラッグ&ドロップします。
これで、PropertiesのResources.resxファイルに自動的にソースコードが追加されプロジェクトから利用できるようになります。(リソース名は自動で設定されます)

リソースに設定した画像を表示する_リソースに設定後の画面の画像

リソース名を変更したい場合は、画像アイコンを右クリックして

名前の変更

を選択します。

リソースに設定した画像を表示する_リソース名の変更画像

これで、PropertiesのResources.resxファイルが上書きされ、新しいリソース名をプロジェクトから利用できるようになります。

ピクチャボックスにリソース画像を表示する

ピクチャボックスにリソースに設定した画像を表示する方法は、簡単です。

ピクチャボックスのImageプロパティにProperties.Resources.ピリオドまで打ち込むと選択肢が表示されます。
その中から、先ほど追加したリソース名を選択するだけです。

リソースに設定した画像を表示する_ピクチャボックスにリソース名を設定の画像

// ピクチャボックスにリソース画像を設定
pictureBox1.Image = Properties.Resources.kero;

アプリを実行時にピクチャボックスにリソース画像を表示させてみます。
上記のコードをフォームロードイベント内に追加します。

private void Form1_Load(object sender, EventArgs e)
{
	this.Text = ProductName;
	// ピクチャボックスの設定
	pictureBox1.Dock = DockStyle.Fill;	// フォームいっぱいに貼り付ける
	pictureBox1.SizeMode = PictureBoxSizeMode.Zoom; // 縦横比を変えずに引き延ばす

	// ピクチャボックスにリソース画像を設定
	pictureBox1.Image = Properties.Resources.kero;
}

実行結果です。
リソースに設定した画像を表示する実行イメージ画像

今回のプログラム(Form1.cs)全体

全体のコードを示します。

コメント