Styling
Styles save settings for the visual design of a control element and can be quickly and easily applied to other control elements of the same type. Here you can find out how to use existing styles and create your own.
Web UI controls can be designed in different ways. You can use the properties of a control to define, for example, how large it should be, which colours it should use, whether it should have rounded corners, etc. You can define these and many other property values individually for each control.
If you want to design your application uniformly according to your own ideas, the configuration of each individual control element can be time-consuming. It is more efficient with a style.
What is a style?
A style defines values for selected properties for a control type that apply to all controls of this type that use this style throughout the application. »EASY UI Designer« already comes with some styles.
Example
Several buttons are available in the "Buttons" category in the ribbon, each of which uses a different style. Place a "Button (Default)", a "Button (Icon)" and a "Button (Flat)" on a page in the Designer. The buttons are visually very different from each other, although they have the same functionalities, as they are of the same control element type. Select the buttons one after the other in the Designer and note the following:
-
In the upper area of the Properties window, the style of the control element selected in the Designer is shown in brackets after the "Type" of the control element, e.g. "VisiWin.UI.Button (Plain.Default)". "Plain.Default" is the style that is applied to the button.
-
The style is also specified in the "Style" property. You can also select a different style via the property.
-
Unlike the other styles, there is no "Text" property category in the "Plain.icon" style. The properties for configuring the text cannot be edited in this style.
You can use the "Style" property to specify whether a style should be applied to the control element and, if so, which one:
If you select this setting, no style is applied to the control.
-
You can achieve the same effect by resetting the "Style" property. To do this, click on the icon for advanced options (
) next to the "Style" property and select Reset from the menu.
System styles
You can apply one of the system styles to the control, e.g. "Plain.Default" and "Material.Default". These styles are available for certain controls in every newly created project.
User-defined styles
You can create your own styles using the style editor. If you have created your own style for a control type in the project, this style is available for controls of this type in the "Style" property.
Editable and non-editable properties
If property values are defined by the style, it can be useful to exclude them from editing. This reduces the number of properties available for a control in the properties window and simplifies the configuration of the control.
In the system styles, there are therefore fewer properties available for many control elements than if the control element is used without a style.
For user-defined styles, you can specify for each property individually whether it should be editable or not.