The Image control is used in places a graphic element should be inserted into the application's interface. These images, usually, are simply for visual effect, such as displaying logos or pictures or used to indicate a clickable area. In this later case the Image control functions much like the Button control while on the first one it more closely resembles the simple functionality of a TextLabel control.


photo-scenery32.png Key properties: Border Style, Border Color, Border width, Data Field, Picture, Stretch, Stretch Mode
Key events: On Click
Server Code: Image = Class(TWebControl)
Browser Code: Image = Class(TWebControl)


Graphical States

States Appearance Description
Normal image-normal.png The default state for the control when no other state is active.
Mouseover image-normal.png This view is displayed when the user moves the cursor over the control
Disabled image-normal.png This view is displayed when the control's ability to receive input is disabled.


Learn more about Morfik Styles and Themes.

Properties

Property Description
Border Color The BorderColor property specifies the color that should be used for drawing a rectangular border around the Control. Note: the border will not be visible unless the BorderStyle and BorderWidth properties are also set.
Border Sides The BorderSides property specifies the parts of a control's border that are displayed.
Border Style The BorderStyle property of the control defines how and if a border will be drawn around the control.
Border width The Border Width property specifies the line width used to draw the rectangular border around the Control. Note: the border will not be visible unless the BorderColor and BorderStyle properties are also set.
Bundled The Bundled property specifies whether the Image should be compiled into Image Bundle. This property has no effect at run time.
Color The Color property specifies the background color of the Control.
Cursor The Cursor property, if set, causes the appearance of the mouse cursor to change as it moves over the Control.
Data Field The DataField property is used to bind the Control to a database field. Either through a table or a query which is specified through the DataSource property of the Form that contains the control.
Enabled If the Enabled property is set to false, the Control's state or value cannot be changed by the user.

Note For Timer Control: This property controls whether the Timer event will be triggered at the time interval specified in the Interval property. If the Enabled property is set to false, the Timer event will not be triggered.

Height The Height property specifies the vertical extent of the Control. Note: if the CanGrow or CanShrink properties are set, the actual height of the Control at run time may be different.
Hint The Hint property, if set, specifies the text of a tooltip that is displayed when the user moves the cursor over the control.
Horizontal Placement The HorizontalPlacement property, if set, governs how the Control adjusts its size and position in response to changes in the horizontal dimensions of its parent.
Hyperlink The IsHyperlink property, when set to true, turns the Caption of the Control into a hyperlink. This is most often used when the Control is bound to a hyperlink field.
Left The Left property specifies the horizontal position of the Control in the form.
Margins The Margins property clears an area around control (outside its border).
Name The Name property specifies the identifier used to reference the control from browser- or server-side code.
Opacity The Opacity property determines the extent to which the Control obscures any controls placed in its background. A value of 0 means that background controls are fully visible, whereas a value of 100 means that background controls are completely obscured.
Shared Style The SharedStyle property can be used to force several controls always have the same appearance.
Stretch The Stretch property defines if the Picture should be stretched (or shrank) to fit the controls dimensions.
Stretch Mode The StretchMode property is used in conjunction with the Stretch property do specify how the picture should be stretched inside the Image control. The available options are: FitX, FitXY and FitY which determine in which axis the image will be stretched or if in both.
Tab Order The TabOrder property allows the developer to specify the order in which controls should receive input focus when the user steps through them using the tab key.
Tag The Tag property is used to store user data that is associated with the control.
Top The Top property specifies the vertical position of the Control in the form.
Vertical Placement The VerticalPlacement property, if set, governs how the Rectangle adjusts its size and position in response to changes in the vertical dimensions of its parent.
Visible The visible property is used to make controls visible or invisible. Invisible controls are frequently used to allow for easy access to information from a database table field, if the control is bound to one.
Width The Width property specifies the horizontal extent of the Form/control.

Events (browser-side)

Event Description
On Blur Event This event is fired within the browser when a control loses focus either by the pointing device or by tabbing navigation.
On Click The most commonly used event for a TextLabel control is the OnClick event, which should be handled to execute whatever action is intended when a control is clicked.
On Double Click This event is fired when the user clicks on a control within the browser.
On Focus This event is fired within the browser when a control receives focus either by the pointing device or by tabbing navigation.
On Hyperlink Click This event is fired in the browser just after a hyperlink is clicked and before the requested navigation is carried out.
On Mouse Down This event is fired within the browser when the mouse button, or any other pointing device button, is pressed while it is over a control. On a PC-based mouse, it specifically relates to the left-hand mouse button being depressed.
On Mouse Out This event is fired when the mouse pointer, or any other pointing device button, is moved out of the region defined by a control.
On Mouse Over This event is fired when the mouse pointer or any other pointing device is over (within the region defined by) a control.
On Mouse Up This event is fired within the browser when the mouse button, or any other pointing device button, is released over a control. On a PC-based mouse, it specifically relates to when the left-hand mouse button is being released.
On Update This event if fired when the image attached to an Image control has finished loading within the browser.
On After Pushed Or Pulled This event is fired within the browser after the position of a control has changed in response to a change in the content of a sibling control.
On Before Pushed Or Pulled This event is fired within the browser before the position of a control is changed in response to a change in the content of a sibling control.

   

Events (server-side)

Event Description
On After Print This event is fired on the server by a Control after its HTML (or in the case of Report generation, PDF) content is generated.
On Before Print This event is fired by a control on the server before control’s HTML (or in the case of Report generation, PDF) content is generated.
On Print Style This event is fired on the server to allow for CSS style changes when the HTML representation of a control is being constructed.

   

Remarks

Data Binding

Use Data Field property to bound Image control to the data source allowing to display picture associated with a Blob or Picture field in the Data Source.

Run-time behavior

Use Picture property to change picture displayed by Image control at run-time. Picture can be set either to the image stored in the internal resource folder, or to external URL.

Syntax

FX Code

  Image1.Picture :='http://wiki3.morfik.com/skins/common/images/wiki.png';

Set Bundle property to True to enable bundling images placed on the form together. Image bundling improves performance as it requires less amount of round-trips to the server, however changing Picture property for bundled image programmaticly may result in undesirable visual effects.

Related Topics