You are here:

Image Scaling

Image Scaling specifies whether and in what way images are scaled (= resized) in order to fit the widget they are added to.

There are different ways to change the image of the element: It can be done in Lycia Form Designer or in Lycia Theme Designer.

However, it could be more efficient to set the image of the element based on the nature of the element itself:

for a TabPage, Canvas, Label, and RadioGroup options - in Lycia Theme Designer,
for buttons and toolbar buttons - in Lycia Theme Designer or in master/user action defaults files.

Form XML code:

<element_name.image>

</element_name.image>

By default, widgets have no images and, thus, this property is absent from the form XML code. The property value will appear in the form XML code only once any image is added to the form.

Theme property filter XML code:

<PropertyName>Image</PropertyName>

<PropertyName>ImageScaling</PropertyName>

</PropertyPath>

</SetProperty>

</DoStyleAction>

Possible values:

Default value:

not specified (in Lycia Form Designer),

none (in Lycia Theme Designer)

Inheritance diagram:

Associated containers, widgets and theme elements:

Associated ui methods:

SetImageScaling ↓

GetImageScaling

Influence and behavior:

Regardless of whether you use Lycia Form Designer or Lycia Theme Designer to set the image scaling, you will get identical scaling results if you specify the same value:

None		The property is not applied, and the default behavior is used.
Horizontal		Image is scaled to fit the width of the element.
Vertical		Image is scaled to fit the height of the element.
Both		Image is scaled to fit the whole element.

In Lycia Theme Designer, you set the value of the Image Scaling property to two ways:

directly to the necessary element:
the Image Scaling property is added automatically immediately (and set to None) after adding the New Image property:

At runtime, you can use ui method - <var>.SetImageScaling() - to change the image scaling:

For this purpose, you must

define a variable of the ui.Image data type,
apply <var>.SetImageScaling() to this variable, and
apply the image to the element by the <var>.setImage() method:

<var>.SetImageScaling() method can be applied only together with the <var>.SetImageUrl() method.

<var>.SetImageScaling() method will not work if you try to use it to scale the image set in the .fm2 form or .qxtheme theme.

4gl code sample

MAIN

DEFINE btn ui.Button

DEFINE img ui.Image

OPEN WINDOW w WITH FORM "imagescaling_ui" ATTRIBUTE(BORDER)

LET btn = ui.Button.forName("bt1")

CALL img.setImageUrl("qx://application/lycia.png")

CALL img.setImageScaling("Both")

CALL btn.SetImage(img)

CALL fgl_getkey()

END MAIN

default runtime appearance

(without image scaling)

changed runtime appearance

You can find examples of how to use the <var>.SetImageScaling() method in the example programs.