A Textbox With a Single Border Line

• Download source files - 7.14 Kb

Introduction

Developing Smart Device applications with very good GUIs is not an easy task. I felt this when I was developing my Pocket PC application where I had to introduce a textbox with a single border at the bottom only. I tried all the hit and trials and finally used one of the most powerful tools provided by CF, i.e., create your own class library of user controls. Microsoft provides the opportunity to developers to create their own user controls. I used the same, and created my own composite control, a textbox with a single borderline.

Solution

I would not like to go into all the details of the composite control. I would prefer to tell you the direct trick to make a textbox with a single borderline. So first of all, just click on File-> Add-> New Project -> Smart Device Application-> Class Library. Now, in this class library, you have the opportunity to add on your user components. For that, right click on the project -> Add -> User Control. Give a meaningful name to your textbox.

Creating your component

Now, you will find a board in front of you. Get the toolbox, and just add a textbox onto it. There is no need of any other component. Right click on the textbox, and a properties window will popup, and then change the following properties:

• Multiline: true (it will make the resizing of the textbox possible)
• Borderstyle: none

The code

Let us move to the code section of the user control. First of all, we write the code for creating the border of the textbox. So, here is our trick to create the border. We have drawn a line with a dark gray color at the bottom with a width of 1 pixel. You can have your own standard:

private void cstTextBox_Paint(object sender, PaintEventArgs e)
{
    Pen tPen ;
    Graphics gLine ;
     
    gLine= e.Graphics;
    baseTextBox.Font = this.Font;
    baseTextBox.Height = this.Height - 2;
    baseTextBox.Width = this.Width;
    tPen = new Pen(Color.DarkGray, 1.0F);
    int cordX1 = baseTextBox.Location.X;
    int cordX2 = baseTextBox.Location.X + baseTextBox.Width;
    int cordY1 = this.Height -1;
    int cordY2 = this.Height -1;
    gLine.DrawLine(tPen, cordX1, cordY1, cordX2, cordY2);

}

So now, there will always be a line below the textbox (basetextbox in my case). Now, to map the height of the user control with that of the textbox, we have to write the following lines in our code:

private void cstTextBox_Resize(object sender, EventArgs e)
{
    baseTextBox.Width = this.Width;
    baseTextBox.Height = this.Height - 2;
}

So now, as you change the size of the user control in your main application in design time, the size of the textbox will also change accordingly, and so also the position of the grey line on the user control board.

The main thing which remains is the mapping of the properties of the textbox with that of the user control so that when we change the properties of the user control, the properties of the textbox will also change such that the user or the developer will not know that he is playing with two different controls. So here, we map the ForeColor and the TextAlign property of the textbox:

public override Color ForeColor
{
  get
  {
      return baseTextBox.ForeColor;
  }
  set
  {
      baseTextBox.ForeColor = value;
  }
}
public HorizontalAlignment TextAlign
{
  get
  {
      return baseTextBox.TextAlign;
  }
  set
  {
      baseTextBox.TextAlign = value;
  }
}

Now, map the methods also so that when you call the user control's methods, the methods for the basetextbox will be called. For e.g.:

public void SelectAll()
{
    baseTextBox.SelectAll();
}

Now what remains is the event handling. The events are mostly common to both the components, i.e., the textbox on the user control and the user control containing the textbox. Here is the code for the KeyUp event. As both controls contain this event, there is no need to create your own events. Here is the code for it:

private void baseTextBox_KeyUp(object sender, KeyEventArgs e)
{
  this.OnKeyUp(e);
}

protected override void OnKeyUp(KeyEventArgs e)
{
   base.OnKeyUp(e);
}

So when one presses the key while execution, first of all, the baseTextBox_KeyUp will be called, which will call OnKeyUp, and that will call the function written by the developer for the key_up event in its code. So just by following a few easy steps, I got the thing which I needed. Though I just mapped only those properties which I needed, you can add your own properties to this customized user control.

How to use the user control in your code?

It's an easy task. Just after creating your component, build it. Now, go to your startup project or the project which has your application. Right click on References in the Solution Explorer. Then, click on Add Reference-> Projects. You will find there the name of your class library, just add that one. Now, when you look at the toolbox, you will find your customized control over there. Just drag it and drop on the form to use it.

Summary

Microsoft has provided the UserControl class as one of the most powerful aspects in .NET to the developer, using which we can create our own world of components, a tool to draw all the imaginations on the UserControl board.