Simple Paint Tutorial

Hey guys, Botch here, and today I will be bringing you a simple tutorial on how to create a Paint program using the C# programming language and the Microsoft Visual Studios IDE.​

​

Visual Studios Download​

http://www.visualstudio.com/downloads/download-visual-studio-vs​

​

*NOTE* This tutorial is being made assuming that you have an understanding of programming concepts. Therefore, I will not be covering steps such as: creating a project and navigating the IDE. C# knowledge would also be great for this tutorial (if you don't know C#, just google 'C# Tutorials' and you will find plenty ).​

​

Alright, let's get started, shall we?​

​

Assuming that you have your Visual Studios program running, create a new C# Windows Forms Application and name it whatever you wish (I am naming mine 'botchPaintTut' for the sake of this tutorial).​

​

Once your solution is loaded, you should be presented with a blank GUI to work on. You can change the theme if you wish using the properties of the form, but I will be using the default Windows form. Adjust the size so that your project's form is a lot larger than the one that is given (my dimensions are (619x397).​

Add a panel, two buttons, and a numericUpDown control to your form. Change the text of the first button to 'Choose Color' and the text of the second to 'Clear Screen'. You can position these however you like, though for the sake of the tutorial you should probably position them like mine.​

http://puu.sh/7sNQu.jpg​

​

Now, double click on the main form (not the area where your panel is, the actual form!) and it will bring you to the code window, where a method called 'Form1_Load' will have been generated. Now we get to the fun part, the coding of the application.​

​

Add this to the aforementioned method:​

Code:

MessageBox.Show("", "");
Cursor = Cursors.Hand;

Add whatever you want for the MessageBox's text, just remember that the first string is the content and the second string is the title of the MessageBox. The second line is just setting the cursor to the 'hand' cursor when you hover over the project.​

​

Next, define the boolean variable 'active' as false, and add an object reference to the 'SolidBrush' class called 'paint'.​

Your coding should now look like this:​

http://puu.sh/7sOus.png​

​

Now that your only variables are defined, let's handle the clearing of the paint program first. If you haven't guessed already, the 'panel' control we added before is going to be used as the canvas for our designs. The drawing of the paint will be soon after this, but let's add the clearing of the canvas first. ​

​

Go back to your Form1 design page (where we added the controls) and double click on your second button, with the text 'Clear Screen'. It will bring us back to the code page and generate a method known as 'button2_Click' (though in my case, it will say 'buttonX2_Click' as I am using a different button control).​

Add the following coding:​

Code:

Graphics drawingBoard = panel1.CreateGraphics();
            drawingBoard.Clear(panel1.BackColor);

This will, on the click of the button, clear the any color that is on the panel at the time.​

​

Now, you want to create the same method, but for button1, with the text 'Choose Color'. Once the method has been generated, add the following coding:​

Code:

ColorDialog dialog = new ColorDialog();
            dialog.AnyColor = true;
            
            if (dialog.ShowDialog() == DialogResult.OK)
            {
                paint = new SolidBrush(dialog.Color);
            }

When the first button is clicked, it will bring up a color dialog control. Dialog.AnyColor makes it so any color can be chosen as the paint color (imagine that). The conditional statement afterwards checks if a color has been chosen, and then sets the SolidBrush reference that we created before (paint) to that color.​

​

Your coding should look like this:​

http://puu.sh/7sPsN.png​

​

Now, go back to your Form Design, and click once on the panel control. Go over to the panel's properties and click on the little lightning bolt tab, which is the events of panel1. Some common events are buttonClick and mouseEnter, to give you a picture.​

http://puu.sh/7sPKD.png​

​

Add three events for your panel: MouseDown, MouseUp, and MouseMove.​

Once these three have been added, simply add these two lines of code into the MouseDown and MouseUp events:​

Code:

//MouseDown active = true; //MouseUp active = false;

Your code should look like this: ​

http://puu.sh/7sQx5.png​

​

Now, in the 'panel1_MouseMove' method, add in this final code:​

Code:

uint size = (uint)numericUpDown1.Value;if(active){Graphics paintB = panel1.CreateGraphics();paintB.FillEllipse(paint, e.X, e.Y, size, size); //creates circle with chosen color, size of numericUpDown1's value}

Your completed program's code should look like this:
http://puu.sh/7sRq9.png​

​

Here is a picture of the finished product in action, and I hope you guys enjoyed my tutorial!​

http://puu.sh/7sRGv.png​