When you start the Theme Builder application, it shows the main window displayed below. Initially it shows the default preview pane containing a sample of Wisej controls in two floating windows in a Wisej.Web.Desktop container.
The tree on the left side shows all the elements in the current theme and the property grid on the left-bottom side displays the properties or items of the selected tree node.
You can change any aspect of the theme through this window and see immediately what effect your changes have on any Wisej control or on your application while it's running.
| Tool | Description | |
|---|---|---|
Creates a new theme.
Loads an existing theme.
Saves the theme being edited.
Saves the theme being edited to a different file.
Dropdown list with the preloaded themes. You can switch the theme being edited using this list.
Reloads the current theme. It may be useful if the preview window gets messed up after a while.
Enables or disables the live-update mode. When live update is ON, the preview window shows any change to the theme immediately. Turn it OFF to apply several changes in a sequence and save the time it takes to refresh the preview.
Enables or disables right-to-left alignment and layout. When Right To Left is ON, the preview scripts create the widgets setting the rtl and rtlLayout property to true, which adds the "RightToLeft" state to the widgets that support RTL mode.
Adds a new element or a new value to the theme.
A new element can be a Color, an Image, a Font, an Appearance, a State or a Component.
A new value can be a Style or a Property. The type of element or value that is added depends on the selected node in the components.
Deletes the selected element.
Renames the selected element.
Demotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.
Promotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component.
Moves the selected element down. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
Moves the selected element up. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
Shows the full appearance path of the last clicked widget in the preview window. The appearance key may not be present in the theme definition tree for several reasons: a) it could be a custom key defined in your application or an extension; b) it's a child component that is not themed (doesn't need to be); c) it's a new widget that wasn't themed.
The Last Clicked information allows you to add the specific appearance key when needed.
Last Clicked
