Appearance

Graphical representation of the control element: background, frame, shadow, transparency and visibility.

The following properties are available in the "Display" category to configure the display of the control element.

• Depending on the style of the control element, properties for displaying a frame and a shadow may be available.

Background

Defines a background with a colour gradient. Theme colours are used for the available backgrounds.

Example: "@PrimaryVertical" defines a background with a vertical colour gradient with the theme colours "@PrimaryDarkColor", "@PrimaryLightColor" and "@PrimaryColor", which are blue in the Light Theme and green in the Green Theme.

BorderRadius

Defines the thickness of the rounding for the corners of the element. The setting "0,0,0,0" means that the corners are not rounded. The higher the values, the rounder the corners. The values can be specified in pixels or as a percentage.

BorderStyle

Defines the type of border. If "BorderStyle" is set to "None", no border is drawn. Other settings include "Dotted" (dotted border) or "Dashed" (dashed border).

BorderWidth

Defines the thickness of the border line. The setting "BorderWidth" = "0,0,0,0" means that the border is not displayed. Only specifications in pixels are possible.

Opacity

Specifies the transparency for the element, from 1 (opaque, default setting) to 0.5 (semi-transparent) to 0 (completely transparent).

Shadow

Defines the type of shadow for the element. The property contains a list of shadow settings, from "None" (no shadow) to "Elevation_z0" (hardly any shadow) to "Elevation_z24" (deep shadow), from which one can be selected.

For controls that can assume different statessuch as "Checked" or "Pressed", there are the properties "CheckedShadow", "PressedShadow" and "CheckedPressedShadow". These properties can be used to define a shadow for the respective state of the element.

Visibility

Determines whether the element should be visible, invisible or collapsed.

• Visible

  The element is visible (default setting).

• Hidden

  The element is invisible and the space required for it is kept free.

• Collapse

  The element is invisible.

  The setting has a different effect depending on whether the element was placed on a FlexLayout or an AbsoluteLayout:

  • If the element is placed in a FlexLayout, the subsequent elements in the FlexLayout move to the position of this element.

  • If the element is placed in an AbsoluteLayout, the elements following it do not automatically take its place, as the positions of the elements in an AbsoluteLayout are defined by the "Left" and "Top" properties.