How to clip an image area of the button so that only the image would respond to clicks and ignore the transparent part. RRS feed

  • Question

  • I need to implement 4 navigational buttons in a remote control in Windows Store App (see image below). Since they are not rectangular I create 4 rectangular buttons of the same size which represent up/down/left/right by placing the appropriate image in the appropriate part of each button leaving the rest of the button area transparent. Now I place them on top of each other creating the image below. The problem is that the topmost button will take all the user clicks even if the click is in the transparent area and should be handled by the button below which has the image in the selected area.

    Is there a way to accomplish what I need so that the appropriate button which has the image in the click area will respond to the click and transparent area of the other buttons will just pass it through? Thanks.

    Friday, January 24, 2014 8:15 PM


All replies

  • We don't do non-rectangular clipping per-se, but you could create a path for the shape of each button segment instead of a rectangle. You can use UIElement.IsTestVisible to control if a specific UIElement visible for hit testing or will pass through.

    When I've done this sort of thing I've set the full pad on one bitmap and then done internal hit testing myself.


    Saturday, January 25, 2014 1:07 AM
  • Rob,

    Thanks for your reply. How do I create a path for the buttons in C#?



    Monday, January 27, 2014 5:25 PM
  • Path docs are at http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.shapes.path.aspx

    I would design the button in a vector graphics program which can export Xaml rather than hand coding it.


    Monday, January 27, 2014 11:11 PM
  • Hi Rob,

    For some reason the link you provided is not accessible but I found the information by searching for shapes.path on MSDN. I was searching for "path" before and it was returning file system path related results.

    I'll read up on this and try to find some samples.

    Thanks for your help,


    Tuesday, January 28, 2014 6:56 PM