Image attenuation with transparency in the WinForms user interface (.NET3.5)

Question

Application: I am writing a small game that will teach the user how to read music. The game is very simple. The application displays the note, and my little daughter (the target user) must hit the emulated keyboard key in the WinForm GUI corresponding to the note. She has 1 minute to get as many good hits as she can. Success and failure are taken into account.

Task: When she presses the "good / bad keyboard" button, I want to immediately confirm whether she is right or not, without interrupting the game. My plan is to show an OK or FAILED bitmap that fades out and becomes completely transparent within ~ 2 seconds. Fading a bitmap is a great way to get the user to focus on the next note and not worry about the previous result anymore.

Technical question: How can I display a bitmap in Windows form with transparency? Or do you have alternative non-intrusive, easy-to-implement ideas that let the user know about the current good / bad choice?

Answer 1

As dylantblack says, WPF gives you the best tools for this. If you decide to use Windows forms, try a simple approach using a timer that fades out. Set the timer at any frequency you like. Start the timer, increase alpha every time to the end and draw white or any color of your shape with increasing alpha value.

int alpha = 0; 

...

 private void timer1_Tick(object sender, EventArgs e) { if (alpha++ < 255) { Image image = pictureBox1.Image; using (Graphics g = Graphics.FromImage(image)) { Pen pen = new Pen(Color.FromArgb(alpha, 255, 255, 255), image.Width); g.DrawLine(pen, -1, -1, image.Width, image.Height); g.Save(); } pictureBox1.Image = image; } else { timer1.Stop(); } } 

Answer 2

In WinForms, you will need to use timers or something to animate the opacity of the OK or FAILED element so that it disappears, or do something similar using GDI + to draw it manually.

If you use .NET 3.5 anyway, I would recommend using WPF, which is much simpler for this.

As an example, you can see the Scott Hanselman Baby Smash application , which is open source and has a similar concept of fading things in and out.