Configuring Style Sheets

A Canvas style consists of a set of properties with preconfigured property values for a particular control type. Style sheets allow you to quickly apply a predetermined style to any control added to a screen or object. By designing and using style sheets consistently you can make changes in one place and cascade those changes down to all Canvas screens in the CygNet environment. Style sheets allow for the creation of unique style guidelines for your enterprise, making screen design faster, easing the burden of screen maintenance, and improving operator experience. If you create more than one object with the same properties, it's a good idea to use styles to ensure consistency in design.

The style sheets are configured on the Backstage view, Settings page.

Best practice recommends that you create new styles when building your screens in the Screen and Properties panes, and then subscribe to the style in the control's Style property. Once created you can manage all styles in the Backstage view: edit style name and property values, set as default, delete, even create new styles.

These settings are saved in XML format as part of the global settings file (.gsf) for your Canvas application and applied to all instances of Canvas. If no global settings file is available, none of these settings will be configurable, but a message will provide a link to the Backstage view where you can configure one.

You can use the Canvas Find / Replace feature to globally edit style names and property values.

Configure Style Sheets

Styles are created and configured in two places within Canvas:

Both locations are described below.

It is easy to create styles in the Properties pane using the Select Properties for New Style dialog box. This is the preferred method for style sheet creation and configuration.

  1. Configure the desired properties values for your screen object (control) in the Properties pane.
  2. Click Add a new style (Add a new style based on this control) next to the Style property to open a new style sheet for this control. The style sheet will pick up any property values you have configured for the control.

Add a new style based on this control

Style Sheet configuration — Properties pane

Note: The style sheet does not display all properties for all control types. Some complex object types (for example, Chart.Series properties, and Grid.ColumnDefinition properties) and lists (e.g. ComboBox.Items properties) are hidden from style configuration.

  1. Click the check box next to the properties for which you wish to apply a new style.
  2. Edit any property values as desired.
  3. Optionally, rename the style by editing the name in the Style name box.
  4. Once your style sheet is configured, click OK to save the configuration to the global settings file.
  5. Or click Cancel to abort and close the Select Properties for New Style dialog box.

The Backstage view is the best location for globally managing styles. Additionally, this is where you designate the default style for a control type. You can also delete styles from this view. Once created in this view, the style will be visible in the Styles property drop-down menu and can then be associated with an object in the Properties pane.

  1. In the Backstage view, go to Settings, and click Style sheet Style sheet to open the Style Sheets dialog box.

Style Sheets

Style Sheet configuration — Backstage view

Note: The style sheet does not display all properties for all control types. Some complex object types (for example, Chart.Series properties, and Grid.ColumnDefinition properties) and lists (e.g. ComboBox.Items properties) are hidden from style configuration.

  1. Click Add new style to add a new style for any control type listed in the drop-down menu. The styles are added sequentially under each control type, and you can change a style's name to suit your needs. You can expand and collapse each control type by clicking Down arrow or Up arrow next to the control name or simply by clicking anywhere in the control name heading.
  2. Select the style in the left pane and the grid in the main pane of the dialog box will populate with three columns:
  1. a selection check box
  2. a list of most properties associated with this control type
  3. the default values for each property
  1. Optionally, rename the style by editing the name in the Style name box.
  2. Indicate whether the style will be the default style for this control type by clicking Default style for this control type. A green check Default style indicator will display next to the default style for each control type. Each time a new control of this type is added to a screen, the default style will be used.
  3. Edit the control's properties for the selected style:
  1. Click the check box for the property for which you want to set a style value.
  2. Click in the Value column and use the configuration options to set a new value. See the properties topic for each control type for an explanation of each property.
  1. Optionally, click Delete style next to a style name to remove it from the list of available styles for any control type. If you delete a style in the Backstage view, any controls using the style will retain the style settings but will no longer get style updates.

  2. Click Filter in the column header to filter the rows as needed. Click here for more information about using the filter tool.

  3. Click any column header to sort that column in ascending or descending order.

  4. Once your style is configured, click OK to save the configuration to the global settings file.
  5. Or click Cancel to abort and close the Style Sheets dialog box.

Notes:

  • Open screens do not automatically apply changes made in pre-existing style sheets. When you save, open, or run a screen Canvas will check the style sheet for any changes and apply any new property values.
  • The Canvas plugin model allows the creation of third-party control types, and once added to Canvas they will appear in this dialog box and you can create and apply new style sheets as desired.