C#でのPictureBoxの透過方法を紹介！透過して重ねよう

この記事でわかること

システム
エンジニア

画面の背景部分を透明視したいのですが、どうすればいいのか悩んでいます。

プロジェクト
マネージャー

なるほど。ではPictureBoxでの透過の方法について見ていきましょう。

C#でのPictureBoxの透過について

今回は、C#でのPictureBoxの透過について説明します。

透過とは、画像の特定色を透明にすることです。C#でのPictureBoxの透過に興味のある方はぜひご覧ください。

PictureBoxの表示

透過の前に、通常のPictureBoxを表示してみます。事前に、表示用の画像を「C:\test\test.gif」に格納しておいてください。

実際のソースコードを見てみましょう。

using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { PictureBox pictureBox; public Form1() { this.Load += Form1_Load; } private void Form1_Load(object sender, EventArgs e) { pictureBox = new PictureBox(); pictureBox.Location = new Point(10, 10); pictureBox.SizeMode = PictureBoxSizeMode.AutoSize; pictureBox.ImageLocation = @"C:\test\test.gif"; this.Controls.Add(pictureBox); } } }

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

using System; using System.Drawing; using System.Windows.Forms;   namespace WindowsFormsApp1 {     public partial class Form1 : Form     {         PictureBox pictureBox;         public Form1()         {             this.Load += Form1_Load;         }         private void Form1_Load(object sender, EventArgs e)         {             pictureBox = new PictureBox();             pictureBox.Location = new Point(10, 10);             pictureBox.SizeMode = PictureBoxSizeMode.AutoSize;             pictureBox.ImageLocation = @"C:\test\test.gif";             this.Controls.Add(pictureBox);         }     } }

実行すると、PictureBoxに画像が表示されます。この画像の特定色を透過にする方法について、以降で説明します。

PictureBoxの透過

C#では、PictureBoxに表示する画像について、特定色を透過にできます。

BitmapクラスのMakeTransparent メソッドを使用します。事前に、表示用の画像を「C:\test\test.gif」に格納しておいてください。

実際のソースコードを見てみましょう。

using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { PictureBox pictureBox; Bitmap bitmap; public Form1() { this.Load += Form1_Load; } private void Form1_Load(object sender, EventArgs e) { pictureBox = new PictureBox(); pictureBox.Location = new Point(10, 10); pictureBox.SizeMode = PictureBoxSizeMode.AutoSize; bitmap = new Bitmap(@"C:\test\test.gif"); // 透過にする bitmap.MakeTransparent(); pictureBox.Image = bitmap; this.Controls.Add(pictureBox); } } }

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 27 28 29 30 31

using System; using System.Drawing; using System.Windows.Forms;   namespace WindowsFormsApp1 {     public partial class Form1 : Form     {         PictureBox pictureBox;         Bitmap bitmap;         public Form1()         {             this.Load += Form1_Load;         }         private void Form1_Load(object sender, EventArgs e)         {             pictureBox = new PictureBox();             pictureBox.Location = new Point(10, 10);             pictureBox.SizeMode = PictureBoxSizeMode.AutoSize;               bitmap = new Bitmap(@"C:\test\test.gif");             // 透過にする             bitmap.MakeTransparent();             pictureBox.Image = bitmap;               this.Controls.Add(pictureBox);         }     } }

実行すると、画像の背景色が透過になっていることが分かります。MakeTransparentメソッドの引数を指定しないと、Bitmap画像の左上(0,0)のpixelを透過色とします。

bitmap.MakeTransparent();は以下のように書き換えられます。

// bitmapの任意のpixel（この場合、(0, 0)）を透過色とする bitmap.MakeTransparent(bitmap.GetPixel(0, 0)); // 任意の色（この場合、Color.Black）を透過色とする bitmap.MakeTransparent(Color.Black);

1 2 3 4 5 6

// bitmapの任意のpixel（この場合、(0, 0)）を透過色とする bitmap.MakeTransparent(bitmap.GetPixel(0, 0)); // 任意の色（この場合、Color.Black）を透過色とする bitmap.MakeTransparent(Color.Black);

このように、C#ではPictureBoxに表示する画像について、特定色を透過にできます。

透過したPictureBoxを重ねる

C#では、透過したPictureBoxは重ねられます。

事前に、表示用の画像を「C:\test\test1.gif」・「C:\test\test2.gif」に格納しておいてください。test1.gifの上にtest2.gifを重ねます。

実際のソースコードを見てみましょう。

using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { PictureBox pictureBox1, pictureBox2; Bitmap bitmap1, bitmap2; public Form1() { this.Load += Form1_Load; } private void Form1_Load(object sender, EventArgs e) { pictureBox1 = new PictureBox(); pictureBox1.Location = new Point(10, 10); pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize; bitmap1 = new Bitmap(@"C:\test\test1.gif"); // 透過にする bitmap1.MakeTransparent(); pictureBox1.Image = bitmap1; pictureBox2 = new PictureBox(); pictureBox2.Location = new Point(10, 10); pictureBox2.SizeMode = PictureBoxSizeMode.AutoSize; bitmap2 = new Bitmap(@"C:\test\test2.gif"); // 透過にする bitmap2.MakeTransparent(); pictureBox2.Image = bitmap2; pictureBox2.Parent = pictureBox1; // 透過にする pictureBox2.BackColor = Color.Transparent; this.Controls.Add(pictureBox1); } } }

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

using System; using System.Drawing; using System.Windows.Forms;   namespace WindowsFormsApp1 {     public partial class Form1 : Form     {         PictureBox pictureBox1, pictureBox2;         Bitmap bitmap1, bitmap2;         public Form1()         {             this.Load += Form1_Load;         }         private void Form1_Load(object sender, EventArgs e)         {             pictureBox1 = new PictureBox();             pictureBox1.Location = new Point(10, 10);             pictureBox1.SizeMode = PictureBoxSizeMode.AutoSize;             bitmap1 = new Bitmap(@"C:\test\test1.gif");             // 透過にする             bitmap1.MakeTransparent();             pictureBox1.Image = bitmap1;               pictureBox2 = new PictureBox();             pictureBox2.Location = new Point(10, 10);             pictureBox2.SizeMode = PictureBoxSizeMode.AutoSize;             bitmap2 = new Bitmap(@"C:\test\test2.gif");             // 透過にする             bitmap2.MakeTransparent();             pictureBox2.Image = bitmap2;               pictureBox2.Parent = pictureBox1;             // 透過にする             pictureBox2.BackColor = Color.Transparent;               this.Controls.Add(pictureBox1);         }     } }

pictureBox2の親コントロールをpictureBox1にしています。また、pictureBox2.BackColorを透過にすることで、透過したPictureBoxを重ねています。

このように、C#では透過したPictureBoxは重ねられます。

PictureBox上のコントロール背景の透過

PictureBox上にLabelなどを配置すると、既定の背景色で表示されます。C#では、この背景色を透過にできます。

事前に、表示用の画像を「C:\test\test.gif」に格納しておいてください。

実際のソースコードを見てみましょう。

using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp1 { public partial class Form1 : Form { PictureBox pictureBox; Bitmap bitmap; Label label; public Form1() { this.Load += Form1_Load; } private void Form1_Load(object sender, EventArgs e) { pictureBox = new PictureBox(); pictureBox.Location = new Point(10, 10); pictureBox.SizeMode = PictureBoxSizeMode.AutoSize; bitmap = new Bitmap(@"C:\test\test.gif"); pictureBox.Image = bitmap; label = new Label(); label.Location = new Point(20, 20); label.Text = "label"; // test.gifに合わせて適宜変更してください。 label.ForeColor = Color.Red; label.Parent = pictureBox; // 透過にする label.BackColor = Color.Transparent; this.Controls.Add(pictureBox); } } }

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 27 28 29 30 31 32 33 34 35 36 37 38

using System; using System.Drawing; using System.Windows.Forms;   namespace WindowsFormsApp1 {     public partial class Form1 : Form     {         PictureBox pictureBox;         Bitmap bitmap;         Label label;         public Form1()         {             this.Load += Form1_Load;         }         private void Form1_Load(object sender, EventArgs e)         {             pictureBox = new PictureBox();             pictureBox.Location = new Point(10, 10);             pictureBox.SizeMode = PictureBoxSizeMode.AutoSize;             bitmap = new Bitmap(@"C:\test\test.gif");             pictureBox.Image = bitmap;               label = new Label();             label.Location = new Point(20, 20);             label.Text = "label";             // test.gifに合わせて適宜変更してください。             label.ForeColor = Color.Red;             label.Parent = pictureBox;             // 透過にする             label.BackColor = Color.Transparent;               this.Controls.Add(pictureBox);         }     } }

実行すると、PictureBoxの上にLabelの文字だけが表示されていることが分かります。

このように、C#ではBackColorプロパティを透過にすることで、PictureBox上のコントロールの背景を透過にできます。

システム
エンジニア

背景色を指定できるのですね。

プロジェクト
マネージャー

その前に表示したい画像を格納しておくことを忘れないでくださいね。

C#のソースコードを書いて理解を深めよう

いかがでしたでしょうか。C#でのPictureBoxの透過について説明しました。

MakeTransparentメソッドで、PictureBoxを透過できます。また、透過したPictureBoxは重ねられます。

ぜひご自身でC#のソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

• スマホアプリから業務系システムまで

  

  スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

• 充実した研修制度

  

  毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

• 資格取得を応援

  

  スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

• 東証プライム上場企業グループ

  

  オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

  安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

C＃新着案件New Job

• システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

  月給29万～34万円
  東京都新宿区(新宿駅)
  • C＃
  • C＋＋
  • C

• システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

  月給41万～50万円
  東京都新宿区(新宿駅)
  • C＃
  • C＋＋
  • C

• デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

  月給29万～34万円
  神奈川県横浜市(桜木町駅)
  • C＃
  • C＋＋

• デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

  月給41万～50万円
  神奈川県横浜市(桜木町駅)
  • C＃
  • C＋＋

• 基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務

  月給29万～34万円
  東京都新宿区(西新宿駅)
  • C＃

• 基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半～40代の方活躍中/経験年数不問】/在宅勤務

  月給41万～50万円
  東京都新宿区(西新宿駅)
  • C＃