reuseable xamarin control giving "unable to cast object of type 'Xamarin.forms.xaml.elementnode'..."

Question

I am a noob'ish type coder and this is my first attempt at a reuseable control in Xamarin.Forms (and really one of my relatively first ones in all my programming). In research, I have found that it says I am assigning a value to an event...I am pretty certain which part of the code it means...but what I can't figure out is what to do to make it correct. I am trying to make an ImageCircle with a label under it that is a reuseable control.

My Xaml:

       <?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
         x:Class="MyApp.View.Templates.CircleImageButton"
         x:Name="this">
 <ContentView.Content>
    <StackLayout Margin="{StaticResource Margin}" Padding="{StaticResource Padding}" Spacing="0" Grid.Row="{Binding Source={x:Reference this}, Path=GridRow}" Grid.Column="{Binding Source={x:Reference this}, Path=GridColumn}">
        <controls:CircleImage Source="{Binding Source={x:Reference this}, Path=Image}" FillColor="Green" Aspect="AspectFill" Margin="{StaticResource Margin}" >

            <!--error is believed to be caused here-->
<controls:CircleImage.GestureRecognizers>
                <TapGestureRecognizer Tapped="{Binding Source={x:Reference this}, Path=TapGestureCommand}" />
            </controls:CircleImage.GestureRecognizers>

            <controls:CircleImage.WidthRequest>
                <OnPlatform x:TypeArguments="x:Double">
                    <On Platform="Android, iOS">40</On>
                    <On Platform="WinPhone">75</On>
                </OnPlatform>
            </controls:CircleImage.WidthRequest>
            <controls:CircleImage.HeightRequest>
                <OnPlatform x:TypeArguments="x:Double">
                    <On Platform="Android, iOS">40</On>
                    <On Platform="WinPhone">75</On>
                </OnPlatform>
            </controls:CircleImage.HeightRequest>
        </controls:CircleImage>
        <Label Text="{Binding Source={x:Reference this}, Path=LabelCaption}"/>
    </StackLayout>
  </ContentView.Content>
</ContentView>

My code behind:

    using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MyApp.View.Templates
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CircleImageButton : ContentView
{
    public static readonly BindableProperty ImageProperty = BindableProperty.Create("Image", typeof(string), typeof(CircleImageButton), string.Empty);
    public static readonly BindableProperty GridRowProperty = BindableProperty.Create("GridRow", typeof(int), typeof(CircleImageButton), default(int));
    public static readonly BindableProperty GridColumnProperty = BindableProperty.Create("GridColumn", typeof(int), typeof(CircleImageButton), default(int));
    public static readonly BindableProperty LabelCaptionProperty = BindableProperty.Create("LabelCaption", typeof(string), typeof(CircleImageButton), string.Empty);
    public static readonly BindableProperty TapGestureCommandProperty = BindableProperty.Create("TapGestureCommand", typeof(string), typeof(CircleImageButton), string.Empty);

    public string Image
    {
        get { return (string)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public int GridRow
    {
        get { return (int)GetValue(GridRowProperty); }
        set { SetValue(GridRowProperty, value); }
    }
    public int GridColumn
    {
        get { return (int)GetValue(GridColumnProperty); }
        set { SetValue(GridColumnProperty, value); }
    }
    public string LabelCaption
    {
        get { return (string)GetValue(LabelCaptionProperty); }
        set { SetValue(LabelCaptionProperty, value); }
    }
    public string TapGestureCommand
    {
        get { return (string)GetValue(TapGestureCommandProperty); }
        set { SetValue(TapGestureCommandProperty, value); }
    }

    public CircleImageButton ()
    {
        InitializeComponent ();
    }
}
}

I appreciate your help, and if you see a better way to do this PLEASE let me know. I am here to learn.

Answer 1

<controls:CircleImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding Source={x:Reference this}, Path=TapGestureCommand}" />
            </controls:CircleImage.GestureRecognizers>

Use Command for binding instead of Tapped events in XAML.