PictureBoxを2つ重ねて表示したい

Question

前提・実現したいこと

基本的なことかもしれないのですが、どれだけ調べてもうまく行かないので
質問させていただきます。
仮にA, BというPictureBoxがあったとして
AのPictureBoxを背景として使って（棚の写真を使おうとしています）
BのPictureBoxをその上に重ねて表示したい（棚の中にある本やモノ）
と思っています。

発生している問題・エラーメッセージ

エラーメッセージがあるわけではなく、背景であるAのPictureBoxは表示されるが、BのPictureBoxをその上に表示しようとすると、灰色一色になる。
そもそもAのPictureBoxの上ではなく別の場所に表示させても表示されないので、別の問題かもしれませんが、表示されないこと自体よくわからないので、質問させていただきます。

該当のソースコード

    'pb_tanaに棚の写真を背景として表示
    Private Sub pb_tana_Paint(sender As Object, e As PaintEventArgs) Handles pb_tana.Paint
        pb_tana.SizeMode = PictureBoxSizeMode.Zoom
        pb_tana.Image = System.Drawing.Image.FromFile("C:\1.jpg")
    End Sub

    '棚の上のpb_a1に本を表示
    Private Sub pb_a1_Paint(sender As Object, e As PaintEventArgs) Handles pb_a1.Paint
           pb_a1.SizeMode = PictureBoxSizeMode.Zoom
            pb_a1.Image = System.Drawing.Image.FromFile("C:\2.jpg")
    End Sub

試したこと

pb_a1のParentプロパティはpb_tanaにしています。
またpb_a1のback_colorプロパティはtransparentにしています。

補足情報（FW/ツールのバージョンなど）

プロジェクトの種類:WindowsFormApplication
フレームワーク:.NET Framework 4.7.2

Comments

[退会済みユーザー]

プロジェクトの種類（WPFか、WindowsFormsか）と、.NET Frameworkや.NET Coreのバージョン含めて補足情報に追加してください。ソースコードはインデントが崩れて読み辛くなるので、コードの挿入で記入してください。

[hanbee.com]

見直しを行いました。

Answer 1

まずPictureBoxのImageプロパティに画像をセットするのであればPaintイベントにて行うのは間違いです。
フォームのイニシャライズ時などの初期化時に行うべきです。
Paintイベントで行うと、再描画が必要になる度に実行されるので適切ではありません。

また「pb_a1のback_colorプロパティはtransparentにしています。」とのことですが
backcolorプロパティとは「コントロールの背景色」のことです。
Imageプロパティに画像が設定されていると、そのコントロールの背景色の上に設定した画像が描画されます。
ようは「コントロールの背景色」と「画像の背景色」は全く別のものとなります。
このあたりを勘違いされているのではないでしょうか？
このことより、コントロールの背景色を透明にしたとしても、画像の背景色が透明ではないので、重ね合わせたときは背景は透過されません。
jpegは透過対応していないので、透過対応している画像ファイルを設定すれば背景色は透過します。

背景画像

玉１（JPEGファイル）

玉２（背景透過したPNGファイル）

を用意し

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Dim backPic As New PictureBox With {.Location = New Point(0, 0),
                                            .Size = New Size(200, 200),
                                            .Image = Image.FromFile("d:\test\tana.jpg"),
                                            .SizeMode = PictureBoxSizeMode.Zoom}

        Dim tamaPic1 As New PictureBox With {.Name = "tama1",
                                            .Location = New Point(10, 10),
                                            .Size = New Size(40, 40),
                                            .BackColor = Color.Transparent,
                                            .Image = Image.FromFile("d:\test\tama.jpg"),
                                            .SizeMode = PictureBoxSizeMode.Zoom}

        Dim tamaPic2 As New PictureBox With {.Name = "tama2",
                                            .Location = New Point(50, 50),
                                            .Size = New Size(40, 40),
                                            .BackColor = Color.Transparent,
                                            .Image = Image.FromFile("d:\test\tama2.png"),
                                            .SizeMode = PictureBoxSizeMode.Zoom}

        Me.Controls.Add(backPic)
        backPic.Controls.Add(tamaPic1)
        backPic.Controls.Add(tamaPic2)

        AddHandler tamaPic1.Click, AddressOf pic_Click
        AddHandler tamaPic2.Click, AddressOf pic_Click


    End Sub

    Private Sub pic_Click(sender As Object, e As EventArgs)
        Debug.Print(sender.name)
    End Sub

End Class

上記ソースを実行した結果がこちらです。

クリックイベントも設定してありますので、玉をクリックするとクリックしたPictureBoxの名前がデバッグ出力されます。
この方法の場合、PictureBoxのクリックイベントなので背景部分をクリックしても反応します。

Comments

[hanbee.com]

JPGとPNGとでは透過性が異なるんですね。勉強になりました。ありがとうございます。
背景色に対する理解が間違っていたようですね
実際、ピクチャーボックスの上にピクチャーボックスを重ねるのはやめましたが、ラベルを重ねるつもりなので、参考にさせていただこうと思っています。

Answer 2

PictureBoxと書いてあるので、恐らくWindowsFormsプロジェクトと推測しますが、まず前提として、WindowsFormsのコントロールは透明・半透明にして重ねて使う事を考慮されていません。
（小細工したらそれっぽい表示は出来なくもないですが、破綻しやすいので全くオススメしません）

ちなみに、WPFのImageの場合は、特に何も考えずとも透過を考慮して重ね合わせを行ってくれるので、画像の重ね合わせ的な事をしたいのであれば、正直WPFをオススメします。
下記画像は、WPFプロジェクトのデザイナー画面で画像を読み込んで重ね合わせたものです。

前提を踏まえた上で、どうしても実現したい事をWindowsFormsのPictureBoxでやるのであれば、あらかじめ重ね合わせた画像を作成し、それをPictureBoxに設定する感じになると思います。
下記コードは、フォーム起動時に本棚と本の画像を重ね合わせて表示させた例です。

Public Class Form1

    Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)


        '画像読み込み
        Dim bmpTana = DirectCast(Image.FromFile("c:/test/tana_empty.png"), Bitmap)　'本棚画像
        Dim bmpBook = DirectCast(Image.FromFile("c:/test/book_tosyokan_label_green.png"), Bitmap) '本画像

        '本棚画像の上に本画像を描画
        Using graphic = Graphics.FromImage(bmpTana)
            graphic.DrawImage(bmpBook, 0, 0)
        End Using

        '本を描きこんだ本棚画像をPictureBoxに設定
        '（PictureBox.Imageに既に画像が設定されていたら解放）
        Dim oldImage = PictureBox1.Image
        PictureBox1.Image = bmpTana
        If oldImage IsNot Nothing Then
            oldImage.Dispose()
        End If

        '本画像を解放（本棚画像はPictureBox内で使用中なので解放してはいけない）
        bmpBook.Dispose()

    End Sub

End Class

（実行例）

Comments

[hanbee.com]

radian様
追記依頼とご丁寧な回答まで頂いているのに、返信が大変遅れて申し訳ありません。

ご推測の通り、私が使っているのはWindowsFormApplicationの方です。
こっちの方はコントロールを重ねて使用することはできないんですね。初めて知りました。
ありがとうございます。
PictureBoxの上にPictureBox、またさらにLabelやパネルなど始めからコントロールを重ねて使うつもり
満々だったので、おすすめいただいたWPFというものの使用を考えたいと思います。
ちなみになのですが、初心者なもので、WindowsFormApplicationの使い方しか知りませんし、あまり
時間にも余裕がありません。
WPFのことを軽く調べてみましたが、ひとつ確認したいことがあります。
WPFはこれまで作ってきたWindowsFormApplicationでのコードをそのまま使うことはできますか？
または、簡単な改造で適応できますでしょうか？
お手数おかけしますが、ご回答よろしくお願いいたします。

[hanbee.com]

WPFでは時間がかかるようであれば、無理にでもWindowsFormApplicationを使ってやっていきたいと思います。
本棚が背景にあってほしいというのはあるのですが、表題のようにPictureBoxを重ねることでそれを再現するのではなく、別の方法で再現できるのであればそうしたいと思っています。（例えばCreateGraphicsを使って、本棚を描くというような。でもGraphics自体がPictureBoxのコントロールを使っているだろうし、これは無理っぽいかもしれませんね。。。）

質問ばかりで恐れ多いですが、もしよろしければ他の方法もご提案いただけたら何よりです。。

[退会済みユーザー]

> WPFのことを軽く調べてみましたが、ひとつ確認したいことがあります。
WPFはこれまで作ってきたWindowsFormApplicationでのコードをそのまま使うことはできますか？
または、簡単な改造で適応できますでしょうか？

まずデザイナーがXamlベースでWindowsFormsと異なりますし、コントロールの種類も違いますので画面側はほぼ作り直しに近くなると思います。

> 本棚が背景にあってほしいというのはあるのですが、表題のようにPictureBoxを重ねることでそれを再現するのではなく、別の方法で再現できるのであればそうしたいと思っています。（例えばCreateGraphicsを使って、本棚を描くというような。でもGraphics自体がPictureBoxのコントロールを使っているだろうし、これは無理っぽいかもしれませんね。。。）

サンプルコードは読んで頂いてますか？

[hanbee.com]

なるほど。ありがとうございます。
サンプルコードがまさにそれなんですね。ご配慮ありがとうございます。
ちなみに最後に質問させていただきたいのですが。
PictureBoxの上にパネルをのせて、そのパネルの上にPictureBoxやテキストボックスなどのコントロールをのせることは可能でしょうか。
これが今自分に思いつく最後の方法です。
これができないということならば、黙ってradianさんに頂いたサンプルコードを使って頑張ってみたいと思います。
ご回答よろしくお願いいたします。

[退会済みユーザー]

回答に載せている通り、コントロールの上にコントロールを載せる事は出来ますが、WindowsFormsではコントロール同士の透過は出来ないものと考えてください。
フォームを透過させる事は可能ですが、こちらも割と面倒なので覚悟が必要です。
https://www.ipentec.com/document/csharp-winform-layerd-window-create

[hanbee.com]

radianさんにはwindowsformsでのあらかじめ重ね合わせた画像をPictureboxに設定する方法を教えていただきました。失礼ながらまだ腑に落ちていないのです。
しつこいようですが、例えば本棚と本のbitmapを重ね合わせた画像をPictureboxに設定したとして、
その本の上にパネルをのせてボタンなりラベルなりを配置することはできるのでしょうか。（本を選択対象のオブジェクトとしたい）

[退会済みユーザー]

修正依頼に書いた点の質問文の編集をお願いします。

> 本棚と本のbitmapを重ね合わせた画像をPictureboxに設定したとして、
> その本の上にパネルをのせてボタンなりラベルなりを配置することはできるのでしょうか。
> （本を選択対象のオブジェクトとしたい）

繰り返しますが、載せる事はできます。（見栄えはともかくとして）

Regionでコントロール自体の形を変えることが出来るので、頑張ればこれでいけるかもしれません。
[フォームやコントロールの形を変える]
https://dobon.net/vb/dotnet/form/formregion.html

[hanbee.com]

すみませんが、コントロールの上にコントロールを重ねるのは諦めます。
コントロールの形を変えるのは使えるかもしれません。