locked
Pass-trough touch detection through transparent part of image

    Question

  • I am building a Windows 8.1 app, using C#/XAML, and have many images in the screen, all different shapes, partially transparent. They all handle the tapped() and manipulation events.

    When the user touches the images, the touch is detected on the topmost element, even if the user touches the transparent part of the image. I don't want that to happen. I would like the touch event to 'pass-through' an image if the user is touching the transparent part, and then the image below catches the event.

    I have not been able to do that.

    1) I've looked at this post, but the code does not compile:

    http://stackoverflow.com/questions/4800597/wpf-detect-image-click-only-on-non-transparent-portion

    2) I've tried detecting in the tapped() function if the user is touching transparent part of the image, and then set e.Handled=false, but then there is no other image behind it that gets any tapped() calls.

    Any suggestions?

    Thank you

    -B


    el_ber

    Saturday, January 17, 2015 5:20 AM

Answers

  • That is exactly what I'm trying to do, get the 'touch' even to be raised for the image that is below the finger, and does not have a transparent part being shown.

    So I can do that through code, review which images are under the finger, and then process the movement. Another option is to put an 'big' image on top of everything, and through code calculate x-y position and through code detect which image to move.

    I was hoping there is a simple way, for example like the link below, which would allow the XAML engine to automatically pass through the touch to the 'right' element, ignoring transparency:

    http://stackoverflow.com/questions/4800597/wpf-detect-image-click-only-on-non-transparent-portion

    The goal is to have the user move multiple images across the screen, to organize them in a specific order. The pieces have assorted shapes (not simple squares or circles).

    -B


    el_ber

    Like I said I don't have touch capability on my system in order to do this. I could do this for mouse right click event but then would have to perform drag and drop using mouse move events. This would not be the same as doing this with finger nor would the same events be used. So in the end I would waste a lot of time for no reason.

    Plus the code would be in Visual Basic.

    And I don't feel like going through the effort as I've only created WPF apps a few times and don't know the programming requirements as I normally use Windows.Forms. So I would have to figure everything out from scratch. Although I've no doubt it would be simple to do and I could download some jigsaw puzzle pieces with white backgrounds and make their backgrounds transparent so that they would have to be moved, as WPF Image's, in order to build a jigsaw puzzle. But again I don't want to put out the effort to do all of that.


    La vida loca

    Sunday, January 18, 2015 4:19 AM

All replies

  • I suspect that you need to cause the TouchDown event to occur as soon as the finger touches the screen. This will only occur for the UIElement being touched and you will probably then need to get the primary touch point. This will provide the x and y coordinate of the touch apparently.

    Once you have the x and y coordinate of the touch I suspect in the top Image you will have to determine if a transparent pixel is at that location. If so then look at the next Image below the top image and see if there is a transparent pixel at that location. Of course this is guessing that all of your Image's are the same size and at the same location in your app. You don't mention otherwise.

    You could have 10 images stacked and all have transparent pixels in the same location. Regardless whatever you are attempting if the first image found in the stack has a non-transparent pixel in that location then do something I suppose. If all images have a transparent pixel in that location then do nothing. I don't have touch capability on my PC and could not test this.

    Of course none of what I mention is the way you believe this should be done. And you make no mention of what you are attempting to do as an end result other than make some other element somehow catch an event when it can not have focus in order to receive an event of this type I believe.

    UIElement.TouchDown Event .. Occurs when a finger touches the screen while the finger is over this element.

    Remarks

    By default, the PreviewTouchDown and TouchDown events do not occur until a finger touches the screen and moves. Pressing a finger on the screen and holding it without moving it causes the press and hold behavior of a Stylus. The press and hold behavior is equivalent to a mouse right-click.

    To cause the PreviewTouchDown and TouchDownevents to occur as soon as a finger touches the screen, set the Stylus.IsPressAndHoldEnabled attached property to false for this element.

    _____________________________________________________________________________________________

    TouchFrameEventArgs.GetPrimaryTouchPoint Method


    La vida loca


    Saturday, January 17, 2015 6:09 AM
  • That is exactly what I'm trying to do, get the 'touch' even to be raised for the image that is below the finger, and does not have a transparent part being shown.

    So I can do that through code, review which images are under the finger, and then process the movement. Another option is to put an 'big' image on top of everything, and through code calculate x-y position and through code detect which image to move.

    I was hoping there is a simple way, for example like the link below, which would allow the XAML engine to automatically pass through the touch to the 'right' element, ignoring transparency:

    http://stackoverflow.com/questions/4800597/wpf-detect-image-click-only-on-non-transparent-portion

    The goal is to have the user move multiple images across the screen, to organize them in a specific order. The pieces have assorted shapes (not simple squares or circles).

    -B


    el_ber

    Saturday, January 17, 2015 6:36 AM
  • That is exactly what I'm trying to do, get the 'touch' even to be raised for the image that is below the finger, and does not have a transparent part being shown.

    So I can do that through code, review which images are under the finger, and then process the movement. Another option is to put an 'big' image on top of everything, and through code calculate x-y position and through code detect which image to move.

    I was hoping there is a simple way, for example like the link below, which would allow the XAML engine to automatically pass through the touch to the 'right' element, ignoring transparency:

    http://stackoverflow.com/questions/4800597/wpf-detect-image-click-only-on-non-transparent-portion

    The goal is to have the user move multiple images across the screen, to organize them in a specific order. The pieces have assorted shapes (not simple squares or circles).

    -B


    el_ber

    Like I said I don't have touch capability on my system in order to do this. I could do this for mouse right click event but then would have to perform drag and drop using mouse move events. This would not be the same as doing this with finger nor would the same events be used. So in the end I would waste a lot of time for no reason.

    Plus the code would be in Visual Basic.

    And I don't feel like going through the effort as I've only created WPF apps a few times and don't know the programming requirements as I normally use Windows.Forms. So I would have to figure everything out from scratch. Although I've no doubt it would be simple to do and I could download some jigsaw puzzle pieces with white backgrounds and make their backgrounds transparent so that they would have to be moved, as WPF Image's, in order to build a jigsaw puzzle. But again I don't want to put out the effort to do all of that.


    La vida loca

    Sunday, January 18, 2015 4:19 AM