Image Alignment

Purpose

• Required:  No
• Type of Change:  Feature

In previous versions, the image in an Image control could either be placed at the top left corner of the control rectangle, or centered in it using the <centered> tag. This was very limiting to skin designers and is not consistent with other controls (like the label control).

Description of Change

Two new tags have been added to the Image control:

• tag <align> can be used to specify the horizontal alignment of the image within the control. Acceptable values are left (default), center and right.
• tag <valign> can be used to specify the vertical alignment of the image within the control. Acceptable values are top (default), middle and bottom.

The <centered> tag has been kept for backward compatibility and works as before but is now considered obsolete and should not be used in new designs. In future versions the tag will be removed. As a result, existing skins should switch to align/valign instead of centered as soon as possible.

Additional Information and References

• Mantis Issue: 0003064
• Related xml(s):  any that use the centered tag in images
• Window ID: 
• Related GUI property/control: align and valign in Images.

XML/Code Samples

<control>
  <description>Satellite image</description>
  <type>image</type>
  <id>1000</id>
  <posX>240</posX>
  <posY>200</posY>
  <width>440</width>
  <height>350</height>
  <texture></texture>
  <align>right</align>
  <valign>middle</valign>
</control>

Tags: feature, skin-related