microISV, Supporting Images

Adding Image Support

At the end of the last post I was about to add support for showing images over the border and background areas of the Group control. The Group control is our first control under development and is deliberately simple in order to allow the development of the basic framework code.

I only managed to get the image support finished today which is a little longer than I anticipated. Not because the changes were that difficult but the heatwave here in England has made if difficult to get motivated in the evenings. After a day slogging away at an office without air conditioning you feel pretty wacked out by the time you get home. And of course, the only time I have to work on Component Factory is my evenings and weekends.

Image Styles

In the following picture you have two instances of the Group control where an image has been specified for the background appearance. The left instance has specified an image style of Tile, hence the picture of a business man is repeated over the background area. The second instance has the same image but a style of Stretch and so the image is stretched to fit whatever the background space happens to be.



Of course, you can also do the simple stuff you would expect like place the image in the middle of the background area or the top left or the bottom right and so forth. The first of the pictures below shows the businessman this time placed in the center.

Of more interest is the second picture where the image is tiled over the background but this time using the TileXY style setting. This means that each time the image is repeated over the X or Y axis it is flipped. Strange though this sounds it is actually very useful for tiling images you want to appear as smooth wallpapers.



Alpha Channels

You can use exactly the same features on the border instead of the background, or even apply one image for the border and another for the background. The two pictures below have deliberately large borders so you can more easily see what is happening.

Another point worth remembering is that using PNG files means you can have an alpha transparency key allowing the image to overlay but still show the color behind it.

If you look at the second of the two pictures below you will see that the background and the border have been defined with gradient color ranges. Then on top of these colors we are then applying images that come from PNG files. So the mobile phone and post-it note pictures are allowing the gradient colors to show through where they are defined as transparent.



Next Step

You can imagine that with some experimentation it should be possible to use the color gradient capability and image overlay to achieve a wide varity of look and feels.

My next step is to spend a little time creating a proper Professional palette instead of my simple test implementation. This one needs to give the same look and feel as the Microsoft Office 2003 applications. So it needs to use the same blue, green or silver set of colors depending on the windows theme chosen.

This is important as the majority of business customers will want to create applications that have the same style of appearance as Microsoft standard application like Outlook, Excel and Word.