ChiaFong

Implementing that flat button but get into a clicking problem?

In Programming on 1 October, 2008 at 3:15 pm

Ever try to implement an IE or Firefox kind of flat button (it look like just a image of a toolbar but if the cursor hover over it a square will appear around the image and make it look like a clickable button) in WPF but get into problem because it turn out that clicking the button becomes difficult as you will need to point accurately on the button’s image to activate a hit.  This is most likely because you are using x:Null for the background so that when the mouse cursor is not hovering above the button, the button will appear like a normal image.  Alpha channel to the rescue.  Instead of using “No Brush” (i.e. x:Null), you should actually play with the alpha channel.  Color definition in WPF is more than just RGB, it is actually ARGB with “A” representing the alpha channel.  Think of alpha channel as a opacity value, thus in hexadecimal, FF is full opaque and 00 is totally transparent.  Thus the background of the intended flat button should be declare as #00FFFFFF which is asking WPF to use a transparent color (when A is declare as 00, the value of RGB is actually not that important, as any value there will still mean that the resulted color is a transparent color).  This way even when the mouse cursor is on a transparent background (non-image area), it will still score a hit on the flat button.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: