C#.NET PictureBoxに画像を表示させる2通りの方法

本記事ではC#.NETでPictureBoxを使って画像を表示させる方法を2通りに分けて紹介します。
なお、開発環境はVisual Studio 2005以上(当方は2022)を使用している前提での方法です。

1つ目はリソースマネージャーを使って実行ファイルに埋め込む方法で、2つ目は画像ファイルパスから直接読み込む方法です。

これら2つの方法は、どちらが良いというものではなく、目的や用途に合わせて使い分けることで信頼性や保守性が高まり、ユーザーにとって使いやすいアプリケーションの実現につながります。

①PictureBoxをフォームに配置
②リソースマネージャーを使う方法
③ファイルパスから読み込む方法
④まとめ

①PictureBoxをフォームに配置

今回はデザイン(GUI)で配置する方法のみ扱います。動的に置く方法については別途記事を書こうと思います。

まずはPictureBoxを置きたいフォームのデザイン画面を開いて左端のツールボックスを開いて「共通コントロール」→PictureBoxを選択します。(上の検索画面にPictと入力しても出てきます)

ツールボックスが左側に表示されていない場合は、表示メニューからツールボックスを選択するか、Ctrl+Alt+Xでも表示できます。

この状態でフォーム上の任意の位置に置いていきます。今回は下記のようにしました。
(説明のためにラベルも置いています)

では、まずはリソースマネージャーを使う方法から見ていきましょう。

②リソースマネージャーを使う方法

リソースを登録するところからいきます。

メニューの「プロジェクト」→「プロジェクトのプロパティ」を選択すると次のような画面が出てきます。

左の方の「リソース」を選択するとリソースの管理画面が表示される・・・はずだったのですが、どうやら仕様が変わったようで、表示されない場合は下の画像の「アセンブリリソースを作成する/開く」をクリックしてください。

ソリューションエクスプローラーにPropaties→Resources.resxが追加されます。古いバージョンでは上の方にある「リソースの追加」がそのまま使えると思います。

新しいバージョンでは、左上の＋マークでリソースの追加ができるようなのでやってみましょう。

タイプをImageに設定するとファイルを選択できるようになるので、任意の画像ファイルを選択します。画像がプロジェクトに置かれていない場合は、「プロジェクトのリソースディレクトリにコピーする」にチェック(デフォルト)を入れれば自動でコピーしてくれます。最後に追加をクリックするとリソースが追加されます。

これでリソースを使う準備が整いました。ここからコードを書いていきます。

コードを表示するには、ソリューションエクスプローラーで右クリックして「コードの表示」を選択するか、デザインウィンドウを選択した状態でF7を押します。

今回はSetImageという関数を作って、そこに下記のようなコードを書きました。

SetImageは起動時に一度だけ呼び出されるようにしています。

namespace PictureBoxTest
{
    public partial class MainWindow : Form
    {
        public MainWindow()
        {
            InitializeComponent();
            SetImage();
        }

        private void SetImage()
        {         
            this.pictBoxResource.Image = Properties.Resources.リソースマネージャー1;
            this.pictBoxResource.SizeMode = PictureBoxSizeMode.StretchImage;
        }
    }
}

namespace PictureBoxTest

{

public partial class MainWindow : Form

{

public MainWindow()

{

InitializeComponent();

SetImage();

}

private void SetImage()

{

this.pictBoxResource.Image = Properties.Resources.リソースマネージャー1;

this.pictBoxResource.SizeMode = PictureBoxSizeMode.StretchImage;

}

thisはこのフォーム自体で、その中にあるpictBoxResourceという名前を付けたPictureBoxのImageプロパティにリソースを代入するというコードですね。

正常にリソースを追加できていれば、下記のようにResources.まで入力するとメンバーが表示されるので、追加したリソース名を選択するのが間違いが少なくおすすめです。

SizeModeを指定しないとオリジナルサイズで左上起点に貼り付けられ、PictureBoxからはみ出たり見づらくなるかもしれないので、StretchImageモードに設定しています。(この辺は用途に合わせて変更してください)

ビルドして起動すると下記のように表示されます。

また、画像の差し替えをする場合は、再度ビルドが必要となります。リソースマネージャーの画像を変更するか、追加した場合は新たに追加されたリソース名でコードも更新する必要があります。

再ビルドして起動すると下記のように画像が変更されます。

このように、リソースマネージャーを使う場合、画像を差し替える際はビルドが必要になります。

これだけ見ると微妙な機能に感じるかもしれませんが、画像は実行ファイルに埋め込まれるため、配布の際は実行ファイルのみで済みます(他に外部ファイルを使っていなければ)。

使い道としては、アイコン画像などユーザーが更新することのない画像を扱う場合に適しています。
ただし、画像をたくさん埋め込むとその分実行ファイルの容量も増えてしまうのでご注意ください。

③ファイルパスから読み込む方法

続いてファイルパスから読み込む方法です。

まずは画像の保存場所を決めます。

今回はプロジェクトのトップ(binとかobjとかあるところ)にImagesフォルダを作ることにします。下記のイメージです。

Imagesフォルダの直下に「ファイルパス.jpg」という画像を置いておきます。

これで準備ができたのでコードを書いていきます。

下記のようにコードを追加します。

private void SetImage()
{         
    // Resource manager
    this.pictBoxResource.Image = Properties.Resources.リソースマネージャー2;
    this.pictBoxResource.SizeMode = PictureBoxSizeMode.StretchImage;

    // File path
    this.pictBoxFilePath.Image = Image.FromFile(@"..\..\..\Images\ファイルパス.jpg");
    this.pictBoxFilePath.SizeMode = PictureBoxSizeMode.StretchImage;
}

private void SetImage()

{

// Resource manager

this.pictBoxResource.Image = Properties.Resources.リソースマネージャー2;

this.pictBoxResource.SizeMode = PictureBoxSizeMode.StretchImage;

// File path

this.pictBoxFilePath.Image = Image.FromFile(@"..\..\..\Images\ファイルパス.jpg");

this.pictBoxFilePath.SizeMode = PictureBoxSizeMode.StretchImage;

}

リソースマネージャーを使った方法の下にコードを追記しました。

System.DrawingクラスのImage.FromFileメソッドを使用します。
ファイルの頭にSystem.Drawingのusingディレクティブを書いているなら、Imageの前のSystem.Drawingは省略できます。

Image.FromFileメソッドの引数にはファイルパスを指定します。今回は相対パス(絶対パスも可)にしています。実行ファイルから見て..\..\..\なので3つ上のフォルダを指します。
※開発環境によって実行ファイルの場所は異なることがありますので、環境に合わせてパスを指定してください。

ビルドして表示すると下記のように表示されます。

それでは画像を差し替えてみます。コードは変えずに、同名のファイルで置き換えます。

今度は再ビルドせずに実行ファイルから起動してみます。

無事に置き換わりました。

このようにファイルパスを使う方法であれば、ユーザーが画像を任意に更新できます。ただし、配布の際は画像ファイルの置き場所(実行ファイルから見てどこか)を考慮する必要があるためご注意ください。

④まとめ

本記事では、PictureBoxに画像を表示させる方法として、リソースマネージャーとファイルパスを使う方法の2通りを紹介させていただきました。どちらの方法も一長一短のため、用途に合わせて使い分けます。

ポイントを簡単にまとめると下表のようになります。

方法	リソースマネージャー	ファイルパス
更新時のビルド	要	不要
用途	固定の画像	ユーザーに更新される画像
画像の配布	不要	必要な場合あり
実装	画像更新時は要メンテ	パスの管理が必要