# Common Properties

All Wisej.NET controls are derived from the **Wisej.Web.Control** class and share many common properties and methods. While some properties are obvious: **BackColor**, **Font**, **Text**, etc. some other are related to more advanced functionality usually not found in any other web system.

The list below is not complete, but it provides a lot of useful information.

## Anonymous

When true, the control is "transparent" to pointer events. If you place a **Button** on a **Page** and set the property **Anonymous** of the button to *true*, when the user clicks on the button, the event will bubble to Page and will fire on the Page: the button is completely transparent to the pointer.

Some events have the **OriginalTarget** property. If you have an event that carries the **OriginalTarget**, you can retrieve which 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.

{% hint style="info" %}
Retrieve the default appearance name by casting the control to Wisej.Core.IWisejControl, like this: ((Wisej.Core.IWisejControl)this).AppearanceKey;
{% endhint %}

## AllowDrag

Enables a control to initiate [Drag & Drop](https://docs.wisej.com/docs/controls/general/drag-and-drop-1) operations. When *false* (default), drag & drop is disabled for the control.

{% content-ref url="drag-and-drop-1" %}
[drag-and-drop-1](https://docs.wisej.com/docs/controls/general/drag-and-drop-1)
{% endcontent-ref %}

## AllowDrop

Enables a control be the target of the [Drag & Drop](https://docs.wisej.com/docs/controls/general/drag-and-drop-1) operation. When false (default), the control will deny the drop operation.

{% content-ref url="drag-and-drop-1" %}
[drag-and-drop-1](https://docs.wisej.com/docs/controls/general/drag-and-drop-1)
{% endcontent-ref %}

## 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.

Fires the :zap: **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 ](https://docs.wisej.com/api/wisej.web/general/control#startmove)event. When done, it will fire the [EndMove ](https://docs.wisej.com/api/wisej.web/general/control#endmove)event and the control's Location property will be updated with the new location.

{% content-ref url="move-and-resize" %}
[move-and-resize](https://docs.wisej.com/docs/controls/general/move-and-resize)
{% endcontent-ref %}

## ResizableEdges

Allows you to enable any of the four sides of any control to become draggable and resizable. When the user starts resizing a control, it will fire the [StartResize ](https://docs.wisej.com/api/wisej.web/general/control#startresize)event. When done it will fire the [EndResize ](https://docs.wisej.com/api/wisej.web/general/control#endresize)event and the control's Size property will be updated with the new dimensions.

{% content-ref url="move-and-resize" %}
[move-and-resize](https://docs.wisej.com/docs/controls/general/move-and-resize)
{% endcontent-ref %}

## 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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-120816a79edcbd16842413c7642a4908d339ce43%2Fimage.png?alt=media)

![button1 is first in the controls list](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-32a091a377d625b8b280bd543702810b1b6be8a6%2Fimage.png?alt=media)

At design time use [SendToBack()](https://docs.wisej.com/api/wisej.web/general/control#sendtoback) or [BringToFront()](https://docs.wisej.com/api/wisej.web/general/control#bringtofront) or [Controls.SetChildIndex()](https://docs.wisej.com/api/wisej.web/general/control/wisej.web.control-controlcollection#setchildindex-child-newindex) to alter the position of a control in the collection and adjust the docking priority.

Docking also works with [Padding](https://docs.wisej.com/api/wisej.web/general/control#padding). The padding of a container reduces the space used by the docked child controls.

{% hint style="warning" %}
Docking is also affected by the control position in the control list. Controls first are close to the viewer in a hypothetical 3D model.
{% endhint %}

## Anchor

Anchoring is similar to **Docking** but it "anchors" a specific side to the parent's control and keeps the relative distance.

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-ba3e89cf83e47d2e4214baca2994ef18ea59f3ab%2Fimage.png?alt=media)

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" ![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-e773ffefeaf6cc5e1f602afe0d8478553c76b536%2Fimage.png?alt=media)

![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-e773ffefeaf6cc5e1f602afe0d8478553c76b536%2Fimage.png?alt=media)

{% hint style="success" %}
When a control is not docked on both sides the relative distance is preserved proportionally on both sides. It can be used to keep a control centered vertically or horizontally.
{% endhint %}

## BackgroundImage

All controls expose the [BackgroundImage](https://docs.wisej.com/api/wisej.web/general/control#backgroundimage), [BackgroundImageSource](https://docs.wisej.com/api/wisej.web/general/control#backgroundimagesource), and [BackgroundImageLayout ](https://docs.wisej.com/api/wisej.web/enumerations/wisej.web.imagelayout)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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-33f0c9301abfc97a8ce249cf74c0dc3f7db4a2dd%2Fimage.png?alt=media)

## States

Represents an array of system and custom states. The [States ](https://docs.wisej.com/api/wisej.web/general/control#states)property allows you to add system [states ](https://docs.wisej.com/theme-builder/theme-elements/states)or define your own states and style them in the [theme](https://docs.wisej.com/theme-builder/theme-elements/states).

## ClientEvents

The [ClientEvents ](https://docs.wisej.com/api/wisej.web/general/control#clientevents)property is a collection of JavaScript events and code that runs in the browser when the event is fired. In the JavaScript handler code refer to the event argument as **"e"**.

## CssClass & CssStyle

[CssStyle ](https://docs.wisej.com/api/wisej.web/general/control#cssstyle)accepts any CSS string that will be rendered on the client directly in the style attribute of the widget's main element.

[CssClass ](https://docs.wisej.com/api/wisej.web/general/control#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](https://docs.wisej.com/api/wisej.web/general/control#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.

{% hint style="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.
{% endhint %}

## 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 ![](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-69858ad970307045449175adc4535ee5c967b864%2Fimage.png?alt=media) in the toolbar.

{% hint style="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.
{% endhint %}

## ShowLoader

Every Wisej.NET control has the [ShowLoader ](https://docs.wisej.com/api/wisej.web/general/control#showloader)property; when set to true, the control is blocked by an ajax spinner.

There is an [Application.ShowLoader ](https://docs.wisej.com/api/wisej.web/general/application#showloader)property that blocks the entire page.

{% hint style="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()](https://docs.wisej.com/api/wisej.web/general/application#update-context-action) after setting the ShowLoader property to true, or execute the code after setting *ShowLoader* to true asynchronously.
{% endhint %}

## TabStop & TabIndex

Most Wisej.NET controls expose the [TabStop ](https://docs.wisej.com/api/wisej.web/general/control#tabstop)and [TabIndex ](https://docs.wisej.com/api/wisej.web/general/control#tabindex)properties. TabStop controls whether a participates in the tabbing order. TabIndex indicates the tabbing order of the control within the parent.

{% content-ref url="../../concepts/tab-order" %}
[tab-order](https://docs.wisej.com/docs/concepts/tab-order)
{% endcontent-ref %}

## ToolTipText

Sets the tooltip text on any control.

You can alter the shared tooltip widget using the [Tooltip ](https://docs.wisej.com/api/wisej.web/extenders/wisej.web.tooltip)component. Most aspects of the tooltip system can be changed in the theme under the "***tooltip"*** appearance key.