Forum Xamarin.Forms

How to make a translated button clickable?

I'm trying to make a drop-down menu. The way I tried to do this was adding buttons in an AbsoluteLayout and giving them TranslateY in a for loop. The problem is, the buttons are not clickable, and are covered by whatever is below the AbsoluteLayout in the surrounding StackLayout.

Is there any way to circumvent this, and make the buttons both visible and clickable, like a normal drop-down menu would be?

Best Answer


  • adamkempadamkemp USInsider, Developer Group Leader mod

    Transforms (which is what the translate functions use) don't affect hit testing. You shouldn't use translations to move things that you want the user to be able to interact with after the translation.

  • IgorPerunovicIgorPerunovic USUniversity

    Is there a way to do it in the PCL, instead of writing it in each native app?

    And, if not, what would I use for Android, as all I could find about Transforms was for the iOS only?

  • adamkempadamkemp USInsider, Developer Group Leader mod

    Android has TranslationX and TranslationY properties, which effectively do the same thing. I'm not sure if those properties are taken into account for hit testing on Android.

    The fix for this is to not use translation at all. Instead just adjust the actual position (X and Y) of the view. Translations/transforms are used for either non-interactive views or only during animations.

  • IgorPerunovicIgorPerunovic USUniversity

    Ok, how do I adjust the position then? :)

    I just want a drop down menu that can be opened anywhere on the screen, independent of the surrounding layouts, visible and clickable. I already made the properties, everything, just need the UI solution for the in-place drop down menu.

  • adamkempadamkemp USInsider, Developer Group Leader mod

    Are you doing an animation or just updating the location? You can adjust the bounds of an element inside an AbsoluteLayout using AbsoluteLayout.SetLayoutBounds(element, newBounds). For animations you can probably use the extension methods in AnimationExtensions, like myAbsoluteLayout.Animate(...).

  • IgorPerunovicIgorPerunovic USUniversity

    Well, the point is that the AbsoluteLayout is inside a small StackLayout, but that the drop-down menu should overflow, going outside the StackLayout's boundaries (and, thus, probably outside the AL's boundaries).

    I can't have the AL be big in the first place, because it would push other layouts and views out of place. I just need the drop-down menu to show up on click right below the button for opening the menu.

  • IgorPerunovicIgorPerunovic USUniversity

    As for animation vs just updating the location, it's not important, as long as I can get a good menu with hit detection.

Sign In or Register to comment.