margin

margin specifies the spacing outside the form element's border.

Includes 4 sub-properties – Left, Top, Right, Bottom – which can be set individually, together, or in different combinations.

Margins are transparent and do not have any background color.

Form XML code:

<GridPanel ... margin="10,10,10,10"/>
By default, the property is set to "0, 0, 0, 0" and is absent from the form XML code. The property value will appear in the form XML code only once the property value is set to a non-default value.

Theme property filter XML code:

<ElementFilter ElementName="...">

  ...

    <SetProperty>

      <PropertyPath>

        <PropertyName>Margin</PropertyName>

      </PropertyPath>

      <PropertyValue type="Thickness" Left="10" Top="10" Right="10" Bottom="10" />

    </SetProperty>

  ...

</ElementFilter>

Possible values:

any integer

Default value:

0 for all dimensions

Inheritance diagram:

Associated containers, widgets and theme elements:

BorderPanel

CoordPanel

GridPanel

GroupBox

ScrollViewer

StackPanel

Tab

Table

TreeTable

BlobViewer

Button

Browser

Calendar

Canvas

CheckBox

ComboBox

FunctionField

Label

ListBox

MenuGroup

MenuCommand

ProgressBar

RadioGroup

PlaceHolder

Spinner

TextArea

TextField

ToolbarButton

TimeEditField

WebComponent

Associated ui methods:

setMargin()

getMargin()

Influence and behavior:

Both margin and padding specify the spacing of form elements.

Difference between them is this:

Try the example program, margin_vs_padding, to compare the runtime appearance of a form element with margin or padding:

 

margin is a complex property and includes 4 sub-properties:

For example, this value

<Label ... margin="10,10,10,10"/>

means that the label's margin is the same in all directions and is equal to 10 px (as with labels on the right):

The labels on the left have the default margin values, margin = "0, 0, 0, 0".

 

In Lycia Form Designer, margin can be set

In Lycia Theme Designer, margin can be set

If you set margin in Lycia Theme Designer without any filters, it is applied to all the elements in the form:

At runtime, you can set margin by means of the corresponding ui method – setMargin().

As margin is a complex property, setMargin() requires several preparation steps:

  1. Define the objects of ui.<Widget> and ui.Thickness types:

    DEFINE by ui.Button

    DEFINE marg ui.Thickness

  2. Bind your ui.<Widget> variable with the corresponding widget in your form:

    LET bt = ui.Button.ForName("bt1")

  3. Set values for Left, Right, Top, and Bottom (all of them) for your ui.Thickness variable via the LET statement:

    LET marg.Left = 10

    LET marg.Right = 10

    LET marg.Top = 10

    LET marg.Bottom = 10

  4. Specify the margin of your widget by passing your ui.Thickness variable as the parameter for the setMargin() method:

    CALL bt.SetMargin(marg)

Try the example program, margin_ui, to learn how it works at runtime.

 

The corresponding getter – getMargin() – is used to retrieve margins of form elements:

DISPLAY widget_var.getMargin()

 

 

Contact Us

Privacy Policy

Copyright © 2024 Querix, (UK) Ltd.