Creating Windows Form User Controls Part -1

By: Saurabh Nandu - Sunday, August 5, 2001 Add Comment

<div align="center"> <table border="0" width="70%" class="outline"> <tr> <td width="50%" class="outline">Download File</td> <td width="50%" class="outline">SDK</td> </tr> <tr> <td width="50%" class="outline"><a href="../../file/labeledtextbox.zip" class="wbox">labeledtextbox1.zip</a> (7kb)</td> <td width="50%" class="outline">Beta2</td> </tr> </table> </div> Introduction As we all know that the .NET Platform provides us with a Rich Windows Form API to create Windows Applications. Not only this model rich, but its also very extensible! Developers can quickly create their own controls and extend the API as they want! In this article we will see how to create our own Windows Form User Control to help us create a new 'LabledTextBox' control. User Controls In the Windows Form API, you can build your own controls using other controls. These can be thought of as composite controls. Such controls are called User Controls. They essentially are composed out of previously existing controls.  Say, you have a database driven application and you use the same form components a number of times in your application. Instead of defining all the individual controls again and again, you can define a User Control containing the form contents and later you can use this User Control over and over again. This saves you a lot of development time! Also incase, in the future a new column gets added to the database you just have to update the User Control and all the forms will show the updated form (lot of time saved here!!)! You can also create a User Control that validates the text entered in the TextBox... In this example, I create a LabledTextBox control. Many times while we create a Form to accept user data, we place a Label describing the data to be entered and then we place a TextBox next to it to enter the data, right!! This is a very tedious process and managing all those labels and textboxes .....awggghhh.. So we create a new User Control composing of a Label and a TextBox, so you just have to add one control per field of your form! Note: I am using notepad as my editor, so there is no need for Visual Studio.Net to create this User Control! Code 1) LabeledTextBox.cs - The User Control file <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre>using System.Windows.Forms; namespace MasterCSharp.WebSite.Saurabh.UserControls { //LabledTextBox class that extends the class UserControl public class LabeledTextBox: UserControl { //Define our components private Label myLabel; private TextBox myTextBox; //Constructor public LabeledTextBox() { InitializeComponent(); } public void InitializeComponent() { //Label Definition myLabel = new Label(); myLabel.Location = new System.Drawing.Point(0,0); myLabel.Size = new System.Drawing.Size (50, 20); //TextBox Definition myTextBox = new TextBox(); //Set the location to Label width //plus 5 pixels more myTextBox.Location = new System.Drawing.Point(105,0); myTextBox.Size =new System.Drawing.Size (100, 20); //Always set the Size of the Control or you will get unexpected results!! this.Size =new System.Drawing.Size (205, 20); //Add the controls this.Controls.Add(myLabel); this.Controls.Add(myTextBox); } //Override the Text property to get/set the Text of the Textbox public override string Text { get { return myTextBox.Text; } set { myTextBox.Text = value; } } //Create a new property to //get/set the Text of the Label public string LabelText { get { return myLabel.Text; } set { myLabel.Text =value; } } } }</pre></td> </tr> </table>  Save the above file as 'LabeledTexBox.cs'. The use the csc command-line compiler to compile this file into a library. The compilation string should be: csc /t:library /r:System.Windows.Forms.dll LabeledTextBox.cs This will produce a library Dll with the file name 'LabeledTextBox.dll'. Your user control is ready !! 2) ControlConsumer.cs - A Sample LabeledTextBox Control Consumer Application <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre>using System.Windows.Forms; using MasterCSharp.WebSite.Saurabh.UserControls ; using System; public class ControlConsumer: Form { //Declare some Controls protected LabeledTextBox firstName, lastName, email ; protected Button showContents; //Constructor public ControlConsumer() { InitializeComponent(); } //Main Method [STAThread] public static void Main() { Application.Run(new ControlConsumer()); } public void InitializeComponent() { //Create the controls firstName = new LabeledTextBox(); lastName = new LabeledTextBox(); email = new LabeledTextBox(); showContents= new Button(); //Set the various Properties of the Controls firstName.Location = new System.Drawing.Point(5,5); firstName.LabelText="First Name :" ; lastName.Location = new System.Drawing.Point(5,35); lastName.LabelText="Last Name :" ; email.Location = new System.Drawing.Point(5,70); email.LabelText="Email :" ; showContents.Location = new System.Drawing.Point(5,100); showContents.Text="Show Contents"; showContents.Size=new System.Drawing.Size (100, 20); //Wire the Click event of the button showContents.Click += new System.EventHandler(showContents_Click); this.Text="Control Consumer"; //Add the controls to the Form this.Controls.Add(firstName); this.Controls.Add(lastName); this.Controls.Add(email); this.Controls.Add(showContents); } //Button Click Event Handler protected void showContents_Click(object sender, EventArgs e) { string message ="First Name :"+firstName.Text; message+="\nLast Name :"+lastName.Text; message+="\nEmail :"+email.Text; //Show the Contents of the Windows Form MessageBox.Show(message); } }</pre></td> </tr> </table> Save the above code as 'ControlConsumer.cs'. The again use the csc command-line compiler with the command: csc /t:winexe /r:Systm.Windows.Form.dll;LabeledTextBox.dll ControlConsumer.cs This should create a 'ControlConsumer.exe' file. Click on this file to run the application. Remember that the 'labeledTextBox.dll' we created in the last part should be in the same directory as this application, or your code won't compile and run! <img border="0" src="../../img/windowsformusercontrol1.gif" width="300" height="300"> Figure 1: Control Consumer Application Conclusion In this example I have just displayed limited functionality for simplicity sake (may be I was a bit lazy :) ), anyway feel free to add more properties to make this a jazzy control!  This example should have given rise to many possible implementations of User Controls in your mind! So go ahead and try your make your wild control! Next time I might look at modifying this simple user control to add more functionality!! Till then ... keep coding :)

Creating Windows Form User Controls Part -1

Comments