Symfoware

Symfowareについての考察blog

C# 透過pngをレイヤーとして表示するPictureBoxを作成する

C# でユーザーコントロール作成の勉強がてら、透過pngをレイヤーとして
表示するカスタムPictureBoxを作ってみます。

ユーザーコントロール



プロジェクトを右クリックして[追加] - [ユーザーコントロール]を選択。

892_01.png

「ユーザーコントロール」を新規作成します。
今回は「LayerImageBox」というコントロールを作成することにしました。

892_02.png

作成してビルドすると、ツールボックスの候補に表示されます。
これでGUIからFormに配置できます。

892_03.png



プログラム



作成したコントロールはこんな感じになりました。
レイヤーとして使用するPictureBoxは
BackColor = Color.Transparent;
を指定して透過しておきます。


  1. using System;
  2. using System.Drawing;
  3. using System.Windows.Forms;
  4. namespace WindowsFormsApp1
  5. {
  6.     public partial class LayerImageBox : PictureBox
  7.     {
  8.         private PictureBox _layer = new PictureBox();
  9.         public Image LayerImage
  10.         {
  11.             get
  12.             {
  13.                 return _layer.Image;
  14.             }
  15.             set
  16.             {
  17.                 _layer.Image = value;
  18.             }
  19.         }
  20.         public LayerImageBox()
  21.         {
  22.             InitializeComponent();
  23.             _layer.BackColor = Color.Transparent;
  24.             _layer.Parent = this;
  25.             _layer.Size = Size;
  26.         }
  27.         protected override void OnSizeChanged(EventArgs e)
  28.         {
  29.             base.OnSizeChanged(e);
  30.             _layer.Size = Size;
  31.         }
  32.     }
  33. }



呼び出すFormのソース。


  1. using System.Drawing;
  2. using System.Windows.Forms;
  3. namespace WindowsFormsApp1
  4. {
  5.     public partial class Form1 : Form
  6.     {
  7.         public Form1()
  8.         {
  9.             InitializeComponent();
  10.             layerImageBox1.Image = new Bitmap(@"C:\dev\lena.jpg");
  11.             layerImageBox1.LayerImage = new Bitmap(@"C:\dev\ribon.png");
  12.         }
  13.     }
  14. }



画像はこちらからお借りしました。
リボン付花形金メダル透過PNG

実行結果

892_04.png

ユーザーコントロール、意外とお手軽に作成できました。


【参考URL】
方法 : 既存の Windows フォーム コントロールから継承する


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/06/16(土) 18:56:47|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:3
  5. | 編集
<<.NET Core 2でBitmapオブジェクトを使用する | ホーム | Python + OpenCV3 指定領域のノイズを修復する(Inpaint)>>

コメント

探し求めていた・・!?

C#初心者です。
Form1 上に配置された色んなコントロールに覆いかぶさるように一番手前に大きく透過GIFアニメ画像を表示させたくて方法を検索してこちらの記事に辿りつきました。

通常、PictureBox の背景を透過させたい場合は他のコントロールの子にするのがセオリーのようですが、Form1 に大きく被せたいためそれができません。。

そこで記事中の方法を嬉々として試してみたのですが‥

「デザイナーでは行 32 の不明な名前 'AutoScaleMode' を処理できません。メソッド 'InitializeComponent' 内のコードはデザイナーによって生成されるため、手動では変更できません。変更をすべて削除してから、デザイナーを再度開いてください。 」

‥といったエラーが出てLayerImageBox.cs [デザイン] が表示できなくなります。。

クラス宣言の行の継承元‥UserControl を PictureBox に書き換えて、コンストラクタの部分をまるっと消して、記事中と同じ状態にしたのですがそれではマズいのでしょうか‥?
何か手順が抜けていたら教えていただけるとありがたいです。
  1. 2018/10/15(月) 02:36:33 |
  2. URL |
  3. p #-
  4. [ 編集 ]

度々すみません。。

「C#でコントロールクラスを継承したユーザーコントロールの作成方法」
http://greennoah.hatenablog.jp/entry/20081011/1223713306

こちらの記事のように、どこかの手順で継承したいコントロールを放り込む必要があるのかなと思ったのですが、こちらの記事中の手順「5」の時点でユーザーコントロールの[デザイン]を表示するとエラーが出てしまいます。。
手順「4」でPictureBoxを放り込んでも解決しませんでした。

そこでまた検索してみてこちらの記事を見つけました。

「方法 : 既存の Windows フォーム コントロールから継承する」
https://docs.microsoft.com/ja-jp/dotnet/framework/winforms/controls/how-to-inherit-from-existing-windows-forms-controls

こちらのようにユーザーコントロールではなくカスタムコントロールでPictureBoxを継承させて、[デザイン]にPictureBoxコントロールを放り込むことでエラーは出ないことは確認できたのですが、画像の透過は反映できずにいます。。
  1. 2018/10/15(月) 03:02:14 |
  2. URL |
  3. p #JalddpaA
  4. [ 編集 ]

サンプルでは全画面に表示していますが、私が実現したかったのは
「各画像(PictureBox)の上にバッジやトロフィーなどの透過画像を重ね合わせたい。」
ということです。

> Form1 上に配置された色んなコントロールに覆いかぶさるように
こういった用途では、このテクニックは使えないんじゃないかな?と思います。
  1. 2018/11/10(土) 14:51:04 |
  2. URL |
  3. symfo #-
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/2193-bcaca629
この記事にトラックバックする(FC2ブログユーザー)