Tech Off Thread

5 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Irregular shape WPF button

Back to Forum: Tech Off
  • User profile image

    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

    ImageBrush sampleBrush = new ImageBrush();
    Uri uri = new Uri("C:\\test1.png");
    BitmapImage SamplePic = new BitmapImage(uri);
    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.

  • User profile image

    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 from that?

  • User profile image

    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.

  • User profile image

    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.
  • User profile image

        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:

    Why do my bitmap looks blurry?

        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:

    Styling and Templating


Conversation locked

This conversation has been locked by the site admins. No new comments can be made.