Home

Windows Controls: The Button

 

Fundamentals of the Button Control

 

Introduction

On a typical application, a button is an object that the user clicks to perform an action. To make this obvious, a button is a control surrounded by thick borders. Here is an example of a button on a form:

Button

Although a control is usually positioned on a form, there are various other control containers that can hold a button. These include the toolbar or the status bar, and the other containers we have used so far.

To indicate what it is used for, a button displays some text as its caption. A button can also display a picture instead. Another button can display both a string and a picture. When you create a button, you will decide what it should display and how it should behave.

Creating a Button

To support the buttons of an application, the .NET Framework provides an abstract class named ButtonBase. The regular button of Microsoft Windows is implemented by the Button class.

To create a button, declare a variable of type Button and use the new operator to allocate memory for it. Here is an example:

open System;
open System.Drawing;
open System.Windows.Forms;

let Exercise  : Form = new Form()
let btnResume : Button = new Button();

btnResume.Location <- new Point(12, 12);
Exercise.Controls.Add(btnResume);

Application.Run(Exercise);

The Characteristics of a Button

 

The Caption of a Button

For a user, the most important aspects of a button are the message it displays and the action it performs. The text the button displays allows the user to know what the button is used for. This is represented by the Text property. Here is an example:

open System;
open System.Drawing;
open System.Windows.Forms;

let Exercise  : Form = new Form()
let btnResume : Button = new Button();

btnResume.Text <- "Résumé";
btnResume.Location <- new Point(12, 12);

Exercise.Controls.Add(btnResume);

Application.Run(Exercise);

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

Button

The position of the text of a button is controlled through 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 MiddleCenter MiddleRight
BottomLeft BottomCenter BottomRight
BottomLeft BottomCenter BottomRight

Here is an example:

open System;
open System.Drawing;
open System.Windows.Forms;

let Exercise  : Form = new Form()
let btnResume : Button = new Button();

btnResume.Text <- "Résumé";
btnResume.Location <- new Point(32, 20);
btnResume.Size <- new System.Drawing.Size(120, 48);
btnResume.TextAlign <- ContentAlignment.BottomCenter;

Exercise.Controls.Add(btnResume);

Application.Run(Exercise);

Button

The Image on a Button

Besides, or instead, of a caption, a button can display a picture on top. If you want a button to display a bitmap, you should first create, design, or have a picture. Then, in the Properties window, use the Image field to select a bitmap or an icon. You can also programmatically assign an Image object to the Image property. Here is an example:

open System;
open System.Drawing;
open System.Windows.Forms;

let Exercise  : Form = new Form()
let btnResume : Button = new Button();

btnResume.Location <- new Point(32, 20);
btnResume.Size <- new System.Drawing.Size(120, 48);
btnResume.Text <- "Resume";
btnResume.TextAlign <- ContentAlignment.BottomCenter;
btnResume.Image <- Image.FromFile(@"C:\Pictures\Smile.jpg");

Exercise.Controls.Add(btnResume);

Application.Run(Exercise);

This would produce:

By default, both the caption and the image display on the middle-center of the button. To make them distinct and allow the user to see both, you can design a bitmap that has both and assign that bitmap as the image of the button. Alternatively, you can use a separate string and a separate picture. Fortunately, each can have its own alignment. We already saw how to control the alignment of the caption.

Besides displaying an image, the Button class is equipped with the ImageAlign property that allows you to specify the alignment of the image. The ImageAlign property is inherited from the ButtonBase class. The ButtonBase.ImageAlign property is based on the ContentAlignment enumeration that we are already familiar with. Here is an example:

open System;
open System.Drawing;
open System.Windows.Forms;

let Exercise  : Form = new Form()
let btnResume : Button = new Button();

btnResume.Location <- new Point(32, 20);
btnResume.Size <- new System.Drawing.Size(120, 48);
btnResume.Text <- "Resume";
btnResume.TextAlign <- ContentAlignment.BottomCenter;
btnResume.Image <- Image.FromFile(@"C:\Pictures\Smile.jpg");
btnResume.ImageAlign <- ContentAlignment.TopCenter;

Exercise.Controls.Add(btnResume);

Application.Run(Exercise);

This would produce:

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.

 
   
 

The Flat Style 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 enumeration of the same name. It provides 4 values that are:

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

    open System;
    open System.Drawing;
    open System.Windows.Forms;
    
    let Exercise  : Form = new Form()
    let btnApply : Button = new Button();
    let btnIgnore : Button = new Button();
    
    btnApply.Location <- new Point(28, 20);
    btnApply.Size <- new System.Drawing.Size(120, 48);
    btnApply.Text <- "Apply";
    
    btnIgnore.Location <- new Point(160, 20);
    btnIgnore.Size <- new System.Drawing.Size(120, 48);
    btnIgnore.Text <- "Ignore";
    btnIgnore.FlatStyle <- FlatStyle.Flat;
    
    Exercise.Controls.Add(btnApply);
    Exercise.Controls.Add(btnIgnore);
    
    Application.Run(Exercise);
    This would produce:

    The Flat Style of a Button

    The Flat Style of a Button

  • Popup: The button appears flat:

    The Flat Style of a Button

    The Flat Style of a Button

    When the mouse is over it, the borders of the button are raised
  • Standard: The button appears and behave like all regular buttons you have seen

    The Standard Style of a Button

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

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 launch this event, you can double-click the button on the form. To create this event programmatically, 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.

The Result of a Dialog Box

After the user has used a form or dialog box, to close it, the user would click a button. When the user does this, you must find out what button was clicked. Although there are various ways you can get this information, to assist you, the .NET Framework provides a convenient mechanism through an enumeration named DialogResult.

 
 
   
 

Previous Copyright © 2015 FunctionX Next