Click here to Skip to main content
Click here to Skip to main content

Drawing in Windows Forms

, 6 Aug 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Painting Tool using Winform

 

Introduction

The Image Drawing Tool software application was developed to design your own Images with , add text, line, and picture. The Image Drawing Tool can be printed to any selected printer. The final design can be saved as XML format for reuse which can also be loaded from the saved XML file. This simple C# application allows the user to:

  1. Add text to design.
  2. Add picture to design.
  3. Create new design.
  4. Save your drawing design as XML file for reuse.
  5. Load from XML file.
  6. Cut, copy, and paste all controls.
  7. Print design to selected printer.
  8. Delete selected controls.
  9. Options to set controls as front or back of other controls.
  10. Resize controls.
  11. Move controls.

Background

The main aim was to develop a simple and easy to use .NET application for Image Drawing. This application was developed using .NET 4.0 (C#) and uses XML and GDI+ functionality.Hope this Application will be as a key for a users to make a standard painting Tool.

Using the Code

Our design is simple - all controls will be added to a Panel control at runtime. I have a main Panel in a form; when a label text is clicked, a new label will be added to the panel at runtime, same as that used for other controls like picture box.

Controls Adding at Runtime

The below code explains how to add a designer control at runtime to a Panel. Here for example, I have added code to add a Label control at runtime to a Panel from the menu label click event.

private void toolStripButton1_Click(object sender, EventArgs e)
{
    Label ctrl = new Label();
    ctrl.Location = new Point(50, 50);
    ctrl.Font = new System.Drawing.Font("NativePrinterFontA", 10F, 
    System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
    ctrl.Text = "Shanu";
    ctrl.MouseEnter += new EventHandler(control_MouseEnter);
    ctrl.MouseLeave += new EventHandler(control_MouseLeave);
    ctrl.MouseDown += new MouseEventHandler(control_MouseDown);
    ctrl.MouseMove += new MouseEventHandler(control_MouseMove);
    ctrl.MouseUp += new MouseEventHandler(control_MouseUp);
    pnControls.Controls.Add(ctrl);
}

Same as this, all other controls can be added from a menu click event. All controls have MouseEnter, MouseMove, MouseDown, MouseLeave, and MouseUp events for controls to be resized and moved inside a Panel at runtime.

Save Drawing as XML File

The below function SavetoXML() saves all the control types and properties placed in the panel to an XML file. Here, we get all the controls and properties like font, backcolor, image, and location, and save all information to an XML file in the selected path. To save the Picturebox image, we find the PictureBox controls and convert the PictureBox image into bytes and save the image byte value to the XML file.

private void SavetoXML()
{
    XmlDocument xmlDoc = new XmlDocument();

    // Write down the XML declaration
    XmlDeclaration xmlDeclaration = 
    	xmlDoc.CreateXmlDeclaration("1.0", "utf-8", null);

    // Create the root element
    XmlElement rootNode = xmlDoc.CreateElement("ShanuDrawingToolsList");
    xmlDoc.InsertBefore(xmlDeclaration, xmlDoc.DocumentElement);
    xmlDoc.AppendChild(rootNode);

    foreach (Control p in pnControls.Controls)
    {
        string s = p.Name;
        string types = p.GetType().ToString();
        string locX = p.Location.X.ToString();
        string locY = p.Location.Y.ToString();
        string sizeWidth = p.Width.ToString();
        string sizeHegiht = p.Height.ToString();
        string Texts = p.Text.ToString();

        PictureBox pic = p as PictureBox; //cast control into PictureBox
        byte[] bytes = null;
        string PicBitMapImages = "";
        if (pic != null) //if it is pictureBox, then it will not be null.
        {
            if (pic.Image != null)
            {
                Bitmap img = new Bitmap(pic.Image);
                bytes = imageToByteArray(img);
                PicBitMapImages = Convert.ToBase64String(bytes);
            }
        }

        //Font f = p.Font;
        string fonts = FontToString(p.Font);

        // Create a new <category> element and add it to the root node
        XmlElement parentNode = xmlDoc.CreateElement("Controls");

        // Set attribute name and value!
        parentNode.SetAttribute("ID", p.GetType().ToString());

        xmlDoc.DocumentElement.PrependChild(parentNode);

        // Create the required nodes
        XmlElement CntrlType = xmlDoc.CreateElement("ControlsType");
        XmlElement locNodeX = xmlDoc.CreateElement("LocationX");
        XmlElement locNodeY = xmlDoc.CreateElement("LocationY");
        XmlElement SizeWidth = xmlDoc.CreateElement("SizeWidth");
        XmlElement SizeHegith = xmlDoc.CreateElement("SizeHeight");
        XmlElement cntText = xmlDoc.CreateElement("Text");
        XmlElement cntFonts = xmlDoc.CreateElement("Fonts");
        XmlElement CntrlPictureImage = xmlDoc.CreateElement("picImage");

        // retrieve the text 
        XmlText cntrlKind = xmlDoc.CreateTextNode(p.GetType().ToString());

        XmlText cntrlLocX = xmlDoc.CreateTextNode(locX);
        XmlText cntrlLocY = xmlDoc.CreateTextNode(locY);

        XmlText cntrlWidth = xmlDoc.CreateTextNode(sizeWidth);
        XmlText cntrlHeight = xmlDoc.CreateTextNode(sizeHegiht);

        XmlText cntrlText = xmlDoc.CreateTextNode(Texts);
        XmlText cntrlFont = xmlDoc.CreateTextNode(fonts);
        XmlText cntrlPicImg = xmlDoc.CreateTextNode(PicBitMapImages);

        // append the nodes to the parentNode without the value
        parentNode.AppendChild(CntrlType);
        parentNode.AppendChild(locNodeX);
        parentNode.AppendChild(locNodeY);
        parentNode.AppendChild(SizeWidth);
        parentNode.AppendChild(SizeHegith);
        parentNode.AppendChild(cntText);
        parentNode.AppendChild(cntFonts);
        parentNode.AppendChild(CntrlPictureImage);
        // save the value of the fields into the nodes
        CntrlType.AppendChild(cntrlKind);
        locNodeX.AppendChild(cntrlLocX);
        locNodeY.AppendChild(cntrlLocY);

        SizeWidth.AppendChild(cntrlWidth);
        SizeHegith.AppendChild(cntrlHeight);

        cntText.AppendChild(cntrlText);
        cntFonts.AppendChild(cntrlFont);
        CntrlPictureImage.AppendChild(cntrlPicImg);
    }

    SaveFileDialog dlg = new SaveFileDialog();
    dlg.Filter = "XML Files (*.xml)|*.xml";

    if (dlg.ShowDialog() == DialogResult.OK)
    {
        xmlDoc.Save(dlg.FileName);
    }
} 

Print the Drawing to Selected Printer

By clicking on the Print button, the user can select the printer for printing and can preview the design and print the document. To do this, we need to print only the controls inside the main panel. Declare the Printdocument and create an event for print page to select the controls in the panel for printing.

System.Drawing.Printing.PrintDocument doc = new System.Drawing.Printing.PrintDocument();
doc.PrintPage += new System.Drawing.Printing.PrintPageEventHandler(doc_PrintPage);
//doc.Print();

printDialog1.Document = doc;

// printDialog1.AllowPrintToFile = true;
printDialog1.AllowSelection = true;
printDialog1.AllowSomePages = true;
// printDialog1.PrintToFile = true;
if (printDialog1.ShowDialog() == DialogResult.OK)
{
    // printDocument1.Print();

    previewdlg.Document = doc;
    previewdlg.ShowDialog();
}

In PrintDocument doc_PrintPage, draw the panel as image for printing.

private void doc_PrintPage(object sender, System.Drawing.Printing.PrintPageEventArgs e)
{
    Panel grd =pnControls;
    Bitmap bmp = new Bitmap(grd.Width, grd.Height, grd.CreateGraphics());
    grd.DrawToBitmap(bmp, new Rectangle(0, 0, grd.Width, grd.Height));
    RectangleF bounds = e.PageSettings.PrintableArea;
    float factor = ((float)bmp.Height / (float)bmp.Width);
    //e.Graphics.DrawImage(bmp, bounds.Left, bounds.Top, bounds.Width, factor * bounds.Width);
    e.Graphics.DrawImage(bmp, bounds.Left, bounds.Top, grd.Width, grd.Height);
} 

For more code details, please refer to the attached ShanuDrawingTool project zip file.

Points of Interest

It was a lot of fun developing this project; this has features like working with GDI+, saving controls and images as XML, control cut, copy, and paste at runtime, etc.

I have added minimum features like draw line, add picture, add text, cut, copy and paste controls .I have a plan to add free hand drawing, draw circle, rectangle and etc in my next updated versions. I hope the minimum feature of my tool will be starting point for many beginners who want to create tools like this.

History

  • Updated ShanuDrawingTool.zip - 2014/07/02

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

syed shanu
Team Leader
India India
Visit My SHANU C# Blog
Mr.Shanu is a Senior Software Engineer. He’s basically from India and working at South Korea for more than 7 years.


He has 9+ years of Experience in Microsoft Technologies. More than 7 Years of experience in Automation Fields, He has worked in several projects of MES, Automation, ERP and HMI programs like PLC, Sensor, RFID and Nutrunner Tools. He has worked in both Windows based and Web Based projects.


Shanu Love to learn and work with new technology.


His main hobbies are to spend time with Family and to create Different and Innvotive programs and write Article about his program and Share with others.

His Latest Article which he likes most was Windows Form Design at Run Time

His facebook page
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionProjects Download Problem PinmemberMember 361533719-Nov-14 22:25 
GeneralMy vote of 5 PinprofessionalRenju Vinod16-Sep-14 0:11 
QuestionCan't Download Project Files Pinmemberugursoyer5-Sep-14 7:43 
GeneralMy vote of 5 PinprofessionalSunasara Imdadhusen6-Aug-14 21:20 
GeneralRe: My vote of 5 Pinmembersyed shanu6-Aug-14 21:27 
GeneralMy vote of 3 PinmemberYang Kok Wah6-Aug-14 17:31 
GeneralRe: My vote of 3 Pinmembersyed shanu6-Aug-14 17:58 
GeneralJust a remark... Pinmemberpar4dise5-Aug-14 22:51 
GeneralRe: Just a remark... Pinmembersyed shanu5-Aug-14 22:56 
QuestionID card Creation PinprofessionalJoy Anand Raj25-Oct-13 2:14 
AnswerRe: ID card Creation Pinmembersyed shanu28-Oct-13 14:33 
GeneralMy vote of 5 Pinmembersathitchai.Thailand16-Sep-13 5:13 
GeneralRe: My vote of 5 Pinmembersyed shanu16-Sep-13 14:29 
QuestionSupported Printers Pinmembermeetarun00728-Aug-13 18:32 
AnswerRe: Supported Printers Pinmembersyed shanu28-Aug-13 18:36 
GeneralRe: Supported Printers Pinmembermeetarun00728-Aug-13 18:57 
GeneralMy vote of 5 Pinmembercocis4824-Aug-13 10:36 
GeneralRe: My vote of 5 Pinmembersyed shanu24-Aug-13 17:39 
QuestionAwesome work !!! PinmemberMember 8148855-Aug-13 1:32 
AnswerRe: Awesome work !!! Pinmembersyed shanu5-Aug-13 17:07 
Questionthe package damaged or format is unknown Pinmembercode2013_ok23-Jul-13 18:36 
AnswerRe: the package damaged or format is unknown Pinmembersyed shanu23-Jul-13 18:41 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun19-Jul-13 1:01 
GeneralRe: My vote of 5 Pinmembersyed shanu19-Jul-13 5:26 
Questioncan I put a logo on the barcode label Pinmemberhongdida17-Jul-13 19:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 6 Aug 2014
Article Copyright 2014 by syed shanu
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid