Skip to main content

Common Properties

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

All Wisej.NET controls derive from Wisej.Web.Control and share common properties and methods. In addition to familiar properties such as BackColor, Font, and Text, the base class provides features for interaction, layout, client-side scripting, and styling.

The following sections explain a selection of these shared properties.

Anonymous​

When Anonymous is true, pointer events pass through the control to its parent. For example, clicking an anonymous Button on a Page raises the pointer event on the Page instead of the Button.

For events that expose OriginalTarget, use that property to identify the anonymous control the user interacted with.

AppearanceKey​

It's the name of the appearance in the theme that a control uses to style itself in the browser.

The value is null by default, which means that the control will use its default appearance name.

info

Retrieve the default appearance name by casting the control to Wisej.Core.IWisejControl, like this: ((Wisej.Core.IWisejControl)this).AppearanceKey;

AllowDrag​

Enables a control to initiate Drag & Drop operations. When false (default), drag & drop is disabled for the control.

AllowDrop​

Enables a control to be the target of the Drag & Drop operation. When false (default), the control will deny the drop operation.

Capture​

When true, all pointer events, anywhere on the browser and on any control, are captured and redirected to the control capturing the pointer. A resize action is an example of capturing the pointer.

Raises MouseCaptureChanged on the control losing the capture and on the control gaining the capture.

Movable​

When true, the user is able to grab and move the control. When the user starts moving the control, it will fire the StartMove event. When done, it will fire the EndMove event and the control's Location property will be updated with the new location.

ResizableEdges​

Specifies which edges the user can drag to resize the control. When the user starts resizing a control, it will fire the StartResize event. When done it will fire the EndResize event and the control's Size property will be updated with the new dimensions.

Dock​

Determines how a control is resized with its parent. The priority of the docking is determined by the order of the controls.

button1 is last in the controls collection

button1 is first in the controls list

At design time use SendToBack() or BringToFront() or Controls.SetChildIndex() to alter the position of a control in the collection and adjust the docking priority.

Docking also works with Padding. The padding of a container reduces the space used by the docked child controls.

warning

Docking order follows the control collection. Controls at the beginning of the collection are closer to the front in the stacking order.

Anchor​

Anchoring keeps a control's selected edges at a fixed distance from the corresponding edges of its parent as the parent resizes.

In the designer you can use the tiny arrows that show next to the four sides to anchor or un-anchor a side. To prevent accidental anchoring, you can turn off the visual shortcut in the design toolbar using the "Show/Hide Anchors"

tip

When neither edge on an axis is anchored, the control's position changes proportionally as its parent resizes. This can keep the control centered horizontally or vertically.

BackgroundImage​

All controls expose the BackgroundImage, BackgroundImageSource, and BackgroundImageLayout properties. They allow you to define the background of any control, in addition to any image property that the control may have.

Button with a BackgroundImage

States​

Represents an array of system and custom states. The States property allows you to add system states or define your own states and style them in the theme.

ClientEvents​

The ClientEvents property is a collection of JavaScript events and code that runs in the browser when the event is fired. In the JavaScript handler, refer to the event argument as e.

CssClass & CssStyle​

CssStyle accepts any CSS string that will be rendered on the client directly in the style attribute of the widget's main element.

CssClass is similar to CssStyle but it accepts one or more CSS class names and adds them to the class attribute of the widget's main element.

InitScript​

In InitScript you can add any JavaScript that will run when the control is first created in the browser. The script runs in the control's context (this = widget).

Enabled​

Enables or disables a control and all its children at any level. Disabled controls are rendered as enabled in the designer.

warning

When reading the value of the Enabled property you may get false even when you have set the property to true if any parent is disabled.

Visible​

Hides or shows a control. Controls are rendered on the client only when they are made visible once.

Setting Visible to true is the same as calling the Show() method, and setting it to false is the same as calling the Hide() method.

Invisible controls are visible in design mode. You can hide the invisible control by turning off the "Show Hidden Controls" option in the toolbar.

warning

When reading the value of the Visible property you may get false even when you have set the property to true if any parent is not visible.

ShowLoader​

Every Wisej.NET control has the ShowLoader property; when set to true, the control is blocked by an ajax spinner.

There is an Application.ShowLoader property that blocks the entire page.

danger

If you need to run long operations and want to show a loader to block a control, you must either update the client using Application.Update() after setting the ShowLoader property to true, or execute the code after setting ShowLoader to true asynchronously.

TabStop & TabIndex​

Most Wisej.NET controls expose the TabStop and TabIndex properties. TabStop controls whether a control participates in the tabbing order. TabIndex indicates the tabbing order of the control within the parent.

ToolTipText​

Sets the tooltip text on any control.

You can alter the shared tooltip widget using the Tooltip component. Most aspects of the tooltip system can be changed in the theme under the "tooltip" appearance key.