Touch Events in Xamarin.Forms?

I'm using a TabGestureRecognizer to make an image behave like a button. (See below) I have two versions of this image (back_button_up.png and back_button_down.png). I want to swap the images on "Touch Start" and "Touch End". How can I accomplish this in XF directly? If I was working in one of our mobile websites, I would simply use the "ontouchstart" and "ontouchend" events. What's the XF equivalent?

var img = new Image() { Source =ImageSource.FromResource("MyNameSpace.Images.back_button_up.png"); };
var tgr = new TapGestureRecognizer();
tgr.Tapped += tgr_Tapped;
img.GestureRecognizers.Add(tgr);

Posts

  • PedroLimaPedroLima US ✭✭
    edited June 2014

    Create your custom class, let's call it ImageButton, having for it a property with the image for each state (maybe add a disabled state?) and write a renderer for it, on the renderer you can listen to these events (Touch Start and Touch End) to set the image accordingly.

  • HEATHALLENHEATHALLEN USMember

    PedroLima,

    Is it safe to say the Touch events will not be exposed in Xamarin.Forms anytime soon? If so, do you have an example you would want to share detailing how to do this? I know there is an example on this site, but it doesn't cover events or exposing those events in XF.

  • HEATHALLENHEATHALLEN USMember

    Cyril,

    That is exactly what I was looking for, thank you.

  • AlexVorobievAlexVorobiev RUMember
    edited August 2015

    Cyril,

    Can yout explain VisualElementRenderer class? As I understand, I should use Xamarin-Forms-WPF package, shouldn't I? But I get error: "Could not install package 'ModernUI.WPF 1.0.6'. You are trying to install this package into a project that targets 'Xamarin.iOS,Version=v1.0', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author."

    Update: I found solution, maybe you missed, that this class should be generic, so I just used VisualElementRenderer and it was ok

  • OSDMobileOSDMobile NLUniversity ✭✭
    edited November 2015

    @CyrilChateau I tried your example of the Android Renderer to use additional touch events on Android but it does not work.

    Touch += (object sender, TouchEventArgs e) => {
        //Touch event is never called
    };
    

    Your iOS example works fine

    UPDATE:
    I found the problem. The child within my Parent Layout(view) blocks the Touch event

  • hrishikesanhrishikesan INMember ✭✭

    @OSDMobile : Can you elaborate on how you found solution in android. I am too facing same issue... Thanks in advance!

  • DooksDooks ZAMember ✭✭✭

    Here is a button moving in Android

    private int _xPad, _yPad, _xDelta, _yDelta;
    prviate bool _moved;
    
    fabPay.Touch += (v, me) => //fabPay is a button within a frameLayout
    {
        int X = (int)me.Event.RawX;
        int Y = (int)me.Event.RawY;
        switch (me.Event.Action & MotionEventActions.Mask)
        {
            case MotionEventActions.Down:
                _xPad = frameLayout.PaddingLeft;
                _yPad = frameLayout.PaddingTop;
                _xDelta = X;
                _yDelta = Y;
                _moved = false;
                break;
            case MotionEventActions.Up:
                if (!_moved)
                {
                    //Do something
                }
                break;
            case MotionEventActions.PointerDown:
                break;
            case MotionEventActions.PointerUp:
                break;
            case MotionEventActions.Move:
                var _x = X - _xDelta;
                var _y = Y - _yDelta;
                _moved = _moved || Math.Abs(_x) > 100 || Math.Abs(_y) > CalcNewWidth(100); //100px
                if (_moved)
                {
                    var padleft = _x - _xPad;
                    padleft = padleft + fabPay.Width > Resources.DisplayMetrics.WidthPixels ? Resources.DisplayMetrics.WidthPixels - fabPay.Width : padleft;
                    var padtop = _y - _yPad;
                    padtop = padtop + fabPay.Height > Resources.DisplayMetrics.HeightPixels ? Resources.DisplayMetrics.HeightPixels - fabPay.Height : padtop;
                    frameLayout.SetPadding(0, 0, padleft, padtop);
                }
                break;
        }
        frameLayout.Invalidate();
    };
    
Sign In or Register to comment.