How to Work with Screens > Editing the Style of a Control

Overview

The following presents the options available (A, B and C) to create/edit an Grid control's style.

Option A

Click the “Change Style” option located in the control's right-click menu (see Editing and Creating Styles). The resulting window displays the following options:

Details of the "Select a Style" window

	It is possible to filter the displayed styles. Select one of the following options from the drop-down: All – Displays all the styles available. Internal – Displays MCL-Designer V4's standard styles. Custom – Displays the styles you have created.
	Opens a “Style Properties” window to create a new style.
	Duplicates the selected style. It also enables the edition of the duplicated style in the “Style Properties” window.
	Only removes a style that you have created (custom style).
	Opens a “Style Properties” window, but only the styles you have created can be modified/edited.
	Sets the selected style as the default style ("Def:" is added to the style's designation). Once set, the default style will be adopted by all Grid controls dragged from the “Control” tab onto the screen.

Some of these options can also be accessed by right-clicking any style in the "Select a Style" window and opening a menu as shown below:


Right-click a style	Right-click a blank space in the "Select a Style" window

	Opens a “Style Properties” window to create a new style.
	Duplicates the selected style and enables its edition in the “Style Properties” window.
	Opens a “Style Properties” window to display the selected style’s properties. Only the styles you have created can be modified/edited.
	Only becomes active if you select a custom style. It deletes styles that you have created.
	Defines the selected style as the default style for any Grid controls that are dragged from the “Control” tab onto the screen.

Option B

Right-click the Style Preview section (located below the “Control” tab). This opens a menu list with the following options:

	New	Opens the “Style Properties” window to create a new style.
	Duplicate	Duplicates the selected style and enables its edition in the “Style Properties” window.
	Properties	Opens a “Style Properties” window to display the selected style’s properties.
	Remove	Option only available if you select a custom style (standard styles cannot be removed).
	Set as default	Defines the selected style as the default style for any Grid controls that are dragged from the “Control” tab onto the screen.

Whichever the option used (A or B), the creation of a new style occurs in the "Style Properties" window. Take the following steps to fill in/adjust the available options in this window:

Step-by-step

1. Open the "Style Properties" window.

2. Enter a name for the new style in the "Style Name" box.

3. As an option, click to select a skin image from the available list.

4. Select the element you want to edit in the "Element" drop-down OR click directly on each element in the "Preview" area.

The "Element" drop-down displays the default "Frame" option but it is possible to control the "Header", "Selected Lines", "Highlighted Lines", "Even Lines" and "Odd Lines" elements. Depending on the selected element, you access the corresponding options.

When selecting the “Frame” element (which deals with the control's structure), follow these instructions:

a. Define the table's background color from the drop-down OR click and customize a color in the resulting window.

b. Define the table's border color from the drop-down OR click and customize a color in the resulting window.

c. Define the "Header Height".

d. Define the "Line Height".

e. In the "Columns" section, define each column content orientation from the drop-down ("Left Text, "Centered Text, "Right Text" or "Image").

When selecting the "Image" option, the content of the corresponding field (from a data file, a local database table or a conditional/fixed value) points to an image in the "Resources" module.

All these options are displayed in the preview box.

When selecting the “Header” element, follow these instructions:

a. Select a font from the drop-down.

b. Define a character size.

c. Select font properties (BOLD, ITALIC, UNDERLINE or STRIKETHROUGH).

d. Select the text color from the drop-down OR click and customize a color in the resulting window.

e. If, instead of text, the header displays an image, select its position in the "Image Pos" drop-down ("True Size", "Center", "Best fit to area" or "Stretch").

All these options are displayed in the preview box.

When selecting the "Selected Lines", "Highlighted Lines", "Even Lines" or "Odd Lines" elements, follow these instructions:

a. Select a font from the drop-down.

b. Define a character size.

c. Select font properties (BOLD, ITALIC, UNDERLINE or STRIKETHROUGH).

d. Select the text color from the drop-down OR click and customize a color in the resulting window.

e. Select the background color from the drop-down OR click and customize a color in the resulting window.

All these options are displayed in the preview box.

5. Click to conclude.

Option C

Option C can only be used to transform controls that have already been dragged onto the screen:

•Select the appropriate style displayed in the Style Preview section (below the "Control" tab) and drag it onto the control you want to modify. The control will automatically adopt the new style.

Keep in mind that the styles displayed in the Style Preview section - standard styles - cannot be edited/deleted, their features are locked in (the is displayed on the upper right corner of the "Style Properties" window).