C# - Simple Drawing Application

Submitted by razormist on Thursday, May 3, 2018 - 22:11.
In this tutorial we will create a Simple Drawing Application using C#. C# is a general-purpose, object-oriented programming language. C# automatically manages inaccessible object memory using a garbage collector, which eliminates developer concerns and memory leaks. C# is faster than dynamically typed languages because things are more clearly defined. It contains several classes that support any C# platforms, like game development. It has a friendly environment for all new developers. So let's do the coding.

Getting Started

First you will have to download & install the Visual Studio. Visual Studios is an open source development feel free to create any application that you want. Here's the link for the Visual Studio https://www.visualstudio.com/.

Application Design

We will now create the design for the application, first locate the designer file called form1.Designer.cs, this is the default name when you create a new windows form. Then write these codes inside your designer file.
  1. namespace Simple_Drawing_Application
  2. {
  3.     partial class Form1
  4.     {
  5.         /// <summary>
  6.         /// Required designer variable.
  7.         /// </summary>
  8.         private System.ComponentModel.IContainer components = null;
  9.  
  10.         /// <summary>
  11.         /// Clean up any resources being used.
  12.         /// </summary>
  13.         /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
  14.         protected override void Dispose(bool disposing)
  15.         {
  16.             if (disposing && (components != null))
  17.             {
  18.                 components.Dispose();
  19.             }
  20.             base.Dispose(disposing);
  21.         }
  22.  
  23.         #region Windows Form Designer generated code
  24.  
  25.         /// <summary>
  26.         /// Required method for Designer support - do not modify
  27.         /// the contents of this method with the code editor.
  28.         /// </summary>
  29.         private void InitializeComponent()
  30.         {
  31.             this.pb_canvas = new System.Windows.Forms.PictureBox();
  32.             this.label1 = new System.Windows.Forms.Label();
  33.             this.comboBox1 = new System.Windows.Forms.ComboBox();
  34.             this.menuStrip1 = new System.Windows.Forms.MenuStrip();
  35.             this.exitToolStripMenuItem = new System.Windows.Forms.ToolStripMenuItem();
  36.             this.quitToolStripMenuItem = new System.Windows.Forms.ToolStripMenuItem();
  37.             this.editToolStripMenuItem = new System.Windows.Forms.ToolStripMenuItem();
  38.             this.clearToolStripMenuItem = new System.Windows.Forms.ToolStripMenuItem();
  39.             this.button1 = new System.Windows.Forms.Button();
  40.             this.txt_color = new System.Windows.Forms.TextBox();
  41.             this.button2 = new System.Windows.Forms.Button();
  42.             ((System.ComponentModel.ISupportInitialize)(this.pb_canvas)).BeginInit();
  43.             this.menuStrip1.SuspendLayout();
  44.             this.SuspendLayout();
  45.             //
  46.             // pb_canvas
  47.             //
  48.             this.pb_canvas.BackColor = System.Drawing.Color.White;
  49.             this.pb_canvas.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
  50.             this.pb_canvas.Location = new System.Drawing.Point(34, 58);
  51.             this.pb_canvas.Name = "pb_canvas";
  52.             this.pb_canvas.Size = new System.Drawing.Size(674, 462);
  53.             this.pb_canvas.TabIndex = 0;
  54.             this.pb_canvas.TabStop = false;
  55.             this.pb_canvas.MouseDown += new System.Windows.Forms.MouseEventHandler(this.pb_canvas_MouseDown);
  56.             this.pb_canvas.MouseMove += new System.Windows.Forms.MouseEventHandler(this.pb_canvas_MouseMove);
  57.             this.pb_canvas.MouseUp += new System.Windows.Forms.MouseEventHandler(this.pb_canvas_MouseUp);
  58.             //
  59.             // label1
  60.             //
  61.             this.label1.AutoSize = true;
  62.             this.label1.Font = new System.Drawing.Font("Arial", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
  63.             this.label1.Location = new System.Drawing.Point(741, 60);
  64.             this.label1.Name = "label1";
  65.             this.label1.Size = new System.Drawing.Size(58, 27);
  66.             this.label1.TabIndex = 1;
  67.             this.label1.Text = "Size";
  68.             //
  69.             // comboBox1
  70.             //
  71.             this.comboBox1.Font = new System.Drawing.Font("Arial", 9F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
  72.             this.comboBox1.FormattingEnabled = true;
  73.             this.comboBox1.Items.AddRange(new object[] {
  74.             "8",
  75.             "9",
  76.             "10",
  77.             "11",
  78.             "12",
  79.             "14",
  80.             "16",
  81.             "18",
  82.             "20",
  83.             "22",
  84.             "24",
  85.             "26",
  86.             "28",
  87.             "36",
  88.             "48",
  89.             "72"});
  90.             this.comboBox1.Location = new System.Drawing.Point(805, 58);
  91.             this.comboBox1.Name = "comboBox1";
  92.             this.comboBox1.Size = new System.Drawing.Size(78, 29);
  93.             this.comboBox1.TabIndex = 2;
  94.             //
  95.             // menuStrip1
  96.             //
  97.             this.menuStrip1.ImageScalingSize = new System.Drawing.Size(24, 24);
  98.             this.menuStrip1.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
  99.             this.exitToolStripMenuItem,
  100.             this.editToolStripMenuItem});
  101.             this.menuStrip1.Location = new System.Drawing.Point(0, 0);
  102.             this.menuStrip1.Name = "menuStrip1";
  103.             this.menuStrip1.Size = new System.Drawing.Size(932, 33);
  104.             this.menuStrip1.TabIndex = 3;
  105.             this.menuStrip1.Text = "menuStrip1";
  106.             //
  107.             // exitToolStripMenuItem
  108.             //
  109.             this.exitToolStripMenuItem.DropDownItems.AddRange(new System.Windows.Forms.ToolStripItem[] {
  110.             this.quitToolStripMenuItem});
  111.             this.exitToolStripMenuItem.Name = "exitToolStripMenuItem";
  112.             this.exitToolStripMenuItem.Size = new System.Drawing.Size(50, 29);
  113.             this.exitToolStripMenuItem.Text = "File";
  114.             //
  115.             // quitToolStripMenuItem
  116.             //
  117.             this.quitToolStripMenuItem.Name = "quitToolStripMenuItem";
  118.             this.quitToolStripMenuItem.Size = new System.Drawing.Size(252, 30);
  119.             this.quitToolStripMenuItem.Text = "Quit";
  120.             this.quitToolStripMenuItem.Click += new System.EventHandler(this.quitToolStripMenuItem_Click);
  121.             //
  122.             // editToolStripMenuItem
  123.             //
  124.             this.editToolStripMenuItem.DropDownItems.AddRange(new System.Windows.Forms.ToolStripItem[] {
  125.             this.clearToolStripMenuItem});
  126.             this.editToolStripMenuItem.Name = "editToolStripMenuItem";
  127.             this.editToolStripMenuItem.Size = new System.Drawing.Size(54, 29);
  128.             this.editToolStripMenuItem.Text = "Edit";
  129.             //
  130.             // clearToolStripMenuItem
  131.             //
  132.             this.clearToolStripMenuItem.Name = "clearToolStripMenuItem";
  133.             this.clearToolStripMenuItem.Size = new System.Drawing.Size(135, 30);
  134.             this.clearToolStripMenuItem.Text = "Clear";
  135.             this.clearToolStripMenuItem.Click += new System.EventHandler(this.clearToolStripMenuItem_Click);
  136.             //
  137.             // button1
  138.             //
  139.             this.button1.Font = new System.Drawing.Font("Arial", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
  140.             this.button1.Location = new System.Drawing.Point(757, 346);
  141.             this.button1.Name = "button1";
  142.             this.button1.Size = new System.Drawing.Size(136, 131);
  143.             this.button1.TabIndex = 4;
  144.             this.button1.Text = "Color";
  145.             this.button1.UseVisualStyleBackColor = true;
  146.             this.button1.Click += new System.EventHandler(this.button1_Click);
  147.             //
  148.             // txt_color
  149.             //
  150.             this.txt_color.Font = new System.Drawing.Font("Arial", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
  151.             this.txt_color.Location = new System.Drawing.Point(757, 483);
  152.             this.txt_color.Name = "txt_color";
  153.             this.txt_color.ReadOnly = true;
  154.             this.txt_color.Size = new System.Drawing.Size(136, 35);
  155.             this.txt_color.TabIndex = 5;
  156.             //
  157.             // button2
  158.             //
  159.             this.button2.Font = new System.Drawing.Font("Arial", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
  160.             this.button2.Location = new System.Drawing.Point(772, 183);
  161.             this.button2.Name = "button2";
  162.             this.button2.Size = new System.Drawing.Size(111, 66);
  163.             this.button2.TabIndex = 6;
  164.             this.button2.Text = "Save";
  165.             this.button2.UseVisualStyleBackColor = true;
  166.             this.button2.Click += new System.EventHandler(this.button2_Click);
  167.             //
  168.             // Form1
  169.             //
  170.             this.AutoScaleDimensions = new System.Drawing.SizeF(9F, 20F);
  171.             this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
  172.             this.BackColor = System.Drawing.SystemColors.ButtonHighlight;
  173.             this.ClientSize = new System.Drawing.Size(932, 559);
  174.             this.Controls.Add(this.button2);
  175.             this.Controls.Add(this.txt_color);
  176.             this.Controls.Add(this.button1);
  177.             this.Controls.Add(this.comboBox1);
  178.             this.Controls.Add(this.label1);
  179.             this.Controls.Add(this.pb_canvas);
  180.             this.Controls.Add(this.menuStrip1);
  181.             this.MainMenuStrip = this.menuStrip1;
  182.             this.Name = "Form1";
  183.             this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
  184.             this.Text = "Drawing Application";
  185.             ((System.ComponentModel.ISupportInitialize)(this.pb_canvas)).EndInit();
  186.             this.menuStrip1.ResumeLayout(false);
  187.             this.menuStrip1.PerformLayout();
  188.             this.ResumeLayout(false);
  189.             this.PerformLayout();
  190.  
  191.         }
  192.  
  193.         #endregion
  194.  
  195.         private System.Windows.Forms.PictureBox pb_canvas;
  196.         private System.Windows.Forms.Label label1;
  197.         private System.Windows.Forms.ComboBox comboBox1;
  198.         private System.Windows.Forms.MenuStrip menuStrip1;
  199.         private System.Windows.Forms.ToolStripMenuItem exitToolStripMenuItem;
  200.         private System.Windows.Forms.ToolStripMenuItem editToolStripMenuItem;
  201.         private System.Windows.Forms.ToolStripMenuItem clearToolStripMenuItem;
  202.         private System.Windows.Forms.ToolStripMenuItem quitToolStripMenuItem;
  203.         private System.Windows.Forms.Button button1;
  204.         private System.Windows.Forms.TextBox txt_color;
  205.         private System.Windows.Forms.Button button2;
  206.     }
  207. }
or also you create the layout by dragging the proper tools to the forms.

Creating the Script

This code contains the function of the application. This code will try to render the canvas to be able to draw a graphics. This contains some important button that enable you to adjust the size of the brush, can change color, and save the image that has been drawns.To do that locate the csharp script, In my case the default script will be called Form1.cs. First import this important module to avoid errors in the script.
  1. using System.IO;
Then write these variables inside the Class of the form called Form1.
  1.    public Point end = new Point();
  2.         public Point start = new Point();
  3.         public Pen p;
  4.         bool draw = false;
  5.         string color;
  6.         Graphics graphics;
  7.         Bitmap bmp;
After that write all these important methods to make sure the app will work properply.
  1. void GenerateVaribles()
  2.         {
  3.             graphics = pb_canvas.CreateGraphics();
  4.             comboBox1.Text = "8";
  5.             color = "#000000";
  6.             txt_color.Text = color;
  7.             CreateCanvas();
  8.         }
  9.  
  10.         void CreateCanvas() {
  11.             bmp = new Bitmap(pb_canvas.Width, pb_canvas.Height);
  12.             graphics = Graphics.FromImage(bmp);
  13.             pb_canvas.BackgroundImage = bmp;
  14.             pb_canvas.BackgroundImageLayout = ImageLayout.None;
  15.         }
  16.  
  17.         private void pb_canvas_MouseDown(object sender, MouseEventArgs e)
  18.         {
  19.             draw = true;
  20.  
  21.             start = e.Location;
  22.  
  23.             int size;
  24.  
  25.             if (comboBox1.Text == "")
  26.             {
  27.                 size = 8;
  28.             }
  29.             else
  30.             {
  31.                 size = Convert.ToInt32(comboBox1.Text);
  32.             }
  33.  
  34.             Color newColor = ColorTranslator.FromHtml(color);
  35.             p = new Pen(newColor, size);
  36.             p.SetLineCap(System.Drawing.Drawing2D.LineCap.Round, System.Drawing.Drawing2D.LineCap.Round, System.Drawing.Drawing2D.DashCap.Round);
  37.         }
  38.  
  39.         private void pb_canvas_MouseMove(object sender, MouseEventArgs e)
  40.         {
  41.             if (draw)
  42.             {
  43.  
  44.  
  45.                 if (e.Button == MouseButtons.Left)
  46.                 {
  47.                     end = e.Location;
  48.                     graphics.DrawLine(p, start, end);
  49.                     start = end;
  50.                     pb_canvas.Invalidate();
  51.                 }
  52.  
  53.             }
  54.         }
  55.  
  56.         private void pb_canvas_MouseUp(object sender, MouseEventArgs e)
  57.         {
  58.             draw = false;
  59.         }
  60.  
  61.         private void clearToolStripMenuItem_Click(object sender, EventArgs e)
  62.         {
  63.  
  64.             CreateCanvas();
  65.         }
  66.  
  67.         private void button1_Click(object sender, EventArgs e)
  68.         {
  69.             ColorDialog cd = new ColorDialog();
  70.             if (cd.ShowDialog() == DialogResult.OK)
  71.             {
  72.                 color = "#" + (cd.Color.ToArgb() & 0x00FFFFFF).ToString("X6");
  73.                 txt_color.Text = color;
  74.  
  75.             }
  76.         }
  77.  
  78.         private void button2_Click(object sender, EventArgs e)
  79.         {
  80.             SaveFileDialog s = new SaveFileDialog();
  81.             s.Filter = "Png files| *.png|jpeg files| *.jpg|bitmaps | *.bmp";
  82.             if (s.ShowDialog() == System.Windows.Forms.DialogResult.OK)
  83.             {
  84.                 if (File.Exists(s.FileName))
  85.                 {
  86.                     File.Delete(s.FileName);
  87.                 }
  88.                 if (s.FileName.Contains(".jpg"))
  89.                 {
  90.                     bmp.Save(s.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
  91.                 }
  92.                 else if (s.FileName.Contains(".png"))
  93.                 {
  94.                     bmp.Save(s.FileName, System.Drawing.Imaging.ImageFormat.Png);
  95.                 }
  96.                 else if (s.FileName.Contains(".bmp"))
  97.                 {
  98.                     bmp.Save(s.FileName, System.Drawing.Imaging.ImageFormat.Bmp);
  99.                 }
  100.             }
  101.         }
  102.  
  103.         private void quitToolStripMenuItem_Click(object sender, EventArgs e)
  104.         {
  105.             Application.Exit();
  106.         }
Lastly, initialize this method inside the Form1 method to create the canvas when the application start running.
  1.   GenerateVaribles();
Try to run the application and see if it works. There you go we successfully create a Simple Drawing Application using C#. I hope that this tutorial help you understand on how to develop an application using C#. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!
Tags
c#
desktop
application
Drawing

Add new comment

About text formats
  • 2795 views