locked
Forms: Place an image at a specific coordinate RRS feed

  • Question

  • User295088 posted

    Hi, I've been trying to overlay an image on another image, but at a specific point. Please check my screenshots. I've tried absolute layout, relative layout and a combination of both. I also took an extra step and created a native android page(called from forms) but none of them seem to be helping me. I feel the main problem I have is finding the x,y coordinates of where the image starts to be drawn(top left corner below the blue). Here's the latest code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            x:Class="DirList.MapPage"
            Title = "Details"
            NavigationPage.BackButtonTitle = "">
        <ContentPage.Content>
            <AbsoluteLayout>
                <RelativeLayout BackgroundColor="Red">
                    <Image x:Name="floorImage" Source="sample3.jpg" BackgroundColor="Blue" Aspect="AspectFit"
                            RelativeLayout.YConstraint="{ConstraintExpression
                        Type=RelativeToParent,Property=Y,Factor=1,Constant=0}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                        Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression
                        Type=RelativeToParent,Property=Height,Factor=1,Constant=0}" >
                    </Image>
    
                    <Image x:Name="userImage" Source="pointer.png" HeightRequest="30" WidthRequest="30"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                        ElementName=floorImage,Property=Y,Factor=1,Constant=105}"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                        ElementName=floorImage,Property=X,Factor=1,Constant=250}" >
                    </Image>
                </RelativeLayout>
            </AbsoluteLayout>
        </ContentPage.Content>
    </ContentPage>
    

    I need help with the following: 1. Being able to place my image at a particular point on the background image. 2. Being able to change the image coordinates using code. 3. Pan and zoom the images as if they were one image.

    I can share the code I wrote in Xamarin.Android too if you want. Thank you in advance.

    Wednesday, April 26, 2017 2:14 PM

All replies

  • User383553 posted

    Were you able to find a solution for this?

    Monday, March 18, 2019 3:56 AM
  • User389497 posted

    Is any solution available for this?

    Thursday, October 3, 2019 7:16 AM