Image borders

We have added bordering support to image and several control types that use images (button, checkbutton, keyboard, listcontrol, spinbutton, button3part). Some bugs have already been fixed and will be added in a later release.

Description of change

With this feature you have the ability to add borders composed from textures that you identify. Each border is a rectangular shape and each side and corner of the border rectangle is itself a rectangle drawn with the specified border texture. You may border the image at its edge or the control rectangle which contains the image.

The following skin attributes control bordering behavior.

border - specifies a comma separated list of border edge thickness for each side of the border. The order of values is left, right, top, bottom. This field accepts either four integer values separated by commas or a single integer value which is then used for all four sides. Examples:

<border>10</border>

-or-

<border>10,10,1,1</border>

border, position - specifies the position of the border relative to the image or control rectangle edges. Valid values are

OutsideImage

,

InsideImage

,

CenterImage

,

OutsideControl

,

InsideControl

,

CenterControl

. The default value is

"OutsideImage"

. Example:

<border position="CenterControl">10</border>

border, textureRepeat - specifies whether the texture used for the border should repeat or stretch inside each of the four rectangles that compose the overall border. The default value is

"no"

. Example:

<border textureRepeat="yes">10</border>

border, textureRotate - specifies whether or not the texture used for the border should be rotated for each of the border rectangles. If the texture should rotate then the texture will be rotated 90 deg for the right border rectangle, 180 deg for the bottom, and 270 deg for the left. The default value is

"no"

. Example:

<border textureRotate="yes">10</border>

border, texture - specifies the texture filename for the border rectangles. A single file is used for all four of the border rectangles. Based on the value of textureRepeat, the entire texture extent is either stretched (scaled up/down) to fill the border rectangles or is scaled (up/down) to fit inside the border rectangle at its native aspect ratio and repeatedly drawn until the border rectangle is filled. The default value is

"image_border.png"

. This texture file must exist in the skin media directory otherwise no border will be drawn. Example:

<border texture="my_border.png">10</border>

border, colorKey - specfies the color key for the border texture. The default value is

0xFFFFFFFF

. Example:

<border colorKey="0x66FFFFFF">10</border>

border, corners - specifies that the border should be rendered with corners. When the border should be rendered with corners the image control selects a texture file based on the name of the border,texture attribute. The selected file must end with

"_corner"

(excluding the extension); e.g.,

"image_border_corner.png"

. The default value is

"no"

. Example:

<border corners="yes">10</border>

border, cornerRotate - specifies whether or not the texture used for the border corner should be rotated for each of the four border corner rectangles. A single texture file is used for all four of the border corner rectangles. If the texture should rotate then the texture will be rotated 90 deg for the upper right border rectangle, 180 deg for the bottom right, and 270 deg for the bottom left. The default value is

"no"

. Example:

<border cornerRotate="yes">10</border>