ImageList Control

Inserting an image list control

1. Open the relevant screen in Designer () mode.
2. Select Insert | ImageList () from the main menu, then use your cursor to insert the control on the screen. Note that the ImageList control itself will not be visible in the resulting GUI, it is simply a container control so its size is irrelevant.
3. Specify a the Name for your image list control. You will need to give this control a name if you wish to bind it to any other controls on your form.
4. Use the Images property to open the Files Editor and add images to the control's collection (see below).
5. Specify the ImageHeight and ImageWidth properties to set the display size for images in the collection.

Adding and removing images to the image collection

1. Select the image list control on your form and click on the prompt button next to the Images property. The ImageList Files Editor will open.
2. Click the Add () button to open a file browsing window and select the image you wish to add to the Images collection. It is important to note that Newlook uses relative file paths therefore any images that you add to an image list control must be deployed to end users in the same relative location. It is recommended that you create an Images folder within your solution directory which contains all custom images used in your project. This solution folder can be deployed to end users and all relative paths remain intact.
3. Add as many images to the collection as required.
4. To remove images from the collection, select the image in the editor and click the Remove () button.
5. The index of each image is determined by its order in the collection. Be mindful that if you reorder the images in the editor, the index of the image in the collection will change. To reorder an image in the collection, use the arrow buttons to the right of the collection list or drag and drop an image reference to the desired location.

Setting image size

The size of the image displayed in the bound control is determined by the ImageHeight and ImageWidth properties of the image list control. All images in the collection will be displayed at this size, even if they are larger or smaller.

Binding an image list control to another control

In order to use an ImageList with another control you must bind the ImageList with the second control through a specific property.

• DataGrid control - Use the ImageList property of the DataGrid to bind it to an ImageList control. You can then use the ImageIndex property of the column object to specify the index of the image you want to display as an icon in the column header to the left of the header text, or the ImageIndex property of individual cells to specify the index of the image you want to display as an icon in the specified cell. Before setting the ImageIndex property of a grid cell, you must define the column's Type property as Image. You can either do this at Design-time via the Column collection editor or at runtime via a script or macro.
• ListView control - Use the Icons property to specify the image list you want to associate with the control. When the View property is set to ViewIcon, images will display above each list item, depending on the index specified in the Icon property of each list item. When the View property is set to ViewSmallIcon, ViewList or Report then images will display next to each item in the control.
• Tab control - Use the ImageList property to specify the image list you want to associate with the control. Once specified, you can use the ImageIndex property of individual tab objects to set the index of the relevant default image to display in the tab portion. Use the HoverImageIndex to set the index of the image to display when the user hovers over the tab and the SelectedImageIndex to set the index of the image to display when the user selects the tab.
• TreeView control - Use the Icons property to specify the image list you want to associate with the control. If the Icons property is specified, an image will display next to each node in the tree view. The Icon property of each node specifies the index of the image to display. If you want the icon to change when the user clicks on it then you will need to specify the index of the image to be displayed in the SelectedIcon property of each node.

Newlook Smartclient | Newlook Server | Deprecated | Obsolete

Property	Client	Description
Column		The green screen column coordinate that marks the beginning of the object. Read only. Host generated controls only.
CssClass		Gets or sets the CSS class, or classes, for the control in Newlook Server. Server-only.
Enabled		Gets or sets the enabled state of the object. Obsolete
FormControlsCollectionIndex		Sets or returns the current control index for an object.
Height		Returns or sets the height of the object's size in pixels at default size, which is the object's size at design-time.
ImageHeight		Gets or sets the height of each image in the collection.
Images		Gets the collection of images within the image list.
ImageWidth		Gets or sets the width of each image in the image list.
Left		Determines the distance, in pixels, between the left edge of the control and the left edge of its form or parent container at default size, which is the object's size at design-time.
MaskColor		Returns or sets the color in a bitmap image that should be interpreted as the transparent color. Deprecated property. Obsolete
Name		Gets or sets the name of this object.
Row		The green screen row coordinate that marks the beginning of the object. Read only. Host generated controls only.
Tag		Gets or sets user defined information for the control.
Top		Determines the distance, in pixels, between the top edge of the control and the top edge of its form or parent container at default size, which is the object's size at design-time.
Type		Returns a value which specifies the control's type. Read only.
UseMaskColor		Determines whether the color assigned in the MaskColor property is used. Deprecated property. Obsolete
Visible		Gets or sets whether the control, object or form is visible or hidden. Obsolete
Width		Gets or sets the width of the object in pixels at default size, which is the object's size at design-time.