Drawing image is more complicated than gradient. There are much more options and variations available.
Demo2 illustrates the methods to draw images.
The behavior is different mainly by the “drawmode” setting, and also affected by the “transparent” and “alpha” settings.
Draw mode
Stretch mode
The stretch mode is default value, which is the simplest.
Tile mode
The tile mode is also simple.
The Deom2.cfg_C.xml shows the stretch mode and tile mode of image drawing. The dialog is the image below:

The upper part of the dialog shows the “stretch” mode of image “tartan.bmp” available in the Resource directory. The original image is 256x256 pixels. The left small image stretched it smaller, while the right side stretched it larger.
The lower part of the dialog shows the “tile” mode of image “cars.bmp” available in the Resource directory.
Center mode
The center mode is much more complicated, especially when the image has different size of the cell to draw.
- Image is larger than cell
The configure file “Demo2.cfg_E.xml” shows the result in this case. The screen shot is as image below.

The left part of this dialog has 9 cells which show the same image. The right part of this dialog shows the entire image, which has a 3x3 matrix.
Each cell in the table is sized 100x100, while the entire image is sized 239x239.
The difference of cells at left part is caused by the “srcorigin” setting, which tells how to get the parts in original image to draw. The “srcorigin” value of each cell is:
As an example, when the “srcorigin” value is “nw”, the cell will get top-left corner of the image to draw.
- Image is smaller than cell
The configure file “Demo2.cfg_F.xml” shows the result in this case. The screen shot is as image below.

Each cell is sized 100x100, shows the same image “small.png” available at Resource directory. The size of image is 57x57.
Specially, the bounding box of each cell is drawn to make it easier to see difference.
The difference is caused by the “sticky” setting, which tells where to place the image. The sticky value of each cell is:
As an example, when the “sticky” value is “nw”, the cell will place the image at the top-left corner of cell.
Alpha and transparent
- Alpha setting defines the alpha channel when drawing the image
- Transparent setting defines the color that will be transparent when drawing the image
These two settings are very effective when showing image on a gradient background.
Note
1. Alpha setting is not used when there is transparent color defined.
2. These two settings are not effective when the image file has transparent color and alpha channel.
The configure file “Demo2.cfg_D.xml” shows the alpha and transparent result.

This dialog has a gradient background which is red at top-right corner, blue at bottom-left corner. The images are drawn on the background with “tile” mode.
The top-left part of the dialog is drawn with image file “arcade.bmp” available at Resource directory, with alpha value 128. You could see that the images got more red from left to right.
The top-right part of the dialog is drawn with the same image, while has transparent color “0x808000”. As the result, the gray-scale texture is kept unchanged, drawn on a gradient background.
The bottom-left part of this dialog is drawn with the image “cars.bmp” available at the same directory, with same method as top-left part. You could see that the blue is getting lighter from left to right, bottom to top.
The bottom-right part of this dialog is drawn with the image “cars.png” available at the same directory. This image has transparent channel in the file, so you could see the gradient background without the transparent color setting.
File types supported
The StdCtrlSkinTool supports kinds of image file types, including:
The transparent and alpha channels in the files are supported.