Transparency Tutorial with C#

• Download image fade demo - 4 Kb
• Download image fade source project- 7 Kb
• Download image fade images - 673 Kb
• Download form opacity - 48 Kb
• Download form opacity source project- 50 Kb
• Download first form fade demo - 36 Kb
• Download first form fade source project- 40 Kb
• Download second form fade demo - 4 Kb
• Download second form fade source project - 7 Kb
• Download second form fade images - 95 Kb
• Download per pixel transparency demo - 3 Kb
• Download per pixel transparency source project- 12 Kb
• Download per pixel transparency images- 209 Kb

Introduction

As in the earlier tutorial, we consider the ‘what’ before the ‘how’. That is, a discussion is presented of the concepts behind the code, and then at the end, we look at the code behind the concepts. 

Fade Concepts

Fades are commonly used as transitions between images on TV or in the movies to soften the switch between scenes. We can simulate this effect by stacking images on a form and increasing the alpha value for each image sequentially causing them to fade away until the last image is shown. Figure 1 illustrates this technique using some excellent renderings of a generic luxury car generously provided by Kevin Hulsey, www.khulsey.com (the images, not the luxury car  .

Important Note:

Png images have per pixel alpha and are large, so to conserve space they are zipped separately. For the programs with separate images, the images must be in the same directory as the exe file. To run the demo, put the images in the directory with it. To run the source code, the images MUST be put in the indebug directory before running the source code.

1. Open the project
2. Put the images in the indebug directory
3. Run the code.

Figure 1 Image Fade 

Form Concepts

You can do fades with entire forms using the opacity. Just step the property between 0 and 1 for transparent to opaque. Figure 2 illustrates a timer based splash screen that fades in.

Figure 2 Using Form Opacity to fade in a splash screen 

Having areas of full transparency and full opacity takes a little more work. Figure 3 shows an irregular shaped form with a progress bar that could be used for a splash screen. We use a panel control to hold the image and set the panel’s backcolor property to transparent. The form’s transparency key is also set to the forms backcolor, which in this case is white. Since we aren’t doing much painting in this application, we don’t bother with the flicker-free additions and let C# do the painting for us.

Figure 3 Transparent Form Background With Image, example #1 

Figure 4 carries the idea further by using an image and letting it start small and grow to full size. This requires lots of paints so we go back to using the flicker-free techniques. This application might make an interesting splash screen while your real application is doing something in the background. Then again, it might just be annoying.

Figure 4 Transparent Form Background With Image, expample #2 

Now we step gingerly outside the safe world of C# and GDI+ into the truly dark and dangerous forest of the Win32 API. We previously visited the twilight shadows at the edge of this forest with the WhatColor demo, but now we plunge straight in and hope none of the low-level MS beasties gets us. Figure 5 is an implementation of the coding ideas that got me going down this muddy and rutted road in the first place. I’d read Rui Lope’s article on Per Pixel Alpha Blend in C#. That article gave just enough information to whet my appetite, but my skill level wasn’t advanced enough to make any real use of it. The studies documented in these tutorials led to my being able to use and somewhat understand his code. And I was able to modify it so that I could get a variable transparency form that responds to mouse events. I don’t know what I’ll do with this new knowledge, but I personally think the effect is pretty cool.

Figure 5 Perpixel Form Transparency With Image 

The Code

As mentioned in the first tutorial, we’ll only look at code that introduces new concepts.

Image Fade

Figure 1 Image Fade, introduces a shortcut in the use of ColorMatrix. Each of the elements of the matrix are individually accessible as ColorMatrix.MatrixXY where XY is a number for the row and column.ColorMatrix.Matrix33 is the alpha diagonal member and is used in this code instead of the entire matrix.

 Collapse | Copy Code

  //Set alpha in the ColorMatrix
  middleColorMatrix.Matrix33 = middleTransparency;

The middleTransparency variable is set by the timer to sequentially change the alpha for the entire image until the image becomes fully transparent. The other functions are as discussed before.

Form Fade

Figure 2, shows a splash screen fading up from fully transparent to fully opaque. This is very easy to accomplish in C# using the form’s Opacity property. We us a timer to change it from 0.0f to 1.0f in 0.03f steps

 Collapse | Copy Code

  private float opacity = 0;
  private void timer1_Tick(object sender, System.EventArgs e)
  {
    opacity += 0.03f;
    this.Opacity = opacity;
    if(opacity > 1.0)
    {
      timer1.Enabled = false;
      buttonAgain.Show();
      buttonQuit.Show();
    }
    Invalidate();
  }

And we use DrawImage in the OnPaint override, as before.

We also add a useful bit of code that has nothing to do with transparency, but allows us to grab the form and drag it around.

 Collapse | Copy Code

  // Drag it around the screen
  private const int WM_NCHITTEST = 0x84;
  private const int HTCAPTION = 0x2;
  protected override void WndProc(ref Message m)
  {
    if(m.Msg == WM_NCHITTEST)
      m.Result = new IntPtr(HTCAPTION);
    else
      base.WndProc(ref m);
  }

Form Transparency

Figure’s 3 and 4 Transparent Form Background With Image #1 and #2 show two hypothetical splash screens with full transparency allowing a non rectangular shape. The first has a progress bar and the second grows the image to mark time. The first doesn’t do much painting so no flicker-free techniques are used. The second does a lot of painting so the flicker-free techniques are used.

This code may be a bit of a kludge in that a panel is docked to the center of the form, it’s backcolor is set totransparent and it’s backgroundimage is set to the stump. The form itself has it’s transparency key set to its backcolor. It might seem that it would be eaiser to dispense with the panel and use the form’s backgroundimage property, but for some reason I didn’t fathom, I couldn’t get that to work. Kludges?

Maybe, but it works. The Lunatics, Inc demo had an annoying flash at the start that I never figured out how to get rid of (anybody know how?) so I decided to start the thing minimized, then maximize it before starting the animation.

 Collapse | Copy Code

// Starting minimized is hacking crap done to get rid of the initial
// flashing of garbage when the program first starts. We still see a
// bit of a title bar zipping around, 
// odd since this form border style is none.
// ANYBODY KNOW HOW TO DO THIS CORRECTLY?

  private void Form1_Load(object sender, System.EventArgs e)
  {
    this.WindowState = FormWindowState.Normal;
  }

I still got a bit of a title bar flying about at the start, but that is much less annoying than the other way.

Per pixel form transparency

Figure 5 Shows a demo splash screen for Aqua Mala (guaranteed 90% pure water). The base software is entirely a rip of Rui Lopes’ article, but with enough extra added so that I could understand it and actually make something that I consider potentially useful out of it. We have now left the cuddly world of proper C# and are using the win32 API via COM interoperability. And, yes, I do believe that there are actually people who fully understand that concept. I, however, am content to hack it and hope.

I split up the original into a class with the win32 stuff and a class with the C# stuff. I added an accessor to set the form size, but hardwired the hotspot size. If I were to do further work on this, I’d change the hotspot to regions and just load their bitmap, rather than all the redundant image data in two almost identical bitmaps. I should do a lot of documentation here about the code, but I’m going to let source do it’s own talking and hope I get time later to do a more thorough job.

That’s the end of these tutorials. I hope it helps the reader avoid some of the pitfalls I fell into and perhaps some readers will be willing to share with me better methods and coding techniques than I worked out.

转自：http://www.codeproject.com/Articles/6505/Transparency-Tutorial-with-C-Part