Click here to Skip to main content
Click here to Skip to main content

Change Picture of MAC Button Control to Any Color (C#&VB.NET)

, 24 Nov 2006
Rate this:
Please Sign up or sign in to vote.
See how to change picture of button to any color, in this case, MACButton control.

Introduction

In ‘ MAC-UI Suite ' project (a rich library of more than 60 UI controls with MAC style for .NET), 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 MAC Button 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...

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

NicolNghia
Web Developer
Vietnam Vietnam
Founder & Manager of X-Component (MAC-UI Suite, XP-UI Suite, IDE-UI Suite...)
URL: http://www.x-component.com
 
MCP with below MS certifications.
- MFC
- VC++ Desktop
- VC++ Distributed

Comments and Discussions

 
GeneralMy vote of 2 PinmemberJavedsamrt14-Jan-12 1:54 
GeneralFeedback PinmemberGee66630-Apr-08 6:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 24 Nov 2006
Article Copyright 2006 by NicolNghia
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid