none
pictureBoxの画像を透過表示する方法 RRS feed

  • 質問

  • 計算ドリルのアプリを作っています。
    正解したとき,答えの上に花丸の画像を表示しています。

    ここで解決したいことがありますので,質問させていただきました。よろしくお願いいたします。

    <解決したいこと> pictureBox1の画像を透過表示して,下のtextBox1に入力した答えが透けて見えるようにしたい。

    pictureBox1の画像: hanamaru.png (画像自体は透過処理をしています)
    pictureBoxのプロパティを設定
        visible: false
           BackColor: Transparent

    正解の時 visible=true としました。
    次の問題に移るとき visible=false としました。

    ウェブサイトを調べたとき,BackColor: Transparent とすると透過表示ができるとあったのですが,私の場合,visibleプロパティの設定をいじっているのでダメなのかなと思っています。

    どのようにするとよいのか,教えていただけませんでしょうか。

    2013年4月12日 1:04

回答

  • ラベルだと親コンテナーを変更することで、透過画像を上に表示できますが、テキストボックスでは無理なようですね。
    (私が実験した限りでは・・・)
    なので、画像のサイズと同じサイズの別フォームを用意してpictureBoxをおき、フォームの背景を透過させてみました。
    すると、このような感じで出来ました。これでどうでしょうか?
    別フォーム背景の透過は、GUIから、TransparencyKeyプロパティをその背景色と同じに設定しました。
    コードからだと、このような感じですね。
    // フォームの背景色がBlackの場合
    this.TransparencyKey = Color.Black;

    • 編集済み kentahoga 2013年4月12日 5:42
    • 回答としてマーク imsz 2013年4月13日 3:34
    2013年4月12日 5:35

すべての返信

  • ラベルだと親コンテナーを変更することで、透過画像を上に表示できますが、テキストボックスでは無理なようですね。
    (私が実験した限りでは・・・)
    なので、画像のサイズと同じサイズの別フォームを用意してpictureBoxをおき、フォームの背景を透過させてみました。
    すると、このような感じで出来ました。これでどうでしょうか?
    別フォーム背景の透過は、GUIから、TransparencyKeyプロパティをその背景色と同じに設定しました。
    コードからだと、このような感じですね。
    // フォームの背景色がBlackの場合
    this.TransparencyKey = Color.Black;

    • 編集済み kentahoga 2013年4月12日 5:42
    • 回答としてマーク imsz 2013年4月13日 3:34
    2013年4月12日 5:35
  • kentaroさん,ありがとうございます。
    私がやりたいことは,お示しくださった画像そのものです。

    早速やってみましたが,子フォーム使用未経験の私にはハードルが相当高そうです。

    やってみたことは,
    1 windowsフォームを追加
    2 Form2をForm1の子フォームに設定
    3 タイトルバーと枠線をなくす
    4 pictureBoxのサイズにあわせる

    2の段階で実行してみると,予想に反してForm1の内部にForm2が表示されることはありませんでした。(離れた場所に表示された)

    4の段階では,横幅が136より小さくすることができませんでした(画像のサイズは60x60です)

    1から4の操作を易しく解説しているwebサイトをご紹介いただけないでしょうか?

     

    2013年4月12日 8:07
  • (追記です)

    dobon.netさんのサイトに書かれている方法で親フォームの上に子フォームを表示することができました。

    次にやるべきことは,子フォームのサイズ変更と表示位置の設定です。

    どうぞよろしくお願いします。

    2013年4月12日 8:20
  • ちなみに、子フォームの起動はモーダルですか?モードレスですか?
    それと「次の問題に移るとき」とありますが、それはどんな動作をした時でしょうか?

    そこら辺の想定を出して会話された方が、より良い助言が得られると思います。

    2013年4月12日 8:32
  • FormBorderStyleプロパティをNoneにするとサイズが小さくできると思います。

    表示位置は、テキストボックスがあるフォームから、From2(はなまるフォーム)を以下のように表示して、Top, Leftで位置を指定して下さい。(命名は適当です。)

    あと、500と300は画面左上からのピクセルです。

    var f2 = new Form2();
    f2.Show();
    f2.TopMost = true;
    f2.Top  = 500;
    f2.Left  = 300;


    • 編集済み kentahoga 2013年4月12日 8:50
    2013年4月12日 8:45
  • 透過表示させるときのカラーの設定が今一つわからないでいます。

    <現在のカラー設定>

    Form1
       BackColor : Control

    Form2
       BackColor : Control
       TransparecKey : Control

    pictureBox
       BackColor : Transparent

    kentaro_さんに頼りっぱなしで申し訳ありませんが,ぜひとも実現したいことですのでよろしくお願いいたします。

    <現在の状況を表す画像>

    [お客様のアカウントが確認されるまで,本文に画像やリンクを含むことはできません。]とのメッセージが出て,画像をはりつけることができませんでした。

    2013年4月12日 19:08
    • Form2 の透過を考える上で Form1 の色を考える必要はありません。
    • Form2 の TransparencyKey で設定した色と同じ色の場所を透過する。
    • TransparencyKey と同じ色になっている Form2 の背景部分は透過する。
    • pictureBox の BackColor は Transparent なので、その親の Form2 の BackColor が使われて、TransparencyKey と同じ色なので透過する。

    それで、「今ひとつわからない」とはどういったことなのでしょうか。
    わからないことを書いてないので、伝わりません。

    あと、特定の人名を挙げて教えてくれというのはやめておきましょう。
    その人に対して無償で労力を払うことを求めていることになるので、「わかる方いらっしゃいましたら教えてください」といったように協力してもらえる誰かに対して投げかける感じがよいかと思っています。

    2013年4月13日 2:17
    モデレータ
  • Form2の背景色の設定がが失敗の原因でした。

    kentaro_さん,Azuleanさん,ありがとうございました。

    おかげさまで,花丸を表示することができました。

    2013年4月13日 3:34