Forum Xamarin.Forms

Pass Click/Tap Event Through Levels of RelativeLayout

renzskarenzska USMember ✭✭

I'm placing RelativeLayouts on top of each other in the same grid row. The RelativeLayouts are set to FillAndExpand on both the HorizontalOptions and VerticalOptions. I want to be able to place them on top, but allow click events to pass through to the RelativeLayouts below, if nothing on the current RelativeLayout uses the Click/Tap event. Currently, the empty space in the RelativeLayout grabs the click/tap event and does not let it pass through.

Is there any way to allow tell RelativeLayout to pass the commands through to the layout items below?





  • renzskarenzska USMember ✭✭

    If found the following property, InputTransparent, but it makes the whole RelativeLayout and all controls not respond to input.

    My use case is an Expandable Button that sits in the bottom right corner that when clicked pops out multiple buttons above the Expandable Button. I don't wanted the expanded buttons to take up the input events when they aren't shown, but do want them to take the events when shown, but inside the RelativeLayout, the space is always used and events don't passthrough.

    In WPF, you could use the RoutedEventArgs to set e.Handled to false, which would pass it down to the next element in the view to handle the input. Hoping this is possible in Xamarin Forms.



  • AdamWolfAdamWolf USMember, University ✭✭

    Hey @JohnRennemeyer I've written about this on my blog and have some sample code that uses InputTransparent.

    Can you take a look and let me know if it helps? If not, can you post some images of your UI. The visual would help.

  • renzskarenzska USMember ✭✭

    I tried the InputTransparent on the RelativeLayout, to let it pass the click events through, but because items are being placed in that RelativeLayout, they are no longer clickable. I'll try to get some pictures and code up soon to make the problem easier to understand.



  • jploojploo USUniversity

    I am having this same issue. Were you ever able to find a solution?

    InputTransparent does not work because like John said, I have items in the RelativeLayout that I would still like to be clickable.

  • jploojploo USUniversity

    I was able to do it in a custom RelativeLayout renderer by overriding HitTest and returning null if the view that was tapped is itself, which propagates the touch event up:

    public override UIKit.UIView HitTest(CoreGraphics.CGPoint point, UIKit.UIEvent uievent) { UIView hitView = base.HitTest(point, uievent); if (hitView == this) { return null; } return hitView; }

  • StefaanAvonds.3725StefaanAvonds.3725 USMember ✭✭✭

    Is there any solution found? I'm having the same problem: one RelativeLayout with multiple children (background-image, content with labels etc., and ActivityIndicator). Nothing responds to anything: no button can be pressed, the focus cannot be set to an entry, ...

    Both InputTransparent and the HitTest-override didn't work...

  • PaulRiehlePaulRiehle USMember ✭✭

    @jploo Your solution works beautifully. Thank you!

  • LippelLippel DEMember ✭✭

    Do you know of a way to do this in android as well @jploo ?

  • PhenekPhenek Member ✭✭

    Hello Guys, Hope you will reply :)

    I got the same issue here with a Map & a notification View.
    the interactions on the map aren't available...

    I tried to make a CustomRelativeLayoutRenderer : ViewRenderer
    with @jploo sample but I'm stuck
    Maybe my custom renderer isn't good?
    What you suggest me?

    Thanks by advance ;)

  • MonteHansenMonteHansen USUniversity ✭✭

    Unfortunately, the same problem exists in AbsoluteLayout too, and still in XF 3.1.

    I first attempted to ensure CascadeInputTransparent, InputTransparent, UserInteractionEnabled, and Alpha properties are as needed for the layout and any other layer in between.

    I then tried the technique offered by @jploo which didn't help. After examining the current state of DefaultRenderer#HitTest I don't see the need anymore as the default HitTest code effectively does the same thing.

    I suspect that the problem is further up the chain. I hope someone else passes on their solution if one exists before I invest time to flatten the entire chain to debug the problem. Shame really, kind of makes AbsoluteLayout useless.

  • MonteHansenMonteHansen USUniversity ✭✭

    In the end I had to completely rework the layout and in the process discovered an absolutely positioned background image overlaid atop the menu buttons. Incidentally, I experienced this problem with both : Image and : Button, so it was likely the layout or mine in particular that was at issue. I resolved the issue by moving the background image to the top of the insertion order and switching to a RelativeLayout.

Sign In or Register to comment.