ExpressPaint

Microsoft Corporation

July 2004

Click here to download the sample file.

Applies to:
   Microsoft .NET Framework
   Microsoft Visual Studio 2005
   Microsoft C# Express

Summary: Use C# Express to create an image processing application that's ideal for putting the final touch to your digital photographs. This program is easy to expand with your own unique touches. (6 printed pages)

Introduction

So now you have C# Express installed, and you're looking for some programming projects to play with. That's good—because here's a project you might find useful: ExpressPaint. This little app will be a great starting point for you to experiment with computer graphics, and in particular those holiday snaps you took with your digital camera. Adding your own image processing features is easy with C# Express, and your finished program can be shared with your friends.

Figure 1. C# ExpressPaint

Want to get going? The best way to get started is to load the ExpressPaint solution into C# Express, and hit F5 to compile and launch it. Hitting F5 launches the program under Debug mode—and Debug mode is perfect when you are developing a program. If you make a mistake and the program crashes with an exception or other error, you'll get information on where and what went wrong. You can even put the mouse pointer over a variable and see the current value.

ExpressPaint Features

Here's what ExpressPaint does "out of the box." ExpressPaint allows you to load images and save them in JPEG format. Once the image has been loaded, you can resize it to one of three common image sizes, rotate it, or apply some basic image processing filters. The main window can be resized, minimized, or maximized. Scrollbars allow you to look around an image that's too large to be seen at once.

Figure 2. ExpressPaint main window

How It Works

If you are still relatively new to programming Windows applications, it can be daunting to know where to start. Here's how I created ExpressPaint.

1. First I created a new, empty Windows Application in C# Express.
2. In the design view, I dragged a PictureBox control from the ToolBox to the Windows Form. This control would display my images.
3. I then dragged a vertical and horizontal scrollbar control to the Form, and adjusted their properties to dock them to the bottom and right sides of the Form, respectively.
4. Then I created a MenuStrip, and added all the menu functions I thought I would need, or at least empty methods.

Every feature in ExpressPaint is driven from a menu item on the Windows Form. To see these menu options for yourself, look at Form1 from within the C# Express design view. If you double-click a menu item you will jump right into the source code, where you can see the code that is executed when the menu item is selected. If you want to add more features, adding a new menu option is the perfect way to start: C# Express will create the method in the Form1.cs file where you can start typing your code.

Once the user interface and all the menu items were created, I started writing the code that would do all the actual image processing work. This consisted of creating a Bitmap object to store the image, some methods for loading and save, some more methods for processing the image in various ways, and a method to display the correct portion of the image in the PictureBox control. I also needed some code to redraw the display when the user clicked on the scrollbars or resized the window.

Finally, I added a ProgressBar control. This kind of control is a rectangle that contains a series of dots moving from left to right, and is used to indicate that some kind of time-intensive process is occurring. I adjusted the ProgressBar's properties to make sure it was invisible when the program first started.

Bitmaps

A C# program can store an image in a special object called a "Bitmap". The bitmap stores all the pixels that make up the image, and also has properties that contain information such as the width and height. One of the first things that ExpressPaint does is to load an image stored in the application assembly as a resource into a bitmap object, and then display that image in the PictureBox control.

It wouldn't have been so long ago that writing code to load and save images would have taken a long time, and still been unreliable and buggy (Or at least the code would have been if I wrote it). Thanks to the .NET Framework, however, it now only takes a single line of code to load or save an image into a Bitmap object.

Whenever you select Open from the File menu, the image you select is inserted into the Bitmap object with some code like this.

original_bitmap = new Bitmap(strFileName);

It's really that simple to load an image into your application with C#. To display it, you just tell the PictureBox control about it, like this.

pictureBox.Image = original_bitmap;

Bitmap objects also come with useful methods for free. For example, we use the FlipRotate family of methods to rotate the image 90, 180, and 270 degrees in the blink of an eye. It's always great when adding a new feature to your application is only a matter of calling one method that is already part of the .NET Framework library. That's my kind of programming. Here's the entire method that rotates the image 90 degrees.

private void rotate90ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            UpdateImage();
            original_bitmap.RotateFlip(RotateFlipType.Rotate90FlipNone);
            UpdateImage();
        }

Image Processing

If you have ever looked at those fancy graphics programs and wondered, "Hey, how do they do that stuff?" you're going to like this part. Using C#, it's easy to write a method that examines every pixel in your image and does something to the image—that's how image processing works.

For example, one menu option will convert the image to a nice grayscale photograph, for those artistic images of your friend you want to put on a webpage. This method works by looking at the Red, Blue, and Green components of every pixel, and just averaging the result and plotting it back. Here's the source code for grayscale. If you look at the actual code in the solution, you'll see some extra lines that are used to display a Progress Bar. It's always a good idea to pop up a Progress Bar if your program is going to be busy for more than a few seconds.

private void GreyFilter()
        {
            Color pixel;
            int t;

            for (int y = 0; y < original_bitmap.Height; y++)
            {
          for (int x = 0; x < original_bitmap.Width; x++)
                {
// Get a pixel from the image
                    pixel = original_bitmap.GetPixel(x, y);
         // Get the average color
                    t = (pixel.R + pixel.G + pixel.B) / 3;
         // Plot the new pixel
                    original_bitmap.SetPixel(x, y, Color.FromArgb(t, t, t));
                }
            }
}

Adding your own image processing methods is where the fun really begins. You might want to start simple, by adding some menu options that allow you to adjust the amount of Red, Green, or Blue in an image. Using a variation of the Brightness method, you can quickly change the code so that only one color component is adjusted at a time.

What's Next?

Once you've played with ExpressPaint, and seen how easy it is to tweak the source code, you can try your hand at making some improvements. For example, if image processing is your thing, you should also read up on convolution matrix—the matrix is a smart little technique in which you provide a grid of three by three (or more) numbers that are applied to each pixel in the image. The values in the matrix can be configured to perform functions such as a blurring, sharpening, or edge-detection. Once you get the code working for one matrix, it's easy to tweak the values and get a completely different effect.

Perhaps you find yourself cropping your digital images—that's a good feature to work on. You'll need to deal with mouse-clicks to drag out a selection rectangle, and than copy that highlighted region into a new Bitmap.

Other distortion filters might require a little more math. For example, a fish-eye lens or ripple effect will take some Sine/Cosine calls and a little web research.

Conclusion

C# Express is a complete development platform, ideal for applications such as ExpressPaint. It only took a few hours to create this program from scratch, and it can be the basis for your own image processing experiments. Have fun!

© Microsoft Corporation. All rights reserved.