Forms design – properties panel

This panel lists a set of properties of the focused control in the current form designer and allows to set the values of the properties.

Picture - canvas >properties panel
Picture – canvas > properties panel

Upper part of the panel displays the type and the name of the focused control; the name is generated when the control is drag & dropped from the Toolbox or a control is copied. The name can be changed as long as it is unique for the whole form.

Panel also displays a preview of the focused control to for easy orientation designing forms.

To ease finding specific properties the panel contains the Search field that filters the properties.

Groups of properties

Additional properties are displayed in the panel in accordance with the type of the focused control.

Control properties are divided into several groups:

  • Appearance
  • Behavior
  • Content
  • Layout
  • Miscelaneous
Picture - canvas > properties panel > groups
Picture – canvas > properties panel > groups

 

Setting the properties of controls

Different editors are used to set values of the properties depending on the type of individual properties:

Setting a brush property:

A solid color brush can be set directly by entering a known color name (e.g. White, Black etc.) or a color in the #AARRGGBB format (e.g. #FF804020):

Picture - properties > brush > simple settings
Picture – properties > brush > simple settings

The editor’s popup provides list of known colors and other means to define a null brush, solid color brush, a gradient brush or a radial gradient brush.

Picture - properties > brush > advanced settings
Picture – properties > brush > advanced settings
  • When the  Gradient brush option is selected, a gradient brush can be defined by a set of gradient stops.
Picture - properties > brush > gradient brush settings
Picture – properties > brush > gradient brush settings

Picture-TipsThe popup can be closed using the Enter or Escape keys.

Setting a thickness property:

Setting a thickness value can be done by entering 1, 2 or 4 numbers separated by commas or spaces…

Picture - properties panel > thickness > simple settings
Picture – properties panel > thickness > simple settings

…or the numbers can be entered in the popup fields.

Picture - properties panel > thickness > advanced settings
Picture – properties panel > thickness > advanced settings

 

Setting a text property:

Text can be entered directly:

Picture - properties panel > text > simple edit
Picture – properties panel > text > simple edit

The button on the right side opens a string editor that allows easier editing of more extensive texts.

Picture - properties panel > text > advanced edit
Picture – properties panel > text > advanced edit

 

Setting a collection property:

Picture - properties panel > collection
Picture – properties panel > collection

Items in the collection editor can be added, removed or moved forward and backward. Editor also allows setting values of the properties of the individual items, as described in the Setting a … property sections of this document.

Picture - properties panel > collection > editing
Picture – properties panel > collection > editing

Clicking the OK button saves the changes in the collection and closes the window.

Clicking the Cancel button discards all changes and closes the window.

Picture-Notice.pngThe build-in controls Combo Box, List Box, Data Grid and others utilise the collection editor.