本記事ではC#.NETでPictureBoxなどのコントロールを動的に生成する方法を紹介します。
開発環境はVisual Studio 2022を使用しています。
デザイナーを使うことで視覚的にフォームを作り込むことができますが、同じようなボタンを複数個設置したい場合（例えばカレンダーの日付とか）やユーザーの操作によってコントロールを追加したい場合など、動的に生成したいケースは多いかと思います。
コントロールを動的に生成できることで、実現できる機能の幅が大きく広がりますので、初心者の方もぜひお試しいただけたらと思います。
①PictureBoxを5×3個生成
まずは、下記のようにして、フォーム内に横方向に5つ、縦方向に3つの合計15個のPictureBoxを一挙に生成してみます。本関数をInitializeComponentの直後などで呼び出してあげると、起動と同時に生成してくれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
private void createPictbox() { int pictBoxWidth = 200; int pictBoxHeight = 150; int margin = 10; int startX = 10; int startY = 10; int countX = 5; int countY = 3; for (int y = 0; y < countY; y++) { for (int x = 0; x < countX; x++) { PictureBox pictBox = new PictureBox(); pictBox.Name = $"pictBox_{x + 1}_{y + 1}"; pictBox.Width = pictBoxWidth; pictBox.Height = pictBoxHeight; pictBox.Left = startX + x * (pictBoxWidth + margin); pictBox.Top = startY + y * (pictBoxHeight + margin); pictBox.BorderStyle = BorderStyle.FixedSingle; pictBox.SizeMode = PictureBoxSizeMode.StretchImage; this.Controls.Add(pictBox); } } } |
上の書き方でもいいのですが、for文の中を下記のように書き換えた方が見やすくなると思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
PictureBox pictBox = new() { Name = $"pictBox_{x + 1}_{y + 1}", Width = pictBoxWidth, Height = pictBoxHeight, Left = startX + x * (pictBoxWidth + margin), Top = startY + y * (pictBoxHeight + margin), BorderStyle = BorderStyle.FixedSingle, SizeMode = PictureBoxSizeMode.StretchImage }; this.Controls.Add(pictBox); |
各パラメータの説明は下記のとおりです。
| 項目 | 説明 |
|---|---|
| Name | コントロール名を指定しておくことで、後で操作がしやすくなります |
| Width | 幅を指定します |
| Height | 高さを指定します |
| Left | 左端のX座標指定します |
| Top | 上端のY座標を指定します |
| BorderStyle | 罫線の形式です。FixedSingleで一重の実線になります |
| SizeMode | 画像サイズの調整方法です。StretchImageで枠サイズに合わせてくれます |
表示してみると下図のようになります。（フォームサイズは適宜調整してください）
手作業で置くより楽そうですね。
続いて画像も一緒に貼り付けてみましょう。
②PictureBoxに画像を埋め込み
ここでは、先ほど生成したPictureBoxに画像を埋め込んでいきます。今回の画像はリソースマネージャーに登録したものを使うことにします。(こちらの方がやや癖があるため)
リソースマネージャーの使い方については以前の記事を参照してください。
以前登録した「リソースマネージャー1」という画像を埋め込んでみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
PictureBox pictBox = new() { Name = $"pictBox_{x + 1}_{y + 1}", Width = pictBoxWidth, Height = pictBoxHeight, Left = startX + x * (pictBoxWidth + margin), Top = startY + y * (pictBoxHeight + margin), BorderStyle = BorderStyle.FixedSingle, SizeMode = PictureBoxSizeMode.StretchImage, Image = Properties.Resources.リソースマネージャー1 }; this.Controls.Add(pictBox); |
1行だけpictBox.Imageを追加しました。
表示すると下図のようになります。
この辺りは特に難しいところはないと思います。
では、次は各PictureBoxに別の画像を埋め込みたいと思います。
③PictureBoxに動的に画像を埋め込み
今度は同じ画像ではなく、PictureBoxの位置に対応した画像を埋め込んでみます。左上を(x=1, y=1)、右下を(x=5, y=3)とした場合に、画像のリソース名をそれぞれ1_1、5_3のように設定しておきます。（あらかじめリソースマネージャーに登録しておきます）
下記のようなコードを書きます。（パラメータは変更ないので割愛）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
for (int y = 0; y < countY; y++) { for (int x = 0; x < countX; x++) { string resourceName = $"{x + 1}_{y + 1}"; // ResourceManager で動的に取得して Image にキャスト Image? img = Properties.Resources.ResourceManager.GetObject(resourceName) as Image; PictureBox pictBox = new() { Name = $"pictBox_{x + 1}_{y + 1}", Width = pictBoxWidth, Height = pictBoxHeight, Left = startX + x * (pictBoxWidth + margin), Top = startY + y * (pictBoxHeight + margin), BorderStyle = BorderStyle.FixedSingle, SizeMode = PictureBoxSizeMode.StretchImage, Image = img }; this.Controls.Add(pictBox); } } |
“resourceName”でリソース名を動的に指定して、”img”でImageオブジェクトを生成します。
Imageの後の”?”はnullを許容（nullの場合は何も表示されない）するという意味なので、後でnull判定するなら”?”は不要です。
あとはpictBox.Imageに”img”を代入してあげるだけですね。
実行結果は下図のようになります。
このような処理をデザイナー(手作業)でやろうと思うとなかなか大変です。
また、ユーザーの操作により画像が変化する場合には、今回のテクニックは必須となるので覚えておいて損はありません。
最後におまけで、今回はPictureBoxの初期化時に画像を埋め込みましたが、何等かの処理中に指定するコントロールの画像のみ変更したい場合などは下記のようなコードを書くことで実現できます。（null判定等は省略）
|
1 2 3 4 |
string resourceName = "1_1"; PictureBox pictBox = Controls["pictBox_5_3"] as PictureBox; Image img = Properties.Resources.ResourceManager.GetObject(resourceName) as Image; pictBox.Image = img; |
これでコントロール名「pictBox_5_3」のPictureBoxにリソース名「1_1」の画像が埋め込まれます。
本記事で紹介した内容は他のコントロールでも同様の考え方が使えますので、工夫次第で様々な機能を実現することができます。ぜひ色々お試しください。
以上、最後まで読んでいただきありがとうございました。
コメント