Introduction

In ‘ MAC-UI Suite ' project (a rich library of UI controls in .NET with MAC style), we think about a 3D button that is similar to or even nicer than button of MAC. We may think about 2 ways:

(A) Draw the button by Code.

(B) Using a Picture.

The way (A) has 2 limitations:

- Slower: because we have to draw the button each time of Painting. It's very hard with a complex drawing.

- Difficult to be a Nice Button: as you know, this is not easy even drawing by hand with Photoshop. So, it's very more difficult with code drawing.

So, we like the way (B). However, a strong point of way (A) is that we can set any color for the button because we control the drawing code. That makes me think about to support that for the way (B): Change Picture Button to Any Color. Please read my solution as below.

Inside the Code

Graphics class supports a long overload list for the method DrawImage(), below is one of them. The last parameter of this method is ImageAttributes imageAttrs .

[C#]

public void DrawImage(

Image image ,

Rectangle destRect ,

float srcX ,

float srcY ,

float srcWidth ,

float srcHeight ,

GraphicsUnit srcUnit ,

ImageAttributes imageAttrs

);

This parameter specifies recoloring and gamma information for the image object. We can use it to change the button picture to any color.

The MAC Button supports different colors for states of the button: Normal, Hover, and Disabled... When draw picture for each state, we use an ImageAttributes object corresponding to the color of the state. For example, when set color for the normal state, we recreate the iaNormal (ImageAttributes object) as below:

cmNormal = GetTranslationColorMatrix(buttonColorOrigin, buttonColorNormal);

iaNormal.SetColorMatrix( cmNormal, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

The GetTranslationColorMatrix method is most interesting here. It has 2 parameters is: the original color ( originColor ), and the new color ( newColor ) to transform to:

/// <summary>

/// Get ColorMatrix that transform from the origin color to a new color

/// </summary>

private ColorMatrix GetTranslationColorMatrix(Color originColor, Color newColor)

{

// Image attributes that lighten and desaturate normal buttons

ColorMatrix cmTrans = new ColorMatrix();

if(newColor.Equals(originColor))

return cmTrans;

float fTransRed = (float)newColor.R/(float)(originColor.R + originColor.G + originColor.B);

float fTransGreen = (float)newColor.G/(float)(originColor.R + originColor.G + originColor.B);

float fTransBlue = (float)newColor.B/(float)(originColor.R + originColor.G + originColor.B);

// Translate the Origin Color to New Color

cmTrans.Matrix00 = fTransRed;

cmTrans.Matrix10 = fTransRed;

cmTrans.Matrix20 = fTransRed;

cmTrans.Matrix01 = fTransGreen;

cmTrans.Matrix11 = fTransGreen;

cmTrans.Matrix21 = fTransGreen;

cmTrans.Matrix02 = fTransBlue;

cmTrans.Matrix12 = fTransBlue;

cmTrans.Matrix22 = fTransBlue;

return cmTrans;

}

As you see, the transformation Matrix is simple, but it helps us to change the button picture to any color.

Conclusion

This article do not intend to build a good button control, it just talking about how to change picture of button to any color, in this case, my MACButton control.

We can add many more functions and features for this MACButton control, for example:

• More button styles.
• Fast selecting good color style for both button and text by using the property: ColorStyleDefault, ColorStyleDisabled, ColorStyleHover, ColorStyleNormal.
• Pulsing as MAC X button style. Further more you can adjust the pulsing as you want with properties: BrightnessDefault, PulseBrightnessMax, PulseBrightnessMin, Pulse, PulseInterval.
• Very better alignment and allocation for text and image with following properties: ImageAlign, ImagePaddingX, ImagePaddingY, TextAlign, TextPaddingX, TextPaddingY.
• Supports text shadow.
• Supports .ico file fof Image property.
• Supports the AcceptButton or CancelButton
• Supports Shortcut Key...