# States **States** determine which styles (CSS class) and which properties to apply to a widget. During the lifetime of a widget, the state(s) that the widget assumes change dynamically depending on many factors: pointer, property settings, focus, etc. A widget can assume several states at the same time, i.e. it can be *Focused* and *Hovered* at the same time. The state of a widget is usually changed by the widget implementation, but it can also be manipulated by the application: {% tabs %} {% tab title="C#" %} ```csharp this.button1.AddState("critical"); this.textBox1.RemoveState("required"); ``` {% endtab %} {% tab title="VB.NET" %} ```php Me.Button1.AddState("critical") Me.TextBox1.RemoveState("required"); ``` {% endtab %} {% endtabs %} There are some common states that are supported by most widgets, while individual widgets may add their own states. For example, the **wisej.web.TabControl.js** widget (corresponding to the **Wisej.Web.TabControl** control) adds states corresponding to the orientation and alignment of the tabs: *barTop, barBottom, barRight, barLeft*. States may also get propagated to internal child widgets, in order to allow the child widgets to adapt their behavior and UI to the owner widget's state. ## Common States Here you can find the list of the common (shared) states by most widgets. However, specific widgets may have additional states that are not listed here. * **default** The default state is always applied first. The styles and properties defined in the default state may be overridden by the additional states. * **active** This is the state used by a *Window*, which correspond to **Wisej.Web.Form**, when it is active. Usually there can be only one active window. * **maximized** The *maximized* state is applied to maximized **Wisej.Web.Form** controls. * **disabled** This is the state applied to disabled widgets. The built-in themes set the opacity property to render the widget grayed out. * **hovered** This state is applied to a widget when the pointer is over the element, and removed when the pointer moves out. * **checked** This state is applied to widgets that support a *checked* state: check boxes, menu items, tree nodes, ... * **undetermined** This state is applied to widgets that support the *undetermined* state: check boxes, tree nodes, ... * **pressed** This state is applied to widgets that support the *pressed* state: buttons, sliders. See how the provided themes use this state to emulate the movement of a button when it is pressed: ```javascript "pressed": { "styles": { "backgroundColor": "buttonPressed", "transform": "translate(1px, 1px)" }, } ``` * **focused** The *focused* state is applied to all editable widgets when they gain the focus. * **invalid** The *invalid* state is applied to any editable widget when the application sets the **Invalid** property to *true*. Typically a theme can render this state by adding a red border, or an icon, or by changing a color on the widget. * **contextmenu** The *contextmenu* state is applied to widgets that have been assigned a contextual menu. * **vertical** This state is applied to widgets that support the *vertical* state: tab control, sliders, scrollbars. * **horizontal** This state is applied to widgets that support the *horizontal* state: tab control, sliders, scrollbars. * **barTop** The *barTop* state is assigned to a tab control widget when tabs are docked to the top, regardless of the orientation. * **barLeft** The *barLeft* state is assigned to a tab control widget when tabs are docked to the left, regardless of the orientation. * **barRight** The *barRight* state is assigned to a tab control widget when tabs are docked to the right, regardless of the orientation. * **barBottom** The *barBottom* state is assigned to a tab control widget when tabs are docked to the bottom, regardless of the orientation. * **selected** The *selected* state is applied to child items when they are selected: list items, tree nodes. * **sortable**\ \*\*\*\*The *sortable* state is applied to columns that can be sorted by the user. * **sorted** The *sorted* state is applied to columns when they are sorted. * **sortedAscending** The *sortedAscending* state is applied to columns when they are sorted ascending. * **opened** The *opened* state is applied to tree nodes when they expanded. * **up, down, left, right** These states are applied to the scrollbar buttons depending on the orientation of the scrollbar. * **showingPlaceholder** The *showingPlaceholder* state is applied to editable controls when they show the placeholder (empty value with watermark text). * **drag** The *drag* state is applied to a widget when it is the target of a drag operation. ## Tools Many controls in Wisej have a **Tools** collection to display small icons inside the control that can be connected to custom actions. These tool icons are managed in a widget using the appearance key "*ToolContainer*". You can customize the tools in relation to their container using the following states in the *ToolContainer* appearance. * **editor** ComboBox, DateTimePicker, TextBox * **datagrid** DataGridView * **caption** Form * **listbox** ListBox * **listview** ListView * **panel** Panel * **treeview** TreeView * **calendar** MonthCalendar --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wisej.com/theme-builder/theme-elements/states.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.