Once a control is selected the property panel will appear on the right hand side of the screen.
The first row of buttons consisting of left, up, down, and right arrows is used to navigate around the control structure. As the controls are placed in a hierarchy this is a convenient way of, for example, selecting a child controls parent. This is done by using the up button. The down button will select the first available child control. The left button and right buttons will select the next control which is a peer of the current control. Depending on what control it is, the left button may select a control to the left, or above the current control. The right button may select a control to the right, or below the current control.
The second row of buttons allow you to swap the currently selected control with a peer to the left, add a new control of the same type as the selected control to the left, delete the control, add a new control of the same type as the selected control to the right, swap the currently selected control with a peer to the right.
The copy button will copy the currently selected control to the clipboard. The paste button will insert a new control from what was copied.
The top of the Properties table shows the type of control currently selected. Immediately below that appear the detailed properties available for the current control. These are different depending on the type of control currently selected. The name of the property appears in the left column. In the right column is the value of that property. Some properties, such as a grid’s columns, are quite sophisticated. Clicking on the property value can produce a slide-out dialogue in which the property can be specified in detail.
Different types of control also have different events which can be fired based on user activity. For example a button control has a click event, and an input control has a keydown event. The available events appear underneath control property values.
To perform a specific action when a control event fires. Add the new action by selecting it from the “Add action” dropdown. You can specify the details of the action in much the same way as setting the control property values. Actions can be removed from events by using the bin icon.
Finally the Styles grid presents the style classes available for the control and you can add css styling.