Recently, I have been given the following task from my boss :-
"Give me a button that takes on the shape of my image. The image can have transparent regions. When a transparent region is clicked, the onclick code should not run"
So what have I done so far? - I have created an image with transparent regions and done
sampleBrush = new
Uri uri = new
BitmapImage SamplePic =
sampleBrush.ImageSource = SamplePic;
button1.Background = sampleBrush;
this gets the appearance looking good. I.e from a user point of view my button has taken on the shape of the image. All well and good.
However, the behaviour isnt quite there. When I click on a transparent part of the button, I do not want the onclick code to run. At present I am getting round this by running a method that scans the image to make up a Clip for my button.
Works OK but is very slow as its scanning the image pixel by pixel!!
Yes, I could check to see if the area I'm clicking on is transparent or not everytime the button is clicked, but I dont want to have to add this code for every type of button I may create in the furure.
Just an idea from my side (note: I'm not an WPF expert yet)... Could you create a base button class (for example IrregularButton) that implements the basic click things... Like ignoring clicks on transparent parts and inherit all your irregular buttons
A usability note:
If your image has transparent regions inside the image, your users might get annoyed when the button doesn't accept their clicks there. This might also be a problem if the outer edge of the graphic is highly irregular.
A few observations:
If you create all your buttons using bitmaps, you've effectively just thrown away the single biggest advantage of a vector based UI stack. You'd be much better off getting your artists to provide the images as vectors that can be converted to xaml as that
would automatically give you the functionality you desire and would gain all the scaling benefits of vectors.
How transparent does something have to be to count as transparent? 1%, 50%, 90%? Depending upon the image and the background it is placed against it may drastically alter which bits look like they should be clickable and which don't.
Andy is right, if you don't use vector graphics here, you just lose one big advantage of WPF. and just for your information, if you use bitmap iamge here, you will get caught by a known WPF issue here. because for current version of WPF, it doesn't
play well with bitmap images, and sometimes, you will get an blurry image, This blog post talked about this problem in much detail:
And, if you want an irregular Button, you should redefine the Button control's control template, using styles and control templates is the standard way of changing the "look" of a WPF control, this msdn doc link can help you get started with styling and
templating in WPF:
Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.