AddThis Social Bookmark Button

Print

Creating Custom .NET Controls with C#
Pages: 1, 2

The RoundButton Control

With Control and UserControl, it is very easy to develop a custom Windows control. Your custom control class inherits the UserControl class and, because the UserControl class is also a descendent of the Control class, your custom control will also inherit all of the useful methods, properties, and events from the Control class. Event handling, for example, is automatically inherited in your custom control, thanks to the Control class.



How you draw the user interface is particularly important. Whatever shape your custom control has, be aware that the control is repainted occasionally. Therefore, the user interface must be redrawn whenever your custom control is repainted. Considering that the Control class's OnPaint method is called every time the control is repainted, you can ensure that your custom control has a permanent look by overriding this method with a new OnPaint method that draws your custom control's user interface.

The code in Example 1 presents a custom control called RoundButton, which is a button that is, um, round. Figure 1 shows the RoundButton custom control on a form. The code for the form is given in Example 2. Basically, all you need to do is override the OnPaint method. The system passes a PaintEventArgs object to this method, from which you can obtain the control's System.Drawing.Graphics object. You can then use its methods to draw the user interface.

Listing 1: The RoundButton Control


using System.Windows.Forms;
using System.Drawing;

namespace MyNamespace {

  public class RoundButton : UserControl {

    public Color backgroundColor = Color.Blue;
    protected override void OnPaint(PaintEventArgs e) {

      Graphics graphics = e.Graphics;

      int penWidth = 4;
      Pen pen = new Pen(Color.Black, 4);

      int fontHeight = 10;
      Font font = new Font("Arial", fontHeight);

      SolidBrush brush = new SolidBrush(backgroundColor);
      graphics.FillEllipse(brush, 0, 0, Width, Height);
      SolidBrush textBrush = new SolidBrush(Color.Black);

      graphics.DrawEllipse(pen, (int) penWidth/2, 
        (int) penWidth/2, Width - penWidth, Height - penWidth);

      graphics.DrawString(Text, font, textBrush, penWidth, 
        Height / 2 - fontHeight);

    }
  }
}

The code in Listing 1 is a bit of a surprise, isn't it? It's too simple to be true. Your class has only one method: OnPaint. In a nutshell, this method passes a PaintEventArgs object, from which a System.Drawing.Graphics object can be obtained. This Graphics object represents the draw area of your custom control. Draw whatever you want on this Graphics object, and it will be displayed as the user interface of your custom control.

In Windows programming, you need a pen to draw a shape, and sometimes a brush. To write text, you will also need a font. The following code in the OnPaint method creates a System.Drawing.Pen object with a tip width of 4.


      int penWidth = 4;
      Pen pen = new Pen(Color.Black, 4);

It then creates a Arial Font object with a height of 10.


      int fontHeight = 10;
      Font font = new Font("Arial", fontHeight);

The RoundButton control is shown in Figure 1.

Figure 1
Figure 1: The RoundButton control embedded in a form.

The last bit of preparation is to instantiate a SolidBrush object having the same color as the value of the backgroundColor field.


      SolidBrush brush = new SolidBrush(backgroundColor);

Now you can start drawing. For the base, you use the Graphics class' FillEllipse method. The width and height of the circle are the same as the width and height of the control.


      graphics.FillEllipse(brush, 0, 0, Width, Height);

Then, you instantiate another brush that you will use to draw text.


      SolidBrush textBrush = new SolidBrush(Color.Black);

For the circle, you use the DrawEllipse method of the Graphics class.


      graphics.DrawEllipse(pen, (int) penWidth/2, 
        (int) penWidth/2, Width - penWidth, Height - penWidth);

Finally, you draw the text on the Graphics object using the DrawString method.


      graphics.DrawString(Text, font, textBrush, penWidth, 
        Height / 2 - fontHeight);

Compile your control into a .dll file and it's ready for use. The code in Example 2 presents a Windows form called MyForm that uses the RoundButton control.

Example 2: Using the RoundButton control


using System.Windows.Forms;
using System.Drawing;
using System;
using MyNamespace;


public class MyForm : Form {


  public MyForm() {
    RoundButton roundButton = new RoundButton();
    EventHandler handler = new EventHandler(roundButton_Click);
    roundButton.Click += handler;
    roundButton.Text = "Click Here!";
    roundButton.backgroundColor = System.Drawing.Color.White;
    roundButton.Size = new System.Drawing.Size(80, 80);
    roundButton.Location = new System.Drawing.Point(100, 30);
    this.Controls.Add(roundButton);


  }
  public void roundButton_Click(Object source, EventArgs e) {
    MessageBox.Show("Thank you.");
  }
  public static void Main() {
    MyForm form = new MyForm();
    Application.Run(form);
  }
}

The constructor instantiates a RoundButton object, creates an EventHandler object, and assigns the handler to the Click event of the RoundButton control.


    RoundButton roundButton = new RoundButton();
    EventHandler handler = new EventHandler(roundButton_Click);
    roundButton.Click += handler;

Note that we did not define any event in the RoundButton class. Event-handling capability is inherited from the Control class.

The next thing to do is to set some of the properties of the RoundButton control.


    roundButton.Text = "Click Here!";
    roundButton.backgroundColor = System.Drawing.Color.White;
    roundButton.Size = new System.Drawing.Size(80, 80);
    roundButton.Location = new System.Drawing.Point(100, 30);

And finally, add the control to the Controls collection of the form.


    this.Controls.Add(roundButton);

The Click event, when invoked by the user clicking the control, calls the roundButton_Click event handler, which simply displays a message box:


public void roundButton_Click(Object source, EventArgs e) {
    MessageBox.Show("Thank you.");
  }

Conclusion

In this article, you have been introduced to the two important classes in the System.Windows.Forms namespace that you should understand when building a custom control: Control and UserControl. You have also learned to build your own custom control by directly extending the UserControl class and how to use your custom control in a Windows form.

Budi Kurniawan is a senior J2EE architect and author.

Return to the .NET DevCenter.