Skip to main content

Button

WATCH & LEARN0:48 · Animated tutorial
7 scenesPlay, pause, or scrub at your own pace

Activate a Button with the mouse, or press ENTER or SPACEBAR while the button has focus.

Set the AcceptButton or CancelButton property of a Form to allow users to click a button by pressing the ENTER or ESC keys even if the button does not have focus. This gives the form the behavior of a dialog box.

When you display a form using the ShowDialog method, you can use the DialogResult property of a button to specify the return value of ShowDialog.

info

For a complete list of properties, methods, and events, see the API documentation.

Features​

Icon​

An icon can be shown on the button by setting the Image, ImageList or ImageSource property. The icon and text spacing can be adjusted using the ImageSpacing property.

Button control showing icon and text placement options

Supports HTML​

To display HTML in a Button's text, set AllowHtml to true. The following example uses the <del>, <h2>, and <bdo> tags.

Button demonstrating HTML formatting capabilities

Repeat​

The Repeat functionality allows a button to raise its Click event repeatedly from the time it is pressed until released.

Animated demonstration of button repeat functionality

How to Center Button Text on Button With an Image​

To center a button's text while displaying an image, set these properties:

button1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
button1.TextImageRelation = Wisej.Web.TextImageRelation.Overlay;

You can also set TextAlign to MiddleCenter and TextImageRelation to Overlay in the designer.

With TextImageRelation set to Overlay, the image may appear too large because the default image sizing mode is "contain".

Use one of the following four approaches to set the desired image size:

  1. In the designer, add an ImageList (even an empty one works) and associate with the button by doing: button1.ImageList = imageList1; (via code or in the designer). It will use the size set on the image list.
  2. Override Button, and override OnWebRender and add config.iconSize = new Size(20,20);.
public class MyButton: Button
	{
		protected override void OnWebRender(dynamic config)
		{
			base.OnWebRender((object)config);
			config.iconSize = new Size(20,20);
		}
	}
  1. Attach to the ControlRendered event and add e.Config.iconSize = new Size(20,20);
  2. Set the iconSize property of the button in the theme:
"button": {
    "states": {
        "default": {
            "properties": {
                "iconSize": {
                    "width": 20,
                    "height": 20
                    }
            }
        }
    }
}

How to change the size of embedded icon on a button​

Assign an ImageList to the button. The ImageList's image size determines the icon size even when the button uses an image from another source.

Advanced​

JavaScript Widget​

ItemDescription
Class name"wisej.web.Button"
Theme appearance"button", see Themes.
Child components"icon" is the button's icon, if shown. "arrow" is the dropdown icon on a button with MenuItems set. See JavaScript.
Source codehttps://github.com/iceteagroup/wisej-js