The first thing I noticed when I first opened Microsoft .Net Beta was its new flat buttons. When the button is flat it uses a smooth color to show the picture and when the mouse is over it, draws a blue rectangle and also adds a nice shadow. This gives the effect of having a floating picture when the button is raised.
I thought it would be a good idea to have a control that would allow me to have '.Net' buttons, and this is what this page is all about: how to build a '.Net' button.
Because the only difference between 'SmartNetButton' and 'SmartButton' is in its drawing behaviour, I would suggest you read my article 'How to implement a flat button' if you want to get more information about how to build a flat button.
This article will focus on how we can add the '.Net' special
effects to a flat button and will also describe the properties, methods
and events that are available on my free control 'SmartNetButton'.
How can we 'smooth' the button picture when the mouse isn't over the button? This was my first question.
My first thought was that we could have two picture properties, one to be used when the button is flat and the other one to be painted when the mouse is over the button. This would obviously work but... it would be a time-consuming solution: every time we want to change the picture we have to 'smooth' it again.
So then I decided to find out what kind of 'rule' Microsoft uses to smooth the pictures and, after doing several screenshots of 'VS.Net', I found there was a relationship between the original and final colors for every pixel.
As you can see above, the open-folder picture comprises mainly four colors: yellow, white, black and brown. If we compare the original color with its smooth version, we come up with following table:
We can get new points of reference by repeating the same process to other icons:
Seems clear that there's a relationship between the original and final colors. This relationship is always expressed in terms of RGB increment. If we now break-down this relationship we come-up with the following table:
Things are now getting easy. Now we only need to express this relationship through a mathematical formula:
Private Function pTransform(ByVal X As Long) As Long
pTransform = 76 - Int((X + 32) / 64) * 19
What's next then? we have a formula to transform a sub-color (red, green or blue) into a new smoothed sub-color. The next step is to use this formula to transform a whole picture.
As far as I know, VB6 doesn't provide a way for accessing individual pixels of an image. Therefore, we will have to use native APIs. You can find below a VB sample of a function that receives a picture as a parameter and returns the picture handle of the new smoothed picture.
Public Function fSmoothPicture(ByRef
m_Picture As StdPicture) As Long
This function works only for bitmaps. If the function parameter 'm_Picture' holds an icon or a complex image, you will have to render the image on the target device context before applying the transformation.
You have seen in the above code that we're using a function, called 'pMask()', to transform each pixel color. What this function does is to split the color into its RGB components, transform each sub-color and return the new smooth color.
Well, we have the first '.Net' effect sorted out. In the next section
we our going to discuss how to add a dynamic shadow to the picture.
How to add a shadow to the picture
As I said in the introduction, the '.Net' button adds a shadow to the picture when the button is raised. We're now going to see how we can easily implement this effect.
First of all, we've seen that it is a bad idea to have 2 picture properties in our control. So, how then can we add a shadow to the picture? The answer is "by using the API DrawStatus".
DrawStatus is a very powerful API that allows us to draw a picture on a device context. We can draw the picture using a 'normal' mode or, by using its flag DSS_MONO, draw the picture using a single color. We can use this function to draw a greyed version of the picture (this will be the shadow) to then draw the normal picture 2 pixels away so it will seem to be floating over the canvas.
The following VB method draws a picture on the usercontrol device context. The picture will be drawn normal or greyed depending on the value of its parameter 'bShadow'.
Private Sub fDrawPicture( _
About the free .Net control
SmartNetButton is a free control that mimics the '.Net' flat button behaviour. You can freely use it in your applications.
Each item has its own displaying area:
The size of the caption area is set as a % of the total size and we use property CaptionAreaPercent to change this value. You can place the caption area to the left, right, top or bottom of the picture area. You can change this position using property CaptionAreaLayout.
Each individual area (caption or picture) has its own properties to help you positioning. Each area is divided into 9 possible layouts:
There are also 4 properties for each area that will help you to better tune the layout. These properties set the offset between each position and the edge of its display area. You have CaptionOffsetLeft, CaptionOffsetTop, CaptionOffsetRight and CaptionOffsetBottom for the caption. You have PictureOffsetLeft, PictureOffsetTop, PictureOffsetRight and PictureOffsetBottom for the picture:
Finally, you can find below a table containing all SmartNetButton properties, methods and events:
Copyright © 2001, Andrés Pons (email@example.com). All rights reserved.