具有透明背景的透明图像问题

Question

I'm having a problem with displaying transparent images with a transparent background. The transparent background takes the color of the underlying control and that is fine ... bu the problem is that some details (lines) on the underlying background are being covered the the images as can be seen in the image below.

Here is the code I am using.... This is the code for the notes....

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Media;
using System.Drawing;

namespace Simpe_Piano_new
{
    class MusicNote: PictureBox
    {
        public SoundPlayer sp = new SoundPlayer();
        Timer tmr = new Timer();
        public int pitch;        //The no. of the music key (e.g. the sound freuency).
        public int noteDuration; //Shape of note.
        public string noteShape;

        public MusicNote(int iPitch, int iNoteDuration)
            : base()
        {
            pitch = iPitch;
            noteDuration = iNoteDuration;
            Size = new Size(40, 40);
        }

        public void ShowNote()
        {   if (this.noteDuration == 1) noteShape = "Quaver.png"; 
            if (this.noteDuration == 4) noteShape = "Crotchet.png";
            if (this.noteDuration == 7) noteShape = "minim.png";
            if (this.noteDuration == 10) noteShape = "DotMin.png";
            if (this.noteDuration == 12) noteShape = "SemiBreve.png";
            this.BackgroundImage = Image.FromFile(noteShape);
            this.BackColor = Color.Transparent;
            Location = new Point((pitch * 40) - 40, 100);
        }
        protected override void OnPaint(PaintEventArgs pe)
        {
            base.OnPaint(pe);
        }

        public void PlaySound()
        {
            sp.SoundLocation = this.pitch + ".wav";
            sp.Play();
        }

        public void StopSound()
        {
            sp.SoundLocation = this.pitch + ".wav";
            sp.Stop();
        }

        public void Play()
        {
            sp.SoundLocation = this.pitch + ".wav";
            sp.Play();
            //Time to play the duration
            tmr.Interval = noteDuration;
            tmr.Start();
            tmr.Tick += new System.EventHandler(ClockTick);
        }

        void ClockTick(object sender, EventArgs e)
        {
            sp.Stop();
            tmr.Stop();
        }


    }
}

This is the code for the underlying control..the music staff

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Windows.Forms;

namespace Simpe_Piano_new
{
    public class MusicStaff: Panel
    {
        Pen myPen;
        Graphics g;

        public MusicStaff()
        {
            this.Size = new Size(1000, 150);
            this.Location = new Point(0, 0);
            this.BackColor = Color.Transparent;
            this.Paint += new PaintEventHandler(DrawLines);
        }

        private void DrawLines(object sender, PaintEventArgs pea)
        {
            myPen = new Pen(Color.Black, 1);
            g = this.CreateGraphics();
            for (int i = 1; i < 6; i++)
            {
                g.DrawLine(myPen, 0, (this.Height / 6) * i, this.Width, (this.Height / 6) * i);
            }
        }
    }
}

I have found that C# does not handle transparency really well... Any help would be greatly appreciated..

Answer 1

Two mistakes. PictureBox supports transparent images well, as long as you set its BackColor property to Color.Transparent. Which you did for the MusicStaff but not for the MusicNote. Layered transparency does not work, you don't need MusicStaff to be transparent, just the picture boxes.

This kind of transparency is simulated by asking the Parent to paint itself into the control to provide the background pixels. Which is your second mistake, you use CreateGraphics() in your DrawLines() method. Which draws directly to the screen, not the control surface. You must use pea.Graphics here.

Do note that the value-add you get from using PictureBox is a very low one. Controls are expensive and you'll easily burn up hundreds of them to display a sheet of music. You'll notice, it will become slow to paint itself. You avoid this by having MusicStaff just paint the notes itself, using Graphics.DrawImage() gets the job done. Transparency effects are now much simpler as well, just layers of paint. Which is the way WPF does it. The only inconvenience you'll have to deal with is that mouse hit testing isn't as simple anymore, you need to map the panel's MouseDown event's coordinates to a note. Just keep a List that keeps track where every note is displayed. You'll use that for painting as well as mouse hit testing.

Answer 2

add the top control "MusicNote" in the children of the underlying control "MusicStaff"

something like that after -Initializing all components-

// mStaff: the MusicStaff object
// mNote: the MusicNote object
mStaff.Children.Add(mNote);

in old scenario, the form is the parent of both of them, so they display the form background in any transparent area

after modifying the parent of the "MusicNote", it displays the "MusicStaff" background in the transparent area

I hope that help!