Xamarin Form : Custom Relative Touch event in renderer stops Command in XAML

Question

I have created layout like,

-ContentPage

--TouchableRelativeLayout(Override Touch Event in renderer as shown in below code snippet)(Command is bind in XAML file which is not working)

----StackLayout

------CustomImageRenderer

------LabelRenderer

PCL : XAML where the Command is set to be called(Which is not working if Touch event is overridden in renderer :

<ContentView.Content>
    <touchableView:TouchableRelativeLayout x:Name="userDetailsContent" >

        <touchableView:TouchableRelativeLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding KeypadEnterCommand}" CommandParameter="{Binding PeopleModelData}" />
        </touchableView:TouchableRelativeLayout.GestureRecognizers>
        <StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" 
            >
            <render-circleimage:CircleImage Source="{Binding PeopleModelData.ProfileURL}" VerticalOptions="Center" HeightRequest="70" WidthRequest="70"
                >
            </render-circleimage:CircleImage>
            <Label x:Name="TitleText" FontFamily="{StaticResource BoldFont}" Text="{Binding PeopleModelData.Name}" HorizontalTextAlignment="Center" TextColor="Black"

                >
            </Label>
        </StackLayout>
    </touchableView:TouchableRelativeLayout>
</ContentView.Content>

Xamarin.Android : CustomRenderer

public class TouchableRelativeLayoutRenderer : ViewRenderer
{
    public TouchableRelativeLayoutRenderer()
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
    {
        base.OnElementChanged(e);
        var touchableRelativeLayout = e.NewElement as TouchableRelativeLayout;

        var thisView = this;
        thisView.Touch += (object sender, TouchEventArgs args) =>
        {
            if (args.Event.Action == MotionEventActions.Down)
            {
                touchableRelativeLayout.OnPressed();
            }

            else if (args.Event.Action == MotionEventActions.Up || args.Event.Action == MotionEventActions.Move)
            {
                touchableRelativeLayout.OnReleased();
            }
        };
    }
}

PCL : TouchableRelativeLayout abstract class (This two EventHandler works)

public class TouchableRelativeLayout : RelativeLayout
{
    public event EventHandler Pressed;
    public event EventHandler Released;


    public virtual void OnPressed()
    {
        Pressed?.Invoke(this, EventArgs.Empty);
        BackgroundColor = Color.Blue;
    }

    public virtual void OnReleased()
    {
        Released?.Invoke(this, EventArgs.Empty);
        BackgroundColor = Color.Transparent;
    }
}

Problem : If renderer touch event code is not commented, below mentioned code snippet from XAML is not working :

<touchableView:TouchableRelativeLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding KeypadEnterCommand}" CommandParameter="{Binding PeopleModelData}" />
        </touchableView:TouchableRelativeLayout.GestureRecognizers>

So how to handle both TouchEvent and Command to work together for the same UI.

Answer 1

Found the solution with below mentioned changes :

Change in PCL : TouchableRelativeLayout abstract class

public class TouchableRelativeLayout : RelativeLayout
{
    public event EventHandler Pressed;
    public event EventHandler Released;

    public virtual void OnPressed()
    {
        Pressed?.Invoke(this, EventArgs.Empty);
        BackgroundColor = Color.Blue;
    }

    public virtual void OnReleased()
    {
        Released?.Invoke(this, EventArgs.Empty);
        BackgroundColor = Color.Transparent;

        if (Command != null)
            Command.Execute(CommandParameter);

    }

    public static readonly BindableProperty CommandProperty = BindableProperty.Create("Command", typeof(ICommand), typeof(TouchableRelativeLayout), (object)null, BindingMode.OneWay, (BindableProperty.ValidateValueDelegate)null, (BindableProperty.BindingPropertyChangedDelegate)null, (BindableProperty.BindingPropertyChangingDelegate)null, (BindableProperty.CoerceValueDelegate)null, (BindableProperty.CreateDefaultValueDelegate)null);

    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create("CommandParameter", typeof(object), typeof(TouchableRelativeLayout), (object)null, BindingMode.TwoWay, (BindableProperty.ValidateValueDelegate)null, (BindableProperty.BindingPropertyChangedDelegate)null, (BindableProperty.BindingPropertyChangingDelegate)null, (BindableProperty.CoerceValueDelegate)null, (BindableProperty.CreateDefaultValueDelegate)null);

    public ICommand Command
    {
        get { return (ICommand)this.GetValue(CommandProperty); }
        set { this.SetValue(CommandProperty, (object)value); }
    }

    public object CommandParameter
    {
        get { return this.GetValue(CommandParameterProperty); }
        set { this.SetValue(CommandParameterProperty, value); }
    }



}

And change in XAML : Command is bind as property of element rather using GestureRecognizer

<ContentView.Content>
    <touchableView:TouchableRelativeLayout x:Name="userDetailsContent" Command="{Binding KeypadEnterCommand}" CommandParameter="{Binding PeopleModelData}" >


        <StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" 
            >
            <render-circleimage:CircleImage Source="{Binding PeopleModelData.ProfileURL}" VerticalOptions="Center" HeightRequest="70" WidthRequest="70"
                >
            </render-circleimage:CircleImage>
            <Label x:Name="TitleText" FontFamily="{StaticResource BoldFont}" Text="{Binding PeopleModelData.Name}" HorizontalTextAlignment="Center" TextColor="Black"

                >
            </Label>
        </StackLayout>
    </touchableView:TouchableRelativeLayout>
</ContentView.Content>

Now this works with Touch and Command functionality both.