Forum Xamarin.Forms

Image Overlay Using AbsoluteLayout

I'm using an AbsoluteLayout to place an image over another control (a map). I want to place an image in the corner of the page that will toggle showing the users location on the map.

Grid Padding="0,20,0,0"
esriUI:MapView x:Name="EsriMapView" /
AbsoluteLayout x:Name="LocationButtonAbsoluteLayout" /

Code behind to place the image:

//Add the location image and place on the view
new Rectangle(0.025, 0.025, 48, 48));

I have a gesture recognizer setup and it works nicely...except.

It blocks the map from being interacted with....but, only in iOS (simulator). In Android using Genymotion, the map can be interacted with. It's like the layout is completely over top of the map, but why only on iOS?

Note: This is my first Xamarin app, so any help would be greatly appreciated.


  • MommMomm USMember ✭✭✭
    edited April 2016

    Try setting InputTransparent to true on LocationButtonAbsoluteLayout.

    If it doesn't work, I'd suggest setting BackgroundColor to Red (or another color) on LocationButtonAbsoluteLayout just to better visualize what's going on.

  • ChadYoderChadYoder USMember

    Thanks, that works with the map, but now I can't click the image.

    Here's the gesture code:

    //Setup the tap gesture recognizer
    var tapGestureRecognizer = new TapGestureRecognizer();
    tapGestureRecognizer.Tapped += (s, e) => {
    //Simulate the click
    _locationImage.Opacity = 0.6;
    _locationImage.FadeTo (1);

    //Execute the tool


    //Add the gesture recognizer

  • MommMomm USMember ✭✭✭
    edited April 2016

    So you can set InputTransparent to false in the image, but I believe your problem is in the AbsoluteLayout, so I'd change its background color to check what's going on.

  • ChadYoderChadYoder USMember

    Definitely the AbsoluteLayout. Changed the background color as you suggested and it covers the map.

    Any idea why this would work on Android (Genymotion), but not iOS (iPhone simulator)?

    I changed the XAML and setup the Image at design time rather than run time, and still no luck.

    Grid Padding="0,20,0,0">
    esriUI:MapView x:Name="EsriMapView" />
    AbsoluteLayout x:Name="LocationButtonAbsoluteLayout">
    Image x:Name="_locationImage" AbsoluteLayout.LayoutBounds="0.025, 0.025, 48, 48"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

  • MommMomm USMember ✭✭✭
    edited April 2016

    For some reason, this forum breaks a lot of source codes and it doesn't help when trying to read some codes, but why are you using a Grid for this? Maybe you could only use an AbsoluteLayout as the parent view and 2 children inside the AbsoluteLayout (map and button, in this very same order).

    I believe that even in terms of performance it would be better since StackLayout and Grid costs a lot to process and AbsoluteLayout is the most efficient layout, IIRC.

  • ChadYoderChadYoder USMember

    Momm, thanks for your help, that solved it. I put the map and image in an AbsoluteLayout and it works like a charm. Thank you.

Sign In or Register to comment.