Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

I want to achieve this. Please find the descripton below

Hello Everyone, This is one of the screens on which I have to stick one image on another. Like, in the picture above There is an image of the building topside/ schematic of the Building. On that image where the user clicks those pin(circle image) type images popup. So what I need is the screen coordinates of the user who clicks on that photo. If I get the Screen coordinate then on specific coordinate I will popup those Pin Images. That is my Question. I am waiting for your working responses guys.

Best Answer

  • jezhjezh Member, Xamarin Team Xamurai
    Accepted Answer

    You can install TouchTracking.Forms nuget packages add Effect for the SKCanvasView.

    <AbsoluteLayout x:Name="myabs">
    
                <views:SKCanvasView
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="SizeProportional"
    
                    x:Name="canvasView" >
                    <views:SKCanvasView.Effects>
                        <tt:TouchEffect Capture="True"  TouchAction="TouchEffect_TouchAction" />
                    </views:SKCanvasView.Effects>
                </views:SKCanvasView>
    
        </AbsoluteLayout>
    

    Here is layout backgroud code

      private void TouchEffect_TouchAction(object sender, TouchTracking.TouchActionEventArgs args)
            {
    
                var x = args.Location.X;
                var y = args.Location.Y;
                var v = new View1();
                AbsoluteLayout.SetLayoutBounds(v, new Rectangle(x, y, 0.25, 0.25));
                AbsoluteLayout.SetLayoutFlags(v, AbsoluteLayoutFlags.SizeProportional);
    
                myabs.Children.Add(v);
            }![](https://us.v-cdn.net/5019960/uploads/editor/ad/5lbx3mxv58ri.gif "")
    
    

    when we click the screen, we get the X/Y point, then Add our custom control.

    I make an custom control.

    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="SkiaSharpDemo.View1">
      <ContentView.Content>
          <StackLayout>
                <ImageButton WidthRequest="50" HeightRequest="50" BackgroundColor="Transparent" Source="hamburger.png" Clicked="ImageButton_Clicked" ></ImageButton>
                <Frame IsVisible="false" x:Name="myframe"  WidthRequest="100" HeightRequest="70">
                    <StackLayout>
                        <Label FontSize="Small" Text="Edit"/>
                        <Label FontSize="Small" Text="Duplicate"/>
                        <Label FontSize="Small" Text="Remove"/>
                    </StackLayout>
                </Frame>
          </StackLayout>
      </ContentView.Content>
    </ContentView>
    //background code
     public partial class View1 : ContentView
        {
            public View1()
            {
                InitializeComponent();
            }
            private void ImageButton_Clicked(object sender, EventArgs e)
            {
                myframe.IsVisible = !myframe.IsVisible;
            }
        }
    

    The result is:


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    Accepted Answer

    You can install TouchTracking.Forms nuget packages add Effect for the SKCanvasView.

    <AbsoluteLayout x:Name="myabs">
    
                <views:SKCanvasView
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="SizeProportional"
    
                    x:Name="canvasView" >
                    <views:SKCanvasView.Effects>
                        <tt:TouchEffect Capture="True"  TouchAction="TouchEffect_TouchAction" />
                    </views:SKCanvasView.Effects>
                </views:SKCanvasView>
    
        </AbsoluteLayout>
    

    Here is layout backgroud code

      private void TouchEffect_TouchAction(object sender, TouchTracking.TouchActionEventArgs args)
            {
    
                var x = args.Location.X;
                var y = args.Location.Y;
                var v = new View1();
                AbsoluteLayout.SetLayoutBounds(v, new Rectangle(x, y, 0.25, 0.25));
                AbsoluteLayout.SetLayoutFlags(v, AbsoluteLayoutFlags.SizeProportional);
    
                myabs.Children.Add(v);
            }![](https://us.v-cdn.net/5019960/uploads/editor/ad/5lbx3mxv58ri.gif "")
    
    

    when we click the screen, we get the X/Y point, then Add our custom control.

    I make an custom control.

    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="SkiaSharpDemo.View1">
      <ContentView.Content>
          <StackLayout>
                <ImageButton WidthRequest="50" HeightRequest="50" BackgroundColor="Transparent" Source="hamburger.png" Clicked="ImageButton_Clicked" ></ImageButton>
                <Frame IsVisible="false" x:Name="myframe"  WidthRequest="100" HeightRequest="70">
                    <StackLayout>
                        <Label FontSize="Small" Text="Edit"/>
                        <Label FontSize="Small" Text="Duplicate"/>
                        <Label FontSize="Small" Text="Remove"/>
                    </StackLayout>
                </Frame>
          </StackLayout>
      </ContentView.Content>
    </ContentView>
    //background code
     public partial class View1 : ContentView
        {
            public View1()
            {
                InitializeComponent();
            }
            private void ImageButton_Clicked(object sender, EventArgs e)
            {
                myframe.IsVisible = !myframe.IsVisible;
            }
        }
    

    The result is:


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • adboy9696adboy9696 Member ✭✭

    @Jegh There is one thing I need to ask you is when we click on this screen, then the Image will appear some distance away from the click. Is there anything we can do to make them appear on the exact click position?

Sign In or Register to comment.