Windows Form Design at Run Time

Syed Shanu
9y
13.5k
0
1

Article

SHANUFormDesing_V1.3.zip

Introduction

Doing Windows Forms design at runtime will allow users to design the form at runtime, save the form then open and reuse the existing form. The user can add controls at runtime from the Toolbar, design their form and write the code for controls to do some action. Now for example a user can add a DataGridView and a Button Control at runtime. In the code part for a Text Box the user can add their code to bind data from a database to the selected Data Grid. Everything can be done at runtime.

Windows Form Design

This Windows Forms design at runtime will be useful for:

Project Manager/System Analyst where they can design a new project and hand it over to a developer programmer and software engineer.
Will be useful for Project Demo to a client. In some case clients need ad hoc form design and sample output of form looks. In that case this application will be very useful to design their form and show it for demo purposes with less time.
Teaching and training of new programmers, developers, trainers and teachers for explaining the basic Windows Forms controls, the properties of each control and how to write simple code for new programmers.

This Windows Forms design at runtime software application was developed to design your own form using a panel control and to add Labels, Buttons, TextBoxes, ListBoxes, DataGridViews, ListViews, CheckBoxes and so on. The user can add/change the background color/image of the form (here we used a Panel). The user can add items to ComboBoxes, TreeViews, ListViews and TextBoxes using the Properties Window. The user can enter their own C# code for a TextBox at a button to run their code at runtime, For example, add a button and in the TextBox add your code and click the button to see the runtime Button Click event. Here in this program, I have added a simple MessageBox display when clicking the Button. I have a plan to extend this function to bind data from XML and/or a database DataGridView. Using this application the user can bind data from a DataTable, XML file and from a SQL Data Source. This simple C# application allows the user to add:

Create New Form.
Save the Form as XML file.
Open the Form from a XML file.
Cut, Copy and Paste all controls.
Delete all controls.
Delete a selected control.
Add/change a background color for the form (here a panel is used as the form).
Add/Change BackGround Image for the Form.
Add a Label Control and use the Property window to design your Label.
Add a Button Control and use the Property window to design your Button.
Add a CheckBox Control and use the Property window to design your CheckBox.
Add a Button Control and use the Property window to design your Button.
Add a ComboBox Control and use the Property window to design your ComboBox.
Add a DataGridView Control and use the Property window to design your DataGridView.
Add a DataTimePicker Control and use the Property window to design your DataTimePicker.
Add a ListBox Control and use the Property window to design your ListBox.
Add a ListView Control and use the Property window to design your ListView.
Add a NumericUpDown Control and use the Property window to design your NumericUpDown.
Add a PictureBox Control and use the Property window to design your PictureBox.
Add a RadioButton Control and use the Property window to design your RadioButton.
Add a TextBox Control and use the Property window to design your TextBox.
Add a TreeView Control and use the Property window to design your TreeView.
Bind data from a DataTable to return to a DataGridView, ListView, ComboBox and ListBox.
Bind data from a XML file as a DataTable to return to a DataGridView, ListView, ComboBox and ListBox.
Bind data from a SQL Server Database as a DataTable to return to a DataGridView, ListView, ComboBox and ListBox.

Application LayOut

In this application we can see a Toolbar at the left to add controls to the form (here our Panel). The center has a form (Panel) where the user can add and design their controls. In the right is a Property window to add all the design to the selected controls. In the bottom is a TextBox for the Code Part where the user can write their own code for runtime generated Button Click events.

Toolbar: Here we can see all the list of controls that can be added to the form at runtime. New Features have been added in Version 1.2. New features like Create New Form, Save Form, Open Form, Cut, Copy and Paste Controls.

Toolbar

Form (as Panel): Here we can see the Form (Panel) in the center where the user can add their controls and we can see the Message Box after a Button Click.

Form

Property Window: In the right we have the Property window useful for the user to do the design of their controls.

Code part: At the bottom we can see the code part where the user can writer their own code. It has two part, the first panel contains "Select Control To Bind" ComboBox. Whenever the user adds a control to the Form(Panel) the control names will be added to this Combo Box. Here we can see now "grid_20" that is the name of the DataGridView that has been added to the form.

In "Code Type" the user can select the Button Click event type as "MessageBox", "Dat Tablereturn", "XML Data table Return, "SQL Database to Data Table return". And next we have a text box where the user can enter their code. Here below you can see a code to create a Data Table and add rows with data to the Data Table and finally return the Data Table.

Code Type

Here we can the “Select Control To Bind" ComboBox. Here we can see a list of controls that have been added to our form as a Grid, Label, Button, ListView and and so on. I have used control names with control type prefix 3 char and a random number.

Message Box: Here we can see a sample of how to display a Message Box at runtime from a Button Click.

Bind Controls from DataTable and XML File: Here we can see controls like, Label, ListBox, ComboBox, DataGridView, ListView and Button have been added. We should be carefull when selecting the controls that need to be bound and we can select our function type as "Dat Table return".

Note: Only in Button Click we can bind the Controls. So select your control to bound, for example Combo Box or ListBox or as you wish. Then in the text box enter your code to return the Datatable that can be bound to your selected control.

Bind Controls from DataTable

Here is the list of sample code that will be used to bind the data to the selected control. Just copy this code and paste it into the TextBox of the code part:

Copy Code
//--for return Datatable to Combobox/ListBox
DataTable dt = new DataTable();
dt.Columns.Add("itemCode");
dt.Columns.Add("ItemName");
DataRow row = dt.NewRow();
row["itemCode"] = "0001";
row["ItemName"] = "SHANU";
dt.Rows.Add(row);
row = dt.NewRow();
row["itemCode"] = "0002";
row["ItemName"] = "Afraz";
dt.Rows.Add(row);
row = dt.NewRow();
row["itemCode"] = "0003";
row["ItemName"] = "Afreen";
dt.Rows.Add(row);
return dt;
Copy Code
//----------------- For return Datatable to from XML FIle
//You can find the "ShanuDataSource.xml" XML file at my bin folder of Zip file.
//If you want to load your XML File Place it in the same Bin Folder.
DataSet dataSet = new DataSet();
dataSet.ReadXml("ShanuDataSource.xml");
return dataSet.Tables[0];
Copy Code
// ----------------- From SQL SERVER Data Base to Data Table.
string constring = @"Data Source=YourServerName;Initial Catalog=YourDBName;User id = sa;password=YourPWD";
SqlConnection con = new SqlConnection(constring);
SqlCommand cmd = new SqlCommand("select * from ItemMasters", con);
cmd.CommandType = CommandType.Text;
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;

Bind Controls from SQL Server Database: Here we can see a sample of how to bind a SQL Server Database table data as the return of the Data Table to a DataGridView at runtime from a button click.

Using the code

The main code part in this application is to add controls at runtime and create an event like Mouse Enter, Mouse Leave, Resize Control, Mouse Move, Mouse Down and to create a class at runtime and to compile the code at runtime. All the code part has been well-commented so the user can easily understand the code.

Form Background: Here I used the Panel control to work as the form. I used the ColorDialog and OpenFileDialog to change the BackColor and Backgrond Image of the form (Panel).

private void frmbackColor_Click(object sender, EventArgs e)
{
ColorDialog colorDlg = new ColorDialog();
if (colorDlg.ShowDialog() == DialogResult.OK)
{
if (pnControls.BackgroundImage != null)
{
pnControls.BackgroundImage.Dispose();
pnControls.BackgroundImage = null;
}
pnControls.BackColor = colorDlg.Color;
}
}
//////////////////////////////////
/// To Add/Change the panel Background Image.
private void frmBackGround_Click(object sender, EventArgs e)
{
OpenFileDialog dialog = new OpenFileDialog();
dialog.Filter = "JPEG Files (*.jpeg)|*.jpeg|PNG Files (*.png)|*.png|JPG Files (*.jpg)|*.jpg|GIF Files (*.gif)|*.gif";
dialog.Title = "Select Your Form background Image File";
if (dialog.ShowDialog() == DialogResult.OK)
{
pnControls.BackgroundImage = Image.FromFile(dialog.FileName);
}
}
/////////////////////////////

Delete Controls: To delete all the controls and selected controls. I have used the public variable Selected Control that will store the currently selected control.

/// To Delete a Selected Control from mainPanel(OurForm).
private void DeleteSTool_Click(object sender, EventArgs e)
{
if (SelectedControl != null)
{
pnControls.Controls.Remove(SelectedControl);
propertyGrid1.SelectedObject = null;
pnControls.Invalidate();
}
}
//////////////////////////////////
/// To Delete All Controls placed in mainPanel(OurForm).
private void DeleteATool_Click(object sender, EventArgs e)
{
pnControls.Controls.Clear();
propertyGrid1.SelectedObject = null;
pnControls.Invalidate();
}

Add Controls: From the Toolbar the user can add controls to the form (Panel). Now for example to add a DataTimePicker to the form we can use the following code. I created a DataTimePicker at runtime and added the controls to the form (Panel). I have added the runtime control events, like MoverEnter, MouseLeave and MouseDown. Using these events the runtime controls can be moved, resized inside the form (Panel) for design. In the same manner, I have added all the other controls, like TextBox, Button, Label and so on.

///To Add DateTimePicker Control to Panel(Form).
private void DateTimeTool_Click(object sender, EventArgs e)
{
Random rnd = new Random();
int randNumber = rnd.Next(1, 1000);
String DatetimeName = "dte_" + randNumber;
DateTimePicker ctrl = new DateTimePicker();
ctrl.Location = new Point(70, 30);
ctrl.Name = DatetimeName;
ctrl.Font = new System.Drawing.Font("NativePrinterFontA", 10F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
ctrl.Text = DateTime.Now.ToString();
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);
// ctrl.Click += new EventHandler(control_Click);
pnControls.Controls.Add(ctrl);
}

Runtime Controls Move and Resize: After adding controls to the form (Panel), it needs to be moved, resized and assigned the property to the selected control. All those functions will be added here.

/// RUN time Control Mouse Down Event used for Control Move
private void control_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
pnControls.Invalidate(); //unselect other control
SelectedControl = (Control)sender;
Control control = (Control)sender;
mouseX = -e.X;
mouseY = -e.Y;
control.Invalidate();
DrawControlBorder(sender);
propertyGrid1.SelectedObject = SelectedControl;
}
}
//////////////////////////////////
/// RUN time Control Mouse Move Event used for Control Move
///
private void control_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Control control = (Control)sender;
Point nextPosition = new Point();
nextPosition = pnControls.PointToClient(MousePosition);
nextPosition.Offset(mouseX, mouseY);
control.Location = nextPosition;
Invalidate();
}
}

Runtime Class creation: We need to execute code for the runtime Button Click Event. The following function will create a class at runtime and we pass our code part TextBox text to this function from a runtime Button Control Click event.

/// When Runtime Control Clicks this event trigger here we can write our code for runtime control click.
/// Here in this click event i have Called RunTimeCodeGenerate method this method will create class at runtime and run your code.
///
private void control_Click(object sender, EventArgs e)
{
if (rdoMessage.Checked == true)
{
RunTimeCodeGenerate(txtCode.Text.Trim());
}
else if (rdoDataTable.Checked == true)
{
RunTimeCodeGenerate_ReturnTypeDataTable(txtCode.Text.Trim());
}
else if (rdoXML.Checked == true)
{
RunTimeCodeGenerate_ReturnTypeDataTable(txtCode.Text.Trim());
}
else if (rdoDatabase.Checked == true)
{
RunTimeCodeGenerate_ReturnTypeDataTable(txtCode.Text.Trim());
}
}
///This function will create a Runtime Class and add all our runtime code.
public void RunTimeCodeGenerate(String yourCodeHere)
{
try
{
string code = @"
using System;
using System.Xml;
using System.Data;
namespace SHANUFormDesing
{
public class Program
{
public static void Main()
{
YourCodeHere
}
}
}
";
string finalCode = code.Replace("YourCodeHere", yourCodeHere);
CSharpCodeProvider provider = new CSharpCodeProvider();
CompilerParameters parameters = new CompilerParameters();
// Reference to System.Drawing library
parameters.ReferencedAssemblies.Add("System.Windows.Forms.dll");
parameters.ReferencedAssemblies.Add("System.Drawing.dll");
parameters.ReferencedAssemblies.Add("System.Data.dll");
parameters.ReferencedAssemblies.Add("System.Xml.dll");
parameters.ReferencedAssemblies.Add("System.dll");
// parameters.ReferencedAssemblies.Add("System.Data.SqlClient.dll");
parameters.GenerateInMemory = true;
// True - exe file generation, false - dll file generation
parameters.GenerateExecutable = true;
CompilerResults results = provider.CompileAssemblyFromSource(parameters, finalCode);
if (results.Errors.HasErrors)
{
StringBuilder sb = new StringBuilder();
foreach (CompilerError error in results.Errors)
{
sb.AppendLine(String.Format("Error ({0}): {1}", error.ErrorNumber, error.ErrorText));
}
throw new InvalidOperationException(sb.ToString());
}
Assembly assembly = results.CompiledAssembly;
Type program = assembly.GetType("SHANUFormDesing.Program");
MethodInfo main = program.GetMethod("Main");
main.Invoke(null, null);
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
///This function will create at Runtime and this class has a method with return
//type as DataTable.user can write there own code in textbox to return the data
// Table and bind to the selected Controls .
public void RunTimeCodeGenerate_ReturnTypeDataTable(String yourCodeHere)
{
try
{
string code = @"
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Microsoft.CSharp;
using System.CodeDom.Compiler;
using System.Reflection;
using System.Data.SqlClient;
using System.IO;
namespace SHANUFormDesing
{
public class Program
{
public static void Main()
{
}
public static DataTable returnDTS()
{
YourCodeHere;
}
}
}
";
string finalCode = code.Replace("YourCodeHere", yourCodeHere);
CSharpCodeProvider provider = new CSharpCodeProvider();
CompilerParameters parameters = new CompilerParameters();
// Reference to System.Drawing library
parameters.ReferencedAssemblies.Add("System.Windows.Forms.dll");
parameters.ReferencedAssemblies.Add("System.Drawing.dll");
parameters.ReferencedAssemblies.Add("System.Data.dll");
parameters.ReferencedAssemblies.Add("System.Xml.dll");
parameters.ReferencedAssemblies.Add("System.dll");
// parameters.ReferencedAssemblies.Add("System.Data.SqlClient.dll");
parameters.GenerateInMemory = true;
// True - exe file generation, false - dll file generation
parameters.GenerateExecutable = true;
CompilerResults results = provider.CompileAssemblyFromSource(parameters, finalCode);
if (results.Errors.HasErrors)
{
StringBuilder sb = new StringBuilder();
foreach (CompilerError error in results.Errors)
{
sb.AppendLine(String.Format("Error ({0}): {1}", error.ErrorNumber, error.ErrorText));
}
throw new InvalidOperationException(sb.ToString());
}
Assembly assembly = results.CompiledAssembly;
Type program = assembly.GetType("SHANUFormDesing.Program");
MethodInfo main = program.GetMethod("returnDTS");
object ds = main.Invoke(null, null);
DataTable dt = (DataTable)ds;
foreach (Control pnlCntl in pnControls.Controls)
{
// DataGridView Data Bind from Data Table and from XML Data Source.
if (pnlCntl is DataGridView)
{
if (pnlCntl.Name == ComboControlNames.SelectedItem.ToString())
{
DataGridView grid = (DataGridView)pnlCntl;
grid.DataSource = dt;
}
}
else if (pnlCntl is ListView) // ListView Data Bind from Data Table and from XML Data Source.
{
if (pnlCntl.Name == ComboControlNames.SelectedItem.ToString())
{
ListView lstView = (ListView)pnlCntl;
lstView.View = View.Details;
foreach (DataColumn column in dt.Columns)
{
lstView.Columns.Add(column.ColumnName);
}
foreach (DataRow row in dt.Rows)
{
ListViewItem item = new ListViewItem(row[0].ToString());
for (int i = 1; i < dt.Columns.Count; i++)
{
item.SubItems.Add(row[i].ToString());
}
lstView.Items.Add(item);
}
}
}
else if (pnlCntl is ComboBox) // ComboBox Data Bind from Data Table and from XML Data Source.
{
if (pnlCntl.Name == ComboControlNames.SelectedItem.ToString())
{
ComboBox cmbo = (ComboBox)pnlCntl;
cmbo.DataSource =dt;
cmbo.DisplayMember = "ItemName";
cmbo.ValueMember = "itemCode";
}
}
else if (pnlCntl is ListBox) // ListBox Data Bind from Data Table and from XML Data Source.
{
if (pnlCntl.Name == ComboControlNames.SelectedItem.ToString())
{
ListBox lstBox = (ListBox)pnlCntl;
lstBox.DataSource = dt;
lstBox.DisplayMember = "ItemName";
lstBox.ValueMember = "itemCode";
}
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}

Points of Interest

I have future plans to extend this application and add functions like New, Save and Open Form, Bind Controls using code from XML and a database.

New features have been added. Now the user can bind data from a Data Table, XML file and from a SQL Server database to a DataGridView, ListView, ComboBox, ListBox at runtime using their code. We will see in detail how to bind data from XML and from a SQL Database. In this article download the latest source code version "SHANUFormDesing_V1.3zip".

Note: In my Zip file's bin folder you can see a "FormDesign.txt". In this text file I have added sample code for the code part to load data. I have attached a "ShanuDataSource.xml" XML file to load data from XML.

I have added all the features that I described previously for New, Save, Open, Cut, Copy and Paste controls, bind data from XML and/or a SQL Server Database. You can download the latest Zip file version V1.3 available for download now at the top of this article. I have many more plans to add more features to this Shanu Form Design Application. Comments are welcome from the readers of this article.

The basic idea for this application originated from my previous article: