Home

.NET Controls: The Button

 

Fundamentals of a Button

 

Introduction

A Button is a Windows control used to initiate an action. From the userís standpoint, a button is useful when clicked, in which case the user positions the mouse on it and presses one of the mouseís buttons. In some programming environments, the classic button is called a command button. There are other controls that can serve as click controls and initiate the same behavior as if a button were clicked. From the programmerís standpoint, a button needs a host or container. The container could be a form, a toolbar, etc.

 

Button Creation

The most popular button used in Windows applications is a rectangular control that displays a word or a short sentence that directs the user to access, dismiss, initiate an action or a suite of actions. The button control is implemented by the Button class. The class ancestor of button of the .NET Framework is called ButtonBase. Therefore, to create a button, you can declare a variable of type Button. Here is an example:

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

class Exercise : Form
{
	Button btnResume;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnResume = new Button();
		btnResume.Location = new Point(32, 20);
		
		this.Controls.Add(btnResume);
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}

 

Properties of a Button

 

The Text of a Button

For a user, the most important aspects of a button are the message it displays and the action it performs. Therefore, the default property of a button is the Text: this is the word or group of words that displays on top of the control, showing the message that would direct the user as to what the button is used for.

The most popular strings that buttons display are OK and Cancel. The OK caption is set for a form or a dialog box that informs the user of an error, an intermediary situation, or an acknowledgement of an action that was performed on the dialog that hosts the button. The Cancel caption is useful on a button whose main parent (the form or the dialog box) would ask a question or request a follow-up action from the user. Whenever a dialog box allows the user to dismiss it without continuing the action, you should provide a button with a Cancel caption.

If you create a dialog box with more than one button, you should designate one of them as the default. A default button is one that would apply its behavior if the user presses Enter after using it. Most of the time, a default button has a thicker border.

After creating a button using the new operator, you can change its caption by assigning the desired string to the Text property. For example, you can set the caption of a button as follows:

button1.Text = "Let it Go!";

After specifying the Text of a button, by default, it's positioned in the middle center of the button:

 

Text Alignment

The position of the text of a button is controlled by the TextAlign property which is a value of the ContentAlignment enumerator. The possible values are:

TopLeft TopCenter TopRight
TopLeft TopCenter TopRight
MiddleLeft MiddleCenter MiddleRight
MiddleLeft MiddleRight
BottomLeft BottomCenter BottomRight
BottomLeft BottomCenter BottomRight

Here is an example:

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

class Exercise : Form
{
	Button btnResume;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnResume = new Button();
		btnResume.Text = "Resume";
		btnResume.Location = new Point(32, 20);
		btnResume.Size = new System.Drawing.Size(120, 48);
		btnResume.TextAlign = ContentAlignment.BottomCenter;
		
		this.Controls.Add(btnResume);
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}
 

Bitmap Buttons

Besides, or instead of, a caption, a button can display a picture on top. If you want a button to display a picture, you should first create or have a bitmap. Then, use the Image property to specify a bitmap or an icon. Here is an example:

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

class Exercise : Form
{
	Button btnResume;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnResume = new Button();
		btnResume.Text = "Resume";
		btnResume.Location = new Point(32, 20);
		btnResume.Size = new System.Drawing.Size(120, 48);
		btnResume.TextAlign = ContentAlignment.BottomCenter;
		btnResume.Image = Image.FromFile("C:\\Program Files\\Microsoft Visual Studio .NET 2003\\Common7\\Graphics\\icons\\Office\\CRDFLE12.ICO");
		
		this.Controls.Add(btnResume);
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}

This would produce:

 

Image Alignment

After specifying the image for the button, you can use the ImageAlign property to specify the alignment of the image with regards to the Text of the button. Here is an example:

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

class Exercise : Form
{
	Button btnResume;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnResume = new Button();
		btnResume.Text = "Resume";
		btnResume.Location = new Point(32, 20);
		btnResume.Size = new System.Drawing.Size(120, 48);
		btnResume.TextAlign = ContentAlignment.BottomCenter;
		btnResume.Image = Image.FromFile("C:\\Program Files\\Microsoft Visual Studio .NET 2003\\Common7\\Graphics\\icons\\Office\\CRDFLE12.ICO");
		btnResume.ImageAlign = ContentAlignment.TopCenter;

		this.Controls.Add(btnResume);
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}

This would produce:

 

The List of Images Associated With a Button

Instead of using the Image property, you can first create an image list and add some pictures to it. Then, using the ImageList property, assign it to the button. Use the ImageIndex property to specify what picture would be displayed on the button.

After assigning a bitmap to the button, by default, it is positioned in the middle center of the button. If the button is not equipped with a caption, this position can be ideal. If you are using both the caption and the picture, you can use the ImageAlign property, possibly in combination with the TextAlign property, to specify how the picture would be positioned with regards to the caption. The ImageAlign property also is based on the ContentAlignment enumerator.

 

The Flat Characteristics of a Button

A regular button displays with raised borders as originally set by the operating system. To give your button a fancy look and behavior, you can use the FlatStyle property. The FlatStyle property is based on an enumerator of the same name. It provides 4 values that are:

  • Flat: The button appears flat. When the mouse is over it, it becomes highlighted

  • Popup: The button appears flat. When the mouse is over it, the borders of the button are raised

  • Standard: The buttons appears and behave like all regular buttons you have seen

  • System: The appearance of the button depends on the operating system using it

 

The Dialog's Result

When the user clicks a button to close a dialog box, you must always know what button was clicked. The .NET Framework  provides a mechanism to help identify such a button. This is done through the DialogResult property. This property is based on the DialogResult enumerator.  The possible values of this property are: None, OK, Cancel, Abort, Retry, Ignore, Yes, and No.

 

Button Events

 

Click

Obviously the most important and the most intuitive event of a button occurs when clicked. This event is of type EventArgs, which indicates that it doesn't provide nor does it need any formal details about what is going on. To create this event, first implement the method that would carry its assignment, then increment-add (with the += operator) it to the Click property of the button by assigning it the EventHandler constructor. Here is an example:

using namespace System;
using namespace System::Drawing;
using namespace System::Windows::Forms;

class Exercise : Form
{
	Button btnResume;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnResume = new Button();
		btnResume.Text = "Resume";
		btnResume.Location = new Point(32, 20);
		btnResume.Size = new System.Drawing.Size(120, 48);

		btnResume.Image = Image.FromFile("C:\\Program Files\\Microsoft Visual Studio .NET 2003\\Common7\\Graphics\\icons\\Office\\CRDFLE12.ICO");
		btnResume.ImageAlign = ContentAlignment.TopCenter;

		btnResume.TextAlign = ContentAlignment.BottomCenter;
		
		btnResume.Click += new EventHandler(btnResume_Click);
		this.Controls.Add(btnResume);
	}

	private void btnResume_Click(object sender, EventArgs e)
	{
		MessageBox.Show("Your employment application appear to be incomplete" +
						"\nPlease complete it first before clicking Resume");
	}

	static void Main()
	{
		Application.Run(new Exercise());
	}
}

This would produce:

 


Home Copyright © 2004 FunctionX, Inc.