Edit Image Property Dialog

## Edit Multi-Image Property Dialog

The Edit Multi-Image Property dialog (Figure 1) is available for certain image-capable components provided by newer S60 SDKs; such as Button and Combo list components. The image property for these components allow you to specify different images for multiple variants (normal, dimmed, pressed, hover) of the components image. In the multi-image property editor, you select a MBM or MIF file that contains all the images, select the variant of the image to edit from a pulldown list, and then select the image and mask for that variant. Select an image and mask for all variants to fully specify the multi-image property. By default, the property editor will select the same image for all variants if the property is empty when the editor opens.

Use the Edit Multi-Image Property dialog to select the images and masks from a MBM or MIF Multi-Image File (.mbmdef or .mifdef). Only images that are being built into the application are available for editing.

When the multi-image file is an .mbmdef file, a bitmap and mask are selected and composed to create an image with transparent pixels. The mask may be empty, in which case the bitmap is opaque. When the multi-image file is an .mifdef file, an SVG image is selected, which has an implicit mask described by the bounding rectangle of the SVG drawing.

When selecting a mask, a one-bit image defines a hard mask, where the black pixels in the mask select pixels from the bitmap and white pixels in the mask are transparent. Any other mask image depth (typically 8) defines a soft mask, seen visually as a grayscale image, where the value of each pixel is the alpha or transparency value of the pixel from the bitmap. In a soft mask, a white pixel is fully opaque, and a black pixel is fully transparent. A gray pixel is partially transparent. In this respect, a soft mask looks roughly inverted compared to a hard mask.

NOTE The MIFDEF compiler does not support .bmp files, so S60 3.0 applications cannot use .mifdef files to add bitmaps to .mif files. Instead, create a different .mbmdef file using a different basename than the .mifdef file, to add your .bmp files.

Figure 1 - The Edit Multi-Image Property dialog

##### Table 1. Edit Multi-Image Property dialog—items

Item | Explanation
--- | ---
Multi-Image File | Select the project's .mbmdef or .mifdef file containing the images to display.
Edit MBM/MIF File... | Opens the Edit MBM or MIF Contents dialog to add new images and pair, split, or swap an image and related mask. Note that you can use shift-click or control-click to select two images to be paired.
Select the sub-image to edit | Select component image variant, for example normal, dimmed, pressed, or hover.
Image | Select the image to display for the selected component variant. The image appears to the right of the Image dropdown with image canvas size and color depth information below. If a mask is associated with the image, it is selected in the Mask section. The combined image + mask appears in the Appearance section with canvas size and color depth information below. This is the best indicator of how the image will appear in the application. Choose <No image> to clear the selection.
Mask | Select the image mask from the dropdown menu. The mask image is then shown to the right of the Mask dropdown with mask canvas size and color depth information below. Choose <No image> to clear the selection.
OK | Click OK to close the dialog and apply changes.
Cancel | Click Cancel to close the dialog without applying any changes.

##### Image Validation

Images are validated and rendered on a per-component basis. Each component may have different restrictions or guidelines for the type or size of images that appear. In S60 2.x, or an S60 2.8 project without scalable icon support, images are cropped to the size of the context icon, navi image, or image controls. In S60 2.8 with scalable icon support and S60 3.0 projects, images are scaled to the size of the controls.

##### Supported Components

The following components currently support images:

- Button
- Combo list
- Context icons
- Navi image
- Setting item lists
- Image control
- Forms (visible on items when the form's “show bitmaps” property is enabled)
- Title pane (if text is blank, any specified image appears)

Other components may be supported in future releases.

#### Opening the Edit Multi-Image Property Dialog

- Right-click the component and select Edit Image Property, or
- In the Properties view, click the control (Figure 2) that appears when the Image property is selected

Figure 2 - Browse control appears when Image property is selected

##### Related references

- Properties View
- String List Editor Dialog
- Edit Image Property Dialog

##### Related tasks

- Adding Images