Introduction

   In order to follow this tutorial step-by-step you will need to have installedVisual Studio .NET and .NET Framework. If you only want to take a look at the application, then you will need only .NET Framework.

Getting to Work

          The first thing we need to do is open Visual Studio .NET and create a new Windows Application ( File -> New -> Project -> Visual C# Projects -> Windows Application ). Name the project as you desire and set its location to where you think it's appropriate.
For the first part, we will design the application by adding different controls and in the second part we'll get down to coding.
Let's select from the Toolbox a ComboBox control and drop it on our form (if the Toolbox is not visible, select View -> Toolbox or simply press Ctrl + Alt + X ). Set its DropDownStyle property to DropDownList and add the following strings to the Items property of the ComboBox: "Line", "EmptyEllipse", "FilledEllipse", "EmptyRectangle","FilledRectangle". Next, let's add a GroupBox control and set its Text to "Border". Inside it, add two Labels. Set the Text property of the first to "Color", and the second's Text to "Size". Now add a Button in theGroupBox. Set its FlatStyle property to Flat and its BackColor to Black. Also, erase the Text property, set its Name to btn_border and change its Cursor property to Hand. From this Button we will choose later the color of the border.

   The last thing we will add in the Border GroupBox is a NumericUpDown control. Set its TextAlign property to Center, it's Value to 2 and it'sName to n_size.

   Now, let's add another GroupBox and set its Text to "Fill". Inside it, we will add a Label with the Text property set to "Color" and a Button. Set the Button's FlatStyle to Flat, its BackColor to LightGray, its Cursor property to Hand, erase the Text and leave it blank. Finally, set its Name property to btn_fill. We will need a control to draw on, so let's add a Panel control and set it's BackColor to "WhiteSmoke". We are finished with the design.

   Here is the application's interface so far:

    Finally, we've reached the coding part of the application. Let's begin by declaring some variables that we will use through the application:

    The fill and border colors will be used to store the color of the shape's border and the filling color of the shape(where is necessary). The bool variablemouse_is_down will hold the state of the mouse (if the mouse is pressed, we will be able to draw the shape. If it isn't, we won't draw it). The start Point variable is used to store the coordinates of the Point where the mouse was pressed. And finally, the Graphics object will be created based on the surface on witch we will draw (in this case, the Panel control).
    Let's go into Design view and double-click the form's surface. A method called form1_Load will be created by Visual Studio .NET. In this method we will do some application initialization:

    We create an instance of the ColorDialog class; we set some of its properties to have a bigger range of colors. The next thing we do is display it. After the user presses OK, we'll set the BackColor property of our Button to the color selected by the user. Also, we update the border color.
Something similar needs to be done for the other Button, btn_fill:

    Now that we have allowed the user to select custom colors, we should begin drawing. To do this, let's go to Design view and select the Panel. In the Properties window, click the Events button. Scroll down to the Mouse section and double-click the MouseDown property. You will notice that a method calledpanel1_MouseDown has been created. Do the same for the MouseMove and MouseUp properties.
Let's go now to the panel1_MouseDown method. This method occurs when the mouse was pressed on the surface on the Panel. Here, we should add the following:

    We set the mouse_is_down variable to true, and we get the position of the mouse. Let's go now to the panel1_MouseUp method. This method occurs when the mouse is no longer pressed. Here we must set the mouse_is_down variable to false.

    Go to the panel1_MouseMove method. Here, we will do the drawing part.

    All the code in this method will execute only if mouse_is_down variable in set to true. The first step is to clear the graphics object obtained from thePanel. Next, we must draw the shapes according to the selected index of theComboBox.

    If the selected index of the ComboBox is 0 ( the first option in the list -- in our case "Line" ), we draw a line. A Pen object is created based on the color of the border and the value of the NumericUpDown control. The next two parameters of the DrawLine method are the start point and the end point. When the mouse was pressed, we remember the coordinates of the mouse. During the move of the mouse, the line is redrawn using the start coordinate and the actual location of the mouse's cursor.

    The next value in the ComboBox represents the EmptyEllipse shape.

   Here, the DrawEllipse method accepts as parameters the start point, the height and the width. These values are calculated by subtracting from the current position on the mouse the start value.

   For the FilledEllipse shape first we draw the EmptyEllipse and then we useFillEllipse method to draw the fill color. You notice that we created a newSolidBrush object, based on the fill color.

   The EmptyRectangle shape is drawn exactly like the EmptyEllipse:

   Finally, the FilledRectangle:

   When using a switch statement, it is recommended that we treat a default case, in witch we do nothing.

   Run the application and begin drawing.

   Here is the application in action:

          That's it for now. Until next time, good luck and happy programming!

Raul POPESCU

Attachments:

  Project Files: DrawShapesWithGDI+.zip