Contents
Display Legacy Contents

 Print
    Image Button    

An Image Button is similar to a Button. In fact, it's an Image with the "Button Effect" property set to "Second Image". Unlike Buttons, Images can display image files. You can change the displayed image in runtime. You can also link an Image to the Database. An Image can interact with the user through its Events. You should use an Image Control to create a stylish button or to display image files.

Value - Its value is the full path of the displayed image.
  • It's possible to perform drag-n-drop of  an image file ("BMP", "GIF", "PCX", "JPG", "PNG") into an Image Button Control to define it. image.
  • It's also possible to drag-n-drop two images onto an Image Button. The Control will have the Effect = Second Image automatically with the two images assigned by their selected order. 

Properties - General
GENERAL

Name – Name of the Control
This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (_).


Text – Text to be displayed in the Control
If you click on at the right side of this property, you’ll be able to set the value in each Language of the Project.


Description – Description of the Control
This Description is for your information only, Kalipso does nothing with it. If you click on at the side of this property, you’ll be able to set the value in each Language of the Project.

Plane – Plane of the Form where the Control should be created
Check the Planes chapter for more information.

Width – Width of the Control
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action. If you click on at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

Height – Height of the Control
You can set this value is runtime via the Set Property Action. You can retrieve this value in runtime via the Get Property Action. If you click on at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

From Left – X position of the Control
You can set this value is runtime via the Set Property Action. You can retrieve this value in runtime via the Get Property Action. If you click on at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).

From Top – Y position of the Control
You can set this value is runtime via the Set Property Action. You can retrieve this value in runtime via the Get Property Action. If you click on at the side of this property, you’ll be able to set the value of it in both Portrait and Landscape orientation (see the Project Properties).



STYLE

Font – Font of the displayed Text

Size – Font size of the displayed Text

Properties – Font properties of the displayed Text

Font Color – Font color of the displayed Text
You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action.

Backg. Color – Background color of the Control
You can set this value is runtime via the Set Property Action. You can retrieve this value in runtime via the Get Property Action.


Text Pos. Define the text Position inside the image.

Image Mode - Defines the way the image is displayed when the control's dimension is different from the source file:

100% - The image will be displayed in the original size, from the top left corner of the Control;
Stretched - The image will be stretched to fit the Control;
  Proportional Stretched - The image will be stretched, keeping the original proportion, to fit the Control;
Centered - The image will be displayed in the original size, centered in the Control.

Button Effect - To give the image a button effect:

<None> - No effect;
  Automatically - Kalipso will give an automatic button effect (the effect depends on the operative system);
Second Image - We are able to use a second image, for example to give the effect of on and off menu.

Transparency - Defines the transparency of the image file:

<None> - No transparency;
First Pixel - The color of the first pixel of the source file will be fully transparent in all the source file;
Image transparency - Uses the source file transparency;
Specify Color - The specified color will be fully transparent in all the source file.
Note: This option is only for Win32 clients. For Android and Win10 clients the option is always "Image Transparency"

Transp. Color - This option is available when Transparency is set to Specify Color. It allows you to select the color to use as transparency.

Text Position - Position of the displayed text.

Advanced Style - When selected, you are able to change several advanced options of the image to manage the individual size and position of the text and image inside the Control.

Border – To set or remove the frame around the Control
None – No border is displayed
Standard – A frame is displayed around the Control
Customized – You're able to to define several parameters regarding the frame to be drawn
Border Color – Color of the frame to be drawn around the Control
Line Thickness – Thickness of the frame to be drawn around the Control
Rounded Corners – Allows to specify how the corners of the frame drawn around the Control should be drawn
No – The corners of the frame drawn around the Control will be 90 degrees (rectangle)  
Rounded Tops – Instead of drawing each corner, a semicircle is drawn in each top (left and right)
 
Specify Radius – Allows you to specify the radius of the semicircle to be draw in each corner of the Control  
Radius – Radius of the semicircle to be draw in each corner of the Control
You can activate or deactivate the Border through “Set Property” Action. You can know if it's active or not in runtime via the “Get Property” Action.

 
Shortcuts
F2 – Actions

F3 – General properties

See also
 
Updated: 11/29/2017 3:52 PM