Button
Represents a button control.
A Button can be clicked by using the mouse, ENTER
key, or SPACEBAR
if 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
.
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.

Supports HTML
The Button control supports custom HTML for its value. Set the AllowHtml
property to true. The below example contains text using the <del>
, <h2>
, and <bdo>
tags.

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

How to Center Button Text on Button With an Image
You can center the text on a button by doing:
button1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
button1.TextImageRelation = Wisej.Web.TextImageRelation.Overlay;
Alternatively, you can set TextAlign to MiddleCenter and TextImageRelation to Overlay in the designer.
However, you will notice that when setting TextImageRelation to Overlay the image becomes too large. This happens because overlay by default sets the image to "contain".
There are 4 ways to fix this and resize the image to the desired size:
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.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);
}
}
Attach to the ControlRendered event and add
e.Config.iconSize = new Size(20,20);
Set the iconSize property of the button in the theme:
"button": {
"states": {
"default": {
"properties": {
"iconSize": {
"width": 20,
"height": 20
}
}
}
}
}
Advanced
JavaScript Widget
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 code
Last updated
Was this helpful?