The easiest way to create a Graphics object for a control is to use its CreateGraphics method. This method requires no parameters and is inherited from the Control class by all controls. To demonstrate, let's create an example that draws on a Panel control when the top button is clicked and refreshes all or part of the panel in response to another button click. The user interface to this program is shown in Figure 8-2 and will be used in subsequent examples.

Figure 8-2. Interface to demonstrate using Graphics object to draw on a control

Listing 8-1 contains the code for the Click event handlers associated with each button. When the Decorate Panel button (btnDecor) is clicked, a Graphics object is created and used to draw a rectangle around the edge of the panel as well as a horizontal line through the middle. When the Refresh button (btnRefresh) is clicked, the panel's Invalidate method is called to redraw all or half of the panel. (More on the Invalidate command is coming shortly.)

using System.Drawing;
//
private void btnDecor_Click(object sender, System.EventArgs e)
{
   // Create a graphics object to draw on panel1
   Graphics cg = this.panel1.CreateGraphics();
   try (
      int pWidth  = panel1.ClientRectangle.Width;
      int pHeight = panel1.ClientRectangle.Height;
      // Draw a rectangle around border
      cg.DrawRectangle(Pens.Black,2,2,pWidth-4, pHeight-4);
      // Draw a horizontal line through the middle
      cg.DrawLine(Pens.Red,2,(pHeight-4)/2,pWidth-4,
                  (pHeight-4)/2);
   }
   finally {
      cg.Dispose();  // You should always dispose of object
   }
}
private void btnRefresh_Click(object sender,
                              System.EventArgs e)
{
// Invokes Invalidate to repaint the panel control
   if (this.radAll.Checked)   // Radio button - All
   {
      // Redraw panel1
      this.panel1.Invalidate();
      } else {
      // Redraw left half of panel1
      Rectangle r = new
            Rectangle(0,0,panel1.ClientRectangle.Width/2,
            ClientRectangle.Height);
      this.panel1.Invalidate(r); // Repaint area r
      this.panel1.Update();      // Force Paint event
   }
}

The btnDecor Click event handler uses the DrawRectangle and DrawLine methods to adorn panel1. Their parameters—the coordinates that define the shapes—are derived from the dimensions of the containing panel control. When the drawing is completed, the Dispose method is used to clean up system resources held by the object. (Refer to Chapter 4, “Working with Objects in C#,” for a discussion of the IDisposable interface.) You should always dispose of the Graphics object when finished with it. The try-finally construct ensures that Dispose is called even if an interrupt occurs. As shown in the next example, a using statement provides an equivalent alternative to try-finally.

The btnRefresh Click event handler is presented as a way to provide insight into how forms and controls are drawn and refreshed in a WinForms environment. A form and its child controls are drawn (displayed) in response to a Paint event. Each control has an associated method that is responsible for drawing the control when the event occurs. The Paint event is triggered when a form or control is uncovered, resized, or minimized and restored.

The Graphics class has three static methods that provide a way to obtain a Graphics object:

Each control inherits the Handle property from the Control class. This property can be used with the FromHwnd method as an alternative to the Control.CreateGraphics method. The following routine uses this approach to draw lines on panel1 when a MouseDown event occurs on the panel (see Figure 8-3).

Figure 8-3. Output for MouseDown example

Note that the Graphics object is created inside a using statement. This statement generates the same code as a try-finally construct that includes a g.Dispose() statement in the finally block.

private void panel1OnMouseDown(object sender, MouseEventArgs e)
{
   // The using statement automatically calls g.Dispose()
   using( Graphics g= Graphics.FromHwnd(panel1.Handle))
   {
      g.DrawLine(Pens.Red,e.X,e.Y,20,20);
   }
}

The Control.Invalidate method triggers a Paint event request. The btnRefresh_Click event handler in Listing 8-1 showed two overloads of the method. The parameterless version requests that the entire panel control be redrawn; the second specifies that only the portion of the control's region specified by a rectangle be redrawn.

Here are some of the overloads for this method:

public void Invalidate()
public void Invalidate(bool invalidatechildren)
public void Invalidate(Rectangle rc)
public void Invalidate(Rectangle rc, bool invalidatechildren)

Note: Passing a true value for the invalidatechildren parameter causes all child controls to be redrawn.

Invalidate requests a Paint event, but does not force one. It permits the operating system to take care of more important events before invoking the Paint event. To force immediate action on the paint request, follow the Invalidate statement with a call to Control.Update.

Let's look at what happens on panel1 after a Paint event occurs. Figure 8-4 shows the consequences of repainting the left half of the control. The results are probably not what you desire: half of the rectangle and line are now gone. This is because the control's paint event handler knows only how to redraw the control. It has no knowledge of any drawing that may occur outside of its scope. An easy solution in this case is to call a method to redraw the rectangle and line after calling Invalidate. But what happens if Windows invokes the Paint event because half of the form is covered and uncovered by another window? This clears the control and our code is unaware it needs to redraw the rectangle and line. The solution is to handle the drawing within the Paint event handler.

Figure 8-4. Effects of invalidating a region

Core Note

When a form is resized, regions within the original area are not redrawn. To force all of a control or form to be redrawn, pass the following arguments to its SetStyle method. Only use this when necessary, because it slows down the paint process.

this.SetStyle(ControlStyles.ResizeRedraw, true);

After the Paint event occurs, a data class PaintEventArgs is passed as a parameter to the Paint event handler. This class provides access to the Graphics object and to a rectangle ClipRectangle that defines the area where drawing may occur. Together, these properties make it a simple task to perform all the painting within the scope of the event handler.

Let's see how to rectify the problem in the preceding example, where our drawing on panel1 disappears each time the paint event occurs. The solution, of course, is to perform the drawing inside the paint event handler. To do this, first register our event handler with the PaintEventHandler delegate:

this.panel1.Paint += new PaintEventHandler(paint_Panel);

Next, set up the event handler with the code to draw a rectangle and horizontal line on the panel. The Graphics object is made available through the PaintEventArgs parameter.

private void paint_Panel( object sender, PaintEventArgs e)
{
   Graphics cg = e.Graphics;
   int pWidth  = panel1.ClientRectangle.Width;
   int pHeight = panel1.ClientRectangle.Height;
   cg.DrawRectangle(Pens.Black,2,2,pWidth-4, pHeight-4);
   cg.DrawLine(Pens.Red,2,(pHeight-4)/2,pWidth-4,
               (pHeight-4)/2);
   base.OnPaint(e);   // Call base class implementation
}

The Control.OnPaint method is called when a Paint event occurs. Its role is not to implement any functionality, but to invoke the delegates registered for the event. To ensure these delegates are called, you should normally invoke the OnPaint method within the event handler. The exception to this rule is: To avoid screen flickering, do not call this method if painting the entire surface of a control.

Painting is a slow and expensive operation. For this reason, PaintEventArgs provides the ClipRectangle property to define the area that is displayed when drawing occurs. Any drawing outside this area is automatically clipped. However, it is important to realize that clipping affects what is displayed—it does not prevent the drawing code from being executed. Thus, if you have a time-consuming custom paint routine, the entire painting process will occur each time the routine is called, unless you include logic to paint only what is needed.

The following example illustrates how to draw selectively. It paints a pattern of semi-randomly colored rectangles onto a form's panel (see Figure 8-5). Before each rectangle is drawn, a check is made to confirm that the rectangle is in the clipping area.

private void paint_Panel( object sender,  PaintEventArgs e)
{
   Graphics g = e.Graphics;
   for (int i = 0; i< this.panel1.Width;i+=20)
   {
      for (int j=0; j< his.panel1.Height;j+=20)
      {
         Rectangle r= new Rectangle(i,j,20,20);
         if (r.IntersectsWith(e.ClipRectangle))
         {
            // FromArgb is discussed in Color section
            Brush b = new SolidBrush(Color.FromArgb((i*j)%255,
                  (i+j)%255, ((i+j)*j)%255));
            g.FillRectangle(b,r);
            g.DrawRectangle(Pens.White,r);
         }
      }
   }
}

Figure 8-5. Pattern used in paint example

The key to this code is the Rectangle.IntersectsWith method that checks for the intersection of two rectangles. In this case, it tests for overlap between the rectangle to be drawn and the clip area. If the rectangle intersects the clip area, it needs to be drawn. Thus, the method can be used to limit the portion of the screen that has to be repainted. To test the effects, this code was run with and without the IntersectsWith method. When included, the event handler required 0 to 17 milliseconds—depending on the size of the area to be repainted. When run without IntersectsWith, the event handler required 17 milliseconds to redraw all the rectangles.

Another approach to providing custom painting for a form or control is to create a subclass that overrides the base class's OnPaint method. In this example, myPanel is derived from the Panel class and overrides the OnPaint method to draw a custom diagonal line through the center of the panel.

// New class myPanel inherits from base class Panel
public class myPanel: Panel
{
   protected override void OnPaint(PaintEventArgs e)
   {
      Graphics g = e.Graphics;
      g.DrawLine(Pens.Aqua,0,0,this.Width,this.Height);
      base.OnPaint(e);
   }
}

Unless the new subclass is added to a class library for use in other applications, it is simpler to write an event handler to provide custom painting.

The GraphicsPath class, which is a member of the System.Drawing.Drawing2D namespace, is used to create a container for a collection of primitive shapes. Succinctly, it permits you to add basic shapes to its collection and then to treat the collection as a single entity for the purpose of drawing and filling the overall shape. Before looking at a code example, you should be aware of some of the basic features of the GraphicsPath class:

The following code creates and displays the Infinity Cross shown in Figure 8-7. It is constructed by adding five polygons to the GraphicsPath container object. The Graphics object then draws the outline and fills in the cross.

// g is the Graphics object
g.SmoothingMode = SmoothingMode.AntiAlias;
// Define five polygons
Point[] ptsT= {new Point(120,20),new Point(160,20),
      new Point(140,50)};
Point[] ptsL= {new Point(90,50),new Point(90,90),
      new Point(120,70)};
Point[] ptsB= {new Point(120,120),new Point(160,120),
      new Point(140,90)};
Point[] ptsR= {new Point(190,90), new Point(190,50),
      new Point(160, 70)};
Point[] ptsCenter = {new Point(140,50), new Point(120,70),
      new Point(140,90), new Point(160,70)};
// Create the GraphicsPath object and add the polygons to it
GraphicsPath gp = new GraphicsPath();
gp.AddPolygon(ptsT);   // Add top polygon
gp.AddPolygon(ptsL);   // Add left polygon
gp.AddPolygon(ptsB);   // Add bottom polygon
gp.AddPolygon(ptsR);   // Add right polygon
gp.AddPolygon(ptsCenter);
g.DrawPath(new Pen(Color.Red,2),gp); // Draw GraphicsPath
g.FillPath(Brushes.Gold,gp); // Fill the polygons

Figure 8-7. Infinity Cross

Instead of drawing and filling each polygon separately, we use a single DrawPath and FillPath statement to do the job.

The GraphicsPath class has several methods worth exploring—AddCircle, AddArc, AddEllipse, AddString, Warp, and others—for applications that require the complex manipulation of shapes. One of the more interesting is the Transform method that can be used to rotate or shift the coordinates of a DrawPath object. This following code segment offers a taste of how it works. A transformation matrix is created with values that shift the x coordinates by 50 units and leave the y coordinates unchanged. This Transform method applies the matrix to the DrawPath and shifts the coordinates; the shape is then drawn 50 units to the right of the first shape.

Matrix translateMatrix = new Matrix();
translateMatrix.Translate(50, 0);  // Offset x coordinate by 50
gp.Transform(translateMatrix);     // Transform path
g.DrawPath(Pens.Orange,gp);        // Display at new location

One of the reasons for placing shapes on a form is to permit a user to trigger an action by clicking a shape—as if she had clicked a button. Unlike a control, you cannot associate an event with a shape. Instead, you associate a MouseDown event with the container that holds the shape(s). Recall that a MouseDown event handler receives the x and y coordinates where the event occurs. After it has these, it is a simple process to use the rectangle and GraphicsPath methods to verify whether a point falls within their area:

bool Rectangle.Contains(Point(x,y))
bool GraphicsPath.IsVisible(Point(x,y))

To illustrate, consider an application that displays a map of US states and responds to a click on a state by displaying the name of the state capital. The map image is placed in a PictureBox, and rectangles and polygons are drawn on the states to set up the hit areas that respond to a MouseDown event. Figure 8-8 shows how the picture box's paint handler routine draws rectangles on three states and a polygon on Florida. (Of course, the shapes would not be visible in the actual application.) To respond to a pressed mouse key, set up a delegate to call an event handler when the MouseDown event occurs:

this.pictureBox1.MouseDown += new
      MouseEventHandler(down_Picture);

Figure 8-8. Hit test example

The following code implements event handler logic to determine if the mouse down occurs within the boundary of any shape.

private void down_Picture( object sender, MouseEventArgs e)
{
   // Rectangles and GraphicsPath gp are defined
   // as class variables
   if (rectNC.Contains(e.X,e.Y) )
   { MessageBox.Show("Capital: Raleigh"); }
   else if(rectSC.Contains(e.X,e.Y))
   { MessageBox.Show("Capital: Columbia");}
   else if(rectGA.Contains(e.X,e.Y))
   { MessageBox.Show("Capital: Atlanta");}
   else if(gp.IsVisible(e.X,e.Y))
   {MessageBox.Show("Capital: Tallahassee");}
}

After you have a basic understanding of how to create and use shapes, the next step is to enhance these shapes with eye catching graphical effects such as gradients, textured colors, and different line styles and widths. This requires an understanding of the System.Drawing classes: Pen, Brush, and Color.

This property defines the line style, which can be Solid, Dash, Dot, DashDot, DashDotDot, or Custom (see Figure 8-9). The property's value comes from the DashStyle enumeration.

Pen p1 = new Pen(Color.Black, 3);
p1.DashStyle = DashStyle.Dash;
g.DrawLine(p1,20,20,180,20);

Figure 8-9. DashStyles and LineCaps

These properties define the shape used to begin and end a line. The value comes from the LineCap enumeration, which includes ArrowAnchor, DiamondAnchor, Round, RoundAnchor, Square, SquareAnchor, and Triangle. Examples of the DiamondAnchor and RoundAnchor are shown in Figure 8-9. The following code is used to create the lines in the figure:

Graphics g = pictureBox1.CreateGraphics();
Pen p1 = new Pen(Color.Black, 5);
p1.StartCap = LineCap.DiamondAnchor;
p1.EndCap   = LineCap.RoundAnchor;
int yLine = 20;
foreach(string ds in Enum.GetNames(typeof(DashStyle)))
{
   if (ds != "Custom") // Ignore Custom DashStyle type
   {
      // Parse creates an enum type from a string
      p1.DashStyle = (DashStyle)Enum.Parse(
                     typeof(DashStyle), ds);
      g.DrawLine(p1,20,yLine,120,yLine);
      g.DrawString(ds,new Font("Arial",10),Brushes.Black,
                   140,yLine-8);
      yLine += 20;
   }
}

The code loops through the DashStyle enumeration and draws a line for each enum value except Custom. It also uses the DrawString method to display the name of the enumeration values. This method is discussed in Chapter 9.

As the name implies, this class fills the interior of a shape with a hatched appearance.

Constructors:

public HatchBrush(HatchStyle hStyle, Color forecolor)
public HatchBrush(HatchStyle hstyle, Color forecolor,
                  Color backcolor)

Parameters:

The predefined HatchStyle patterns make it a simple process to create elaborate, multi-color fill patterns. The following code is used to create the DarkVertical and DottedDiamond rectangles at the top of each column in Figure 8-10.

Graphics g = pictureBox1.CreateGraphics();
// Fill Rectangle with DarkVertical pattern
Brush b = new HatchBrush(HatchStyle.DarkVertical,
                         Color.Blue,Color.LightGray);
g.FillRectangle(b,20,20,80,60);
// Fill Rectangle with DottedDiamond pattern
b = new HatchBrush(HatchStyle.DottedDiamond,
                   Color.Blue,Color.LightGray);
g.FillRectangle(b,120,20,80,60);

Figure 8-10. Using HatchBrush with some of the available hatch styles

In its simplest form, this class creates a transition that takes one color and gradually blends it into a second color. The direction of the transition can be set to horizontal, vertical, or any specified angle. The location where the transition begins can be set to a focal point other than the beginning of the area to be filled in. In cases where the gradient must be tiled to completely fill an area, options are available to control how each repeat is displayed. These options can be confusing, so let's begin with how to create a gradient brush and then work with examples that demonstrate the more useful properties and methods of the LinearGradientBrush class.

Constructors:

public LinearGradientBrush(Rectangle rect, Color color1,
   Color color2, LinearGradientMode linearGradientMode)

public LinearGradientBrush(Rectangle rect, Color color1,
   Color color2, float angle)

Parameters:

There is no substitute for experimentation when it comes to understanding graphics related concepts. Figure 8-11 shows the output from filling a rectangle with various configurations of a LinearGradientBrush object. Here is the code that creates these examples:

// Draw rectangles filled with gradient in a pictureBox
Graphics g = pictureBox1.CreateGraphics();
Size sz = new Size(100,80);
Rectangle rb = new Rectangle(new Point(20,20),sz);
// (1) Vertical Gradient (90 degrees)
LinearGradientBrush b = new
      LinearGradientBrush(rb,Color.DarkBlue,Color.LightBlue,90);
g.FillRectangle(b,rb);
rb.X=140;
// (2) Horizontal Gradient
b = new LinearGradientBrush(rb,Color.DarkBlue,
                            Color.LightBlue,0);
g.FillRectangle(b,rb);
rb.Y = 120;
rb.X = 20;
// (3) Horizontal with center focal point
b = new LinearGradientBrush(rb,Color.DarkBlue,
                            Color.LightBlue,0);
// Place end color at position (0-1) within brush
b.SetBlendTriangularShape(.5f);
g.FillRectangle(b,rb);

Figure 8-11. LinearGradientBrush examples: (1) Vertical, (2) Horizontal, (3) Focus Point, (4) Tiling

The main point of interest in this code is the use of the SetBlendTriangularShape method to create the blending effect shown in the third rectangle in Figure 8-11. This method takes an argument between 0 and 1.0 that specifies a relative focus point where the end color is displayed. The gradient then “falls off” on either side of this point to the start color.

The fourth rectangle in the figure is created by repeating the original brush pattern. The following code defines a small gradient brush that is used to fill a larger rectangle:

// Tiling Example – create small rectangle for gradient brush
Rectangle rb1 = new Rectangle(new Point(0,0),new Size(20,20));
b = new LinearGradientBrush(rb,Color.DarkBlue,
                            Color.LightBlue,0);
b.WrapMode = WrapMode.TileFlipX;
// Fill larger rectangle with repeats of small gradient rectangle
g.FillRectangle(b,rb);

Notice how the light and dark colors are reversed horizontally before each repeat occurs: [light-dark][dark-light]. The WrapMode property determines how the repeated gradient is displayed. In this example, it is set to the WrapMode enum value of TileFlipX, which causes the gradient to be reversed horizontally before repeating. The most useful enum values include the following:

b = new LinearGradientBrush(rb,Color.Empty,Color.Empty,0);
ColorBlend myBlend = new ColorBlend();
// Specify colors to include in gradient
myBlend.Colors = new Color[]
      {Color.Red, Color.White, Color.Blue,};
// Position of colors in gradient
myBlend.Positions = new float[] {0f, .5f, 1f};
b.InterpolationColors = myBlend;  // Overrides constructor colors

The Color structure provides three static methods for creating a Color object: FromName, FromKnownColor, and FromArgb. FromName takes the name of a color as a string argument and creates a new struct: Color magenta = Color.FromName("Magenta"). The name must match one in the KnownColor enumeration values, which is an enumeration of all the colors represented as properties in the Color and SystemColor structures.

FromKnownColor takes a KnownColor enumeration value as its argument and produces a struct for that color:

Color magenta = Color.FromKnownColor(KnownColor.Magenta);

FromArgb allows you to specify a color by RGB and alpha values, which makes it easy to change the transparency of an existing color. Here are some of its overloads:

// (r, g, b)
Color slate1 = Color.FromArgb (112, 128, 144);
// (alpha, r, g, b)
Color slate2 = Color.FromArgb (255, 112, 128, 144);
// (alpha, Color)
Color lightslate = Color.FromArgb(50, slate2 );

The Color structure has four properties that return the ARGB values of a color: Color.A, Color.R, Color.G, and Color.B. All of these properties have a value in the range 0 to 255.

Color slateGray = Color.FromArgb(255,112,128,144);
byte a = slateGray.A;              // 255
byte r = slateGray.R;              // 112
byte g = slateGray.G;              // 128
byte b = slateGray.B;              // 144

The individual HSB values of a color can be extracted using the Color.GetHue, GetSaturation, and GetBrightness methods. The hue is measured in degrees as a value from 0.0 to 360.0. Saturation and brightness have values between 0 and 1.

Color slateGray = Color.FromArgb(255,112,128,144);
float hue = slateGray.GetHue();            //  210 degrees
float sat = slateGray.GetSaturation();     // .125
float brt = slateGray.GetBrightness();     // .501

Observe in Figure 8-12 that the hue of 210 degrees (moving clockwise from 0) falls between cyan and blue on the circle—which is where you would expect to find a slate gray color.

Icons (.ico files) do not inherit from the Image class and cannot be rendered by the DrawImage method; instead, they use the Graphics.DrawIcon method. To display one, create an Icon object and pass the file name or Stream object containing the image to the constructor. Then, use DrawIcon to display the image at a desired location.

Icon icon = new Icon("c:\clock.ico");
g.DrawIcon(icon,120,220);  // Display at x=120, y=220
icon.Dispose();            // Always dispose of object
g.Dispose();

Operations that rotate or skew an image normally rely on the DrawImage overload that maps three corners of the original image to destination points that define a parallelogram.

void DrawImage(Image image, Point destPoints[])

Recall from an earlier example that the destination points are the new coordinates of the upper-left, upper-right, and lower-left corners of the source image. Figure 8-15 illustrates the effects that can be achieved by altering the destination points.

Figure 8-15. Manipulation using DrawImage

The following code is used to create a mirrored image from the original image. Think of the image as a page that has been turned over from left to right: points a and b are switched, and point c is now the lower-right edge.

Bitmap bmp = new Bitmap(fname);               // Get image
// Mirror Image
Point ptA = new Point(bmp.Width,0);           // Upper left
Point ptB = new Point(0,0);                   // Upper right
Point ptC = new Point(bmp.Width, bmp.Height); // Lower left
Point[]dp = {ptA,ptB,ptC};
g.DrawImage(bmp,dp);

Many of these same effects can be achieved using the Bitmap.RotateFlip method, which has this signature:

Public void RotateFlip(RotateFlipType rft)

RotateFlipType is an enumeration that indicates how many degrees to rotate the image and whether to “flip” it after rotating (available rotations are 90, 180, and 270 degrees). Here are a couple of examples:

// Rotate 90 degrees
bmp.RotateFlip(RotateFlipType.Rotate90FlipNone);
// Rotate 90 degrees and flip along the vertical axis
bmp.RotateFlip(RotateFlipType.Rotate90FlipY);
// Flip horizontally (mirror)
bmp.RotateFlip(RotateFlipType.RotateNoneFlipX);

The most important thing to recognize about this method is that it changes the actual image in memory—as opposed to DrawImage, which simply changes it on the drawing surface. For example, if you rotate an image 90 degrees and then rotate it 90 degrees again, the image will be rotated a total of 180 degrees in memory.

All of the preceding examples are based on drawing directly to a visible panel control on a form. It is also possible to load an image into, or draw your own image onto, an internal Bitmap object before displaying it. This can offer several advantages:

To demonstrate, let's input a two-color image, place it in memory, change pixels in it, and write it to a panel. Figure 8-16 shows the initial image and the final image after pixels are swapped.

Figure 8-16. Use GetPixel() and SetPixel() to swap pixels

The following code creates a Bitmap object bmpMem that serves as a buffer where the pixels are swapped on the flag before it is displayed. We use the Graphics.FromImage method to obtain a Graphics object that can write to the image in memory. Other new features to note are the use of GetPixel and SetPixel to read and write pixels on the image.

Graphics g = pan.CreateGraphics();  // Create from a panel
Bitmap bmp = new Bitmap("c:\flag.gif");
g.DrawImage(bmp,0,0);         // Draw flag to panel
Bitmap bmpMem = new Bitmap(bmp.Width,bmp.Height);
Graphics gMem = Graphics.FromImage(bmpMem);
gMem.DrawImage(bmp,0,0);      // Draw flag to memory
// Define a color object for the red pixels
Color cnRed = Color.FromArgb(255,214,41,33);  // a,r,g,b
// Loop through all pixels in image and swap them
for (int y=0; y<bmpMem.Height; y++)
{
   for (int x=0; x<bmpMem.Width; x++)
   {
      Color px = bmpMem.GetPixel(x,y);
      if(px.G > 240)
         bmpMem.SetPixel(x,y, cnRed);         // Set white to red
      else  bmpMem.SetPixel(x,y,Color.White); // Set red to white
   }
}
g.DrawImage(bmpMem,0,0);        // Display reversed flag on panel
gMem.Dispose();
g.Dispose();

Core Note

Applications that dynamically create images for display should draw them offscreen onto a Bitmap and then render them to the screen when completed.

The following fields are defined at the form level to make them available for menu operations:

private Bitmap bmp;          // Holds original loaded image
private Bitmap newbmp;       // Holds latest version of image
private bool imageStatus = false; // Indicates image is loaded
private int resizeLevel;     // Level image magnified/reduced

Listing 8-4 contains the code for the menu options to load an image into the viewing panel, flip an image, mirror an image, and refresh the viewing panel. The Image-Copy option is discussed in the code related to manipulating the image on panel2.

Private void menuItem6_Click(object sender, System.EventArgs e)
{
   // Load image from file
   OpenFileDialog fd = new OpenFileDialog();
   fd.InitialDirectory = "c:\" ;
   fd.Filter = "Image Files | *.JPG;*.GIF";
   if (fd.ShowDialog() == DialogResult.OK)
   {
      string fname= fd.FileName;
      using(Graphics g = panel1.CreateGraphics())
      {
         bmp = new Bitmap(fname); // Load image from file
         newBmp = bmp;            // Save copy of image
         // Clear main panel before drawing to it
         g.FillRectangle(Brushes.White,0,0,
               panel1.Width,panel1.Height );
         Rectangle r = new Rectangle(0,0,bmp.Width,
               bmp.Height);
         g.DrawImage(bmp,r);      // Draw image on panel
         ImageStatus = true;      // Indicates image exists
         // Clear small panel
         Graphics gClear= panel2.CreateGraphics();
         g.FillRectangle(Brushes.White,0,0,
               panel2.Width,panel2.Height );
         gClear.Dispose();
      }
   }
}
private void menuItem4_Click(object sender, System.EventArgs e)
{
   // Mirror image
   Graphics g= panel1.CreateGraphics();
   int h = newBmp.Height;
   int w = newBmp.Width;
   Point[] destPts = {
               new Point(w,0),
               new Point(0,0),
               new Point(w,h) };
   Bitmap tempBmp = new Bitmap(w,h);
   Graphics gr= Graphics.FromImage(tempBmp);
   gr.DrawImage(newBmp, destPts);  // Mirror temporary image
   g.DrawImage(tempBmp,0,0);       // Draw image on panel
   newBmp = tempBmp;               // Set to mirrored image
   g.Dispose();
   gr.Dispose();
}
private void menuItem3_Click(object sender, System.EventArgs e)
{
   // Flip image vertically
   newBmp.RotateFlip(RotateFlipType.RotateNoneFlipY);
   Graphics g = panel1.CreateGraphics();
   g.DrawImage(newBmp,0,0);
   g.Dispose();
}
private void menuItem9_Click(object sender, System.EventArgs e)
{
   // Refresh Screen
   panel1.Invalidate();    // Redraw entire panel
   panel1.Update();
   selectStatus = false;   // Refreshing removes selected area
}

The file loading routine displays a dialog box for the user to enter the image file name. If this image file exists, it is opened and displayed in panel1. If the image is larger than the panel, it is cropped.

The method that mirrors an image first creates a temporary Bitmap and uses DrawImage, as described earlier, to mirror the image to its surface. The mirrored image is displayed in the panel and saved in newBmp. Flipping could be done in a similar way, but for demonstration purposes, we use the RotateFlip method to directly transform newBmp before it is displayed.

The screen refresh routine simply calls Invalidate and Update to redraw the image on panel1. The main effect of this is to remove any selection rectangle (discussed next) that has been drawn on the image.

Listing 8-5 contains event handlers for Paint, MouseDown, MouseUp, and MouseMove. These routines permit the user to select a rectangular area on the image that can then be copied to panel2. The event handling routines are associated with the events using this code in the constructor:

panel1.MouseDown += new MouseEventHandler(Mouse_Down);
panel1.MouseUp   += new MouseEventHandler(Mouse_Up);
panel1.MouseMove += new MouseEventHandler(Mouse_Move);
panel1.Paint     += new PaintEventHandler(RePaint);

The following fields, defined at the form level, are used to keep status information:

private Point lastPoint = Point.Empty; // Tracks mouse movement
private Point origPoint = Point.Empty; // Mouse down coordinates
private Rectangle rectSel;             // Selected area
private bool selectStatus = false;     // True if area selected

When a MouseDown occurs, origPoint is set to the x,y coordinates and serves as the origin of the rectangle that is to be drawn. Dragging the mouse results in a rectangle being displayed that tracks the mouse movement. The MouseMove event handler must draw the rectangle at the new position and erase the previous rectangle. It uses lastPoint and origPoint to determine the part of the image to redraw in order to erase the previous rectangle. The new rectangle is determined by the current mouse coordinates and origPoint. When the MouseUp event occurs, rectSel is set to the final rectangle.

private void RePaint(object sender, PaintEventArgs e)
{
   Graphics g = e.Graphics;
   // Redraw part of current image to panel
   if (ImageStatus) g.DrawImage(newBmp,
       e.ClipRectangle,e.ClipRectangle, GraphicsUnit.Pixel);
   base.OnPaint(e);
}
private void Mouse_Down(object sender, MouseEventArgs e)
{
   if (lastPoint != Point.Empty)
   {
      panel1.Invalidate(rectSel); // Clear previous rect.
      panel1.Update();
   }
   lastPoint.X= e.X;
   lastPoint.Y= e.Y;
   origPoint = lastPoint;   // Save origin of selected area
   selectStatus=true;
}
private void Mouse_Up(object sender, MouseEventArgs e)
{
   // Selected area complete. Define it as a rectangle.
   rectSel.X = e.X;
   if (e.X > origPoint.X) rectSel.X = origPoint.X;
   rectSel.Y = origPoint.Y;
   rectSel.Width = Math.Abs(e.X- origPoint.X)+1;
   rectSel.Height= Math.Abs(e.Y - origPoint.Y)+1;
   origPoint = Point.Empty;
   if (rectSel.Width < 2) selectStatus=false;
}
private void Mouse_Move(object sender, MouseEventArgs e)
{
   // Tracks mouse movement to draw bounding rectangle
   if (origPoint != Point.Empty)
   {
      Rectangle r;
      Rectangle rd;
      // Get rectangle area to invalidate
      int xop = origPoint.X;
         if (xop > lastPoint.X) xop= lastPoint.X;
         int w = Math.Abs(origPoint.X - lastPoint.X)+1;
         int h = lastPoint.Y - origPoint.Y+1;
         r = new Rectangle(xop,origPoint.Y,w,h);
         // Get rectangle area to draw
         xop = e.X >= origPoint.X ? origPoint.X:e.X;
         w = Math.Abs(origPoint.X - e.X);
         h = e.Y - origPoint.Y;
         rd = new Rectangle(xop, origPoint.Y,w,h);
         Graphics g = panel1.CreateGraphics();
         // Redraw image over previous rectangle
         g.DrawImage(newBmp,r,r);
         // Draw rectangle around selected area
         g.DrawRectangle(Pens.Red,rd);
         g.Dispose();
         lastPoint.X= e.X;
         lastPoint.Y= e.Y;
   }
}

The logic for creating the rectangles is based on establishing a point of origin where the first MouseDown occurs. The subsequent rectangles then attempt to use that point's coordinates for the upper left corner. However, if the mouse is moved to the left of the origin, the upper left corner must be based on this x value. This is why the MouseUp and MouseMove routines check to see if the current x coordinate e.x is less than that of the origin.

The following code is executed when Image – Copy is selected from the menu. The selected area is defined by the rectangle rectSel. The image bounded by this rectangle is drawn to a temporary Bitmap, which is then drawn to panel2. A copy of the contents of panel2 is always maintained in the Bitmap smallBmp.

if (selectStatus)
{
   Graphics g = panel2.CreateGraphics();
   g.FillRectangle(Brushes.White,panel2.ClientRectangle);
   Rectangle rd = new
         Rectangle(0,0,rectSel.Width,rectSel.Height);
   Bitmap temp = new Bitmap(rectSel.Width,rectSel.Height);
   Graphics gi = Graphics.FromImage(temp);
   // Draw selected portion of image onto temp
   gi.DrawImage(newBmp,rd,rectSel,GraphicsUnit.Pixel);
   smallBmp = temp;   // save image displayed on panel2
   // Draw image onto panel2
   g.DrawImage(smallBmp,rd);
   g.Dispose();
    resizeLevel = 0;  // Keeps track of magnification/reduction
}

The plus (+) and minus (–) buttons are used to enlarge or reduce the image on panel2. The actual enlargement or reduction is performed in memory on smallBmp, which holds the original copied image. This is then drawn to the small panel. As shown in the code here, the magnification algorithm is quite simple: The width and height of the original image are increased in increments of .25 and used as the dimensions of the target rectangle.

// Enlarge image
Graphics g = panel2.CreateGraphics();
if (smallBmp != null)
{
   resizeLevel= resizeLevel+1;
   float fac= (float) (1.0+(resizeLevel*.25));
   int w = (int)(smallBmp.Width*fac);
   int h = (int)(smallBmp.Height*fac);
   Rectangle rd= new Rectangle(0,0,w,h);  // Destination rect.
   Bitmap tempBmp = new Bitmap(w,h);
   Graphics gi = Graphics.FromImage(tempBmp);
   // Draw enlarged image to tempBmp Bitmap
   gi.DrawImage(smallBmp,rd);
   g.DrawImage(tempBmp,rd);   // Display enlarged image
   gi.Dispose();
}
g.Dispose();

The code to reduce the image is similar, except that the width and height of the target rectangle are decremented by a factor of .25:

resizeLevel= (resizeLevel>-3)?resizeLevel-1:resizeLevel;
float fac= (float) (1.0+(resizeLevel*.25));
int w = (int)(smallBmp.Width*fac);
int h =(int) (smallBmp.Height*fac);