Get x,y co-ordinates in tap gesture inside ListView

teeboy75teeboy75 USUniversity

How do we get the y coordinate based on where the “tap gesture” inside a listview? I have an image with “tap Gesture” event in one of the columns in a listview. The X value in “click” event on “sender” object inside the clicked event is correctly populated. But the “Y” is always “0”. Most likely because the list view scrolls and “Y’ position always changes. Any workarounds for this?
Thx much..

Answers

  • PrakashPattisapuPrakashPattisapu USMember
    edited January 2017

    Xamarin team was able to help me with this..
    Just create a renderer for the image inside a listview like so:
    iOS renderer:
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

            tapGesture = new UITapGestureRecognizer((obj) =>
            {
                var image = this.Element as TappableImage;
                var touchPoint = obj.LocationInView(null);
                image.OnTapped(touchPoint.ToPoint());
            })
            { NumberOfTapsRequired = 1 };
    
            if (e.NewElement == null)
            {
                if (tapGesture != null)
                {
                    this.RemoveGestureRecognizer(tapGesture);
                }
            }
    
            if (e.OldElement == null)
            {
                this.AddGestureRecognizer(tapGesture);
            }
        }
    

    Android renderer:
    public class DroidTappableImage : ImageRenderer
    {
    private readonly TappableImageListener _listener;
    private readonly GestureDetector _detector;

        public DroidTappableImage()
        {
            _listener = new TappableImageListener();
            _detector = new GestureDetector(_listener);
        }
    
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);
    
            if (e.NewElement == null)
            {
                this.GenericMotion -= HandleGenericMotion;
                this.Touch -= HandleTouch;
                _listener.SingleTap -= SingleTapEventHandler;
            }
    
            if (e.OldElement == null)
            {
                this.GenericMotion += HandleGenericMotion;
                this.Touch += HandleTouch;
                _listener.SingleTap += SingleTapEventHandler;
            }
        }
    
        void SingleTapEventHandler(object sender, Droid.TappableImageListener.SingleTapEventArgs e)
        {
            var locArr = new int[2];
            Control.GetLocationOnScreen(locArr);
    
            var image = this.Element as TappableImage;
            image.OnTapped(new Point(locArr[0], locArr[1]));
        }
    
        void HandleTouch(object sender, TouchEventArgs e)
        {
            _detector.OnTouchEvent(e.Event);
        }
    
        void HandleGenericMotion(object sender, GenericMotionEventArgs e)
        {
            _detector.OnTouchEvent(e.Event);
        }
    

    public class TappableImageListener : GestureDetector.SimpleOnGestureListener
    {
    public event EventHandler SingleTap;

        public override bool OnSingleTapUp(MotionEvent e)
        {
            SingleTap?.Invoke(this, new SingleTapEventArgs { MotionEvent = e });
            return base.OnSingleTapUp(e);
        }
    
        public class SingleTapEventArgs : EventArgs
        {
            public MotionEvent MotionEvent { get; set; }
        }
    }
    

    TappableImage.cs

    public class TappableImage : Image
    {
    public event EventHandler Tapped;

        public void OnTapped(Point point)
        {
            Tapped?.Invoke(this, new ImageTappedEventArgs { Point = point });
        }
    }
    
    public class ImageTappedEventArgs : EventArgs
    {
        public Point Point { get; set; }
    }
    

    -_--------------------------------------
    XAML


    <ListView.ItemTemplate>



    <Grid.ColumnDefinitions>


    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>

    </Grid.RowDefinitions>

  • AnoopKAnoopK USUniversity ✭✭

    This is a very useful post. thanks. The Xaml part seems to be not correct. Can you correct it and post again please.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @AnoopRamachandran.3752 said:
    The Xaml part seems to be not correct. Can you correct it and post again please.

    Here's an article on how to post code and markup without having the forum parse mangle it like that.
    https://redpillxamarin.com/2016/12/13/faq-frequently-asked-questions/

Sign In or Register to comment.