Picture Box

Navigation:  Widget Designer > Widgets >

Picture Box

prev main next

Navigation:  Widget Designer > Widgets >

Picture Box

prev main next

Please wait. Due to its content this page might take a while to load...

The PictureBox control lets you add images on your user interface.


To create a PictureBox widget choose "Widgets > PictureBox". The mouse cursor changes to a crosshairs icon, indicating the create mode. With a left-click anywhere on the empty main background window you add the selected widget to the current page. Left-click again if you like to add one more. To quit the create mode, you can switch to the run mode with [F8], where you can use all widgets.

To edit the PictureBox parameters simply right-click on the desired Image control and choose the menu entry "Item Properties", press [ALT+P] whilst the mouse is hovering above it or double-click on it when being in the edit / move mode ([F9]). The PictureBox Property Dialog opens up.


General Widget Settings


A unique name can be entered to identify the widget via the Object and Member Notation. The default name is based on the widget type and ID.


This drop-down offers all available pages to place the widget on.

The PictureBox ’s ID may be changed by entering a new one in the text field top left. If you change it, you will be asked if you also want to adapt the name to the new ID.


A short note can be added here. It is not displayed outside the widget but can be set and retrieved with the WidgetID.Note property member.


Uncheck this box to hide the widget.

When the option “Fix” is checked, the PictureBox will be displayed on every page.


Enter a pixel size for the PictureBox's size.

X and Y:

Enter the location of the widget (upper left corner) in pixels

Picture Box Properties


Click on the "..." button to open a file dialog where you can choose your path and image. If you like to choose an image from the Widget Designer "library", click on the "Res" button. The Resource Manager opens where you can double-click on the image of your choice. You can also save custom images in the Resource Manager to access them faster. The small "x" at the right sets the default image.

The image file will be copied to the project's data folder while saving.

Prevent Selection:

Check this box to avoid selecting the widget. It then can't be selected when in moving mode, except with a right-click directly on the PictureBox. Ticking this box also has the effect that the PictureBox 's Z-position is being sent to the back.

Lock Size Ratio:

If this box is checked, the current size ratio will be maintained, even if you change the size manually.

Restore original size:

Click this button restore the image's original size. The original size can be displayed when hovering the mouse over the the image's thumbnail.

Web Link URL:

The Web Link section is of special interest when working with the Web Server feature, i.e. clicking the PictureBox in a web browser. Enter a URL e.g. "http://www.coolux.com" that your browser should call when executing the On Click Script.

It is also possible to achieve a quick page change with the URL, simply enter a hash tag "#" and the page name. E.g.: #Page2


In the Script section you may enter commands to be executed. You can type directly in the text field, the Script Assistant will help you finding the expression you search for. The topic Script Language explains this in more detail.

You can put as much text in one of the scripting fields as you like, but for keeping a good overview, using Macros and Functions is recommended for sophisticated scripts

See here a list of all commands.

On Click Script:

Enter a script that will be executed when clicking on the image. Functions and Macros are a good option to manage large and sophisticated scripts.

On Web Click Script:

This script will be executed if the PictureBox is being clicked in a Web Client. When the box "Web Script Only" is not checked, both "On Click Script" and "On Web Click Script" will be executed.

If you are interested in the Web Server feature and some small examples, please read the topics Web Server and Object and Member Notation.

Ui Effects & Animations

CSS based effects and animations can be applied to this widget. Please refer to the topic Effects & Animations for more information.