Component

Position

The location of Forms and components on Nexacro Studio can be designated by setting the property values of left, top, right, bottom, width, and height. Each property value can be indicated by pixel unit (px) or percentage (%). Besides the foregoing properties, Position Base and Size Base properties are supported.

Basic Properties

As seen in the below picture, there are six basic properties related to positions: left, right, width, top, bottom and height. You can specify four values out of the six properties.

Pixel (px) and percent (%) are the two units that indicate positions and are displayed in the Properties pane. You can choose either of them. If you change the unit, the relevant measurement will be automatically converted accordingly. While positional property values are basically determined based on a parent component, they will be calculated based on another component if the PositionBase feature is applied.

Tracker

When you select a component, the relevant tracker is indicated in red (or blue) according to the position property.

A PositionBase tracker appears at the center of a component unless the value of the component's positionstep property

If you select more than one component, only the trackers around the last-selected component will be filled with colors while other trackers are empty. In this case, the last-selected component will serve as the base for applying the Align, Space, Size, Position or Arrange features, which are all located in the menu [Design].

min-, max- and fittocontents Properties

You can set the minwidth, minheight, maxwidth or maxheight property to specify the minimum or maximum value of a component's height or width. If you set those properties, their values will override the values of the width and height properties when width and height exceed min- or max- properties.

You can set the fittocontents property to adjust the size (height and width) of a component so that it fits onto its contents (text, image, etc.). For example, you can resize an ImageViewer component according to the size of the image specified as a value of the image property.

The minwidth, minheight, maxwidth, maxheight, and fittocontents properties will materialize when the app is executed. If you want to realize those properties in the design mode of Nexacro Studio, you should select the relevant component and then select the menu [Fit to Contents], which can be found in the command bar (Design > Fit to Contents), toolbar or context menu.

PositionBase

You can arrange a component based on another component that has the same parent. If you have a parent component (Form, Div, etc.) as a base, you have to calculate all the distances between the parent and each internal component when you arrange a certain component. If you have a child component as a base, however, you can arrange components easily just by setting the gaps between components.

In the below picture, the top three buttons on the first row are arranged based on the parent component. In this case, you need to consider the width of the Button00 and the gap between the Button00 and Button01 to calculate the value of the Button01's left property—which is 183. By contrast, the Button01 on the second row is arranged based on the Button00 on the same row. In this case, you need to know just the gap between the Button00 and Button01 to specify the value of the Button01's left property; the value is like "Button00:28".

Restrictions

• You cannot set a component as a base if the component's parent is different.

• You cannot set a component as a base if the value of the component's positionstep property is different.

• If a component's positionstep is set to -1—which means the component is a fixed component—the component cannot be the base of another component. At the same time, it cannot have another component as its base.

• If you set Component A as the base of Component B, the Z-order value of A must be lower than that of B. Otherwise, the alert as shown in the below picture will appear to ask you whether to change the Z-order.

In the cases of the first three restrictions—positionstep is set to -1; different parent; and different positionstep value—PositionBase properties will not be activated in the Properties pane. Moreover, the PositionBase properties of a component whose Z-order value is higher will not be activated either.

PositionBase tracker

If you select one component, a PositionBase tracker, which takes the form of a four directional arrow, will appear at the center of the component. To set its base component, drag the tracker to a target component. Then, a prompt box will appear to allow you to set exact PositionBase values before you finish setting the base component.

The below table shows the properties that can be selected, which vary according to the directions the tracker is dragged.

When the base component is selected, a dashed line will be used.

No line will be used when no component is selected.

Removing a connection

To remove a connection, select the line of the relation on the Form Design pane and press the Delete key. Otherwise, right-click the line and select [Delete] from the context menu. In another way, select the connected component and delete the values of PositionBase properties.

If you change the value of the positionstep property or Z-order, the relevant component's relation with its base component will also be removed. In these cases, an alert box will appear to present the PositionBase relation that will be removed. If you proceed with the change, the Output pane of Nexacro Studio will show the result of removing the PositionBase relation.

Position Editor

To open Position Editor, right-click a component to open a mini-toolbar and select the [Position Editor] icon illustrated in the below picture. Otherwise, access the menu [Design > Position Editor].

In the editor, you can change position properties of the selected component based on its parent component.

If you select [Use anchor position], you can change position properties with fixing two of them. In the below picture, the left and top properties are fixed, and you cannot delete those two properties' values.

Guides

Ruler

To assign layouts easily when designating locations on the Form design, the ruler unit can be either pixel unit (px) or percentage (%).

When a mouse cursor moves within the Form design panel, the position of the cursor is indicated on both rulers.

Guide Line

The Guide Line function is included with the Ruler and allows the developer to make vertical/horizontal lines wherever desired to help in aligning components.

Create a guide line by clicking a spot on the ruler. Move a guide line by selecting and dragging it with the mouse. Delete a guide line by selecting it and dragging and dropping it out of the Design Window or double-clicking on the inverted triangle on the guide line.

If a Form has two or more layouts, each has its own guide lines. In addition, guide lines will remain unchanged even if you exit Nexacro Studio.

If you fit components in between two guide lines, the component sizes will change according to the direction either guide line moves.

Background Grid

The background of the Form design panel features a Grid to allow users to identify component layouts with the naked eye. The Grid size will differ according to the measurement units of the rulers. The below pictures represent the four Grid patterns.

Snap

Use the Magnetic function to make minute adjustments automatically if you put other components or options close to the DotGrid. The Snap function can be activated based on the option value on the [Tools - Options - Form Design] menu for DotGrid or other components.