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:
C#
VB.NET
this.button1.AddState("critical");
this.textBox1.RemoveState("required");
Me.Button1.AddState("critical")
Me.TextBox1.RemoveState("required");
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:
"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
Copy link
On this page
Common States
Tools