Drawing in Windows Forms C#

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:

Add text to design.
Add picture to design.
Create new design.
Save your drawing design as XML file for reuse.
Load from XML file.
Cut, copy, and paste all controls.
Print design to selected printer.
Delete selected controls.
Options to set controls as front or back of other controls.
Resize controls.
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 aPanelat 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.

History

Updated ShanuDrawingTool.zip - 2014/07/02