Xamarin Bindable Property The property 'FadePropertyOf' was not found in type 'FadableImageControl'

Question

I'm working with Bindable Properties I'm getting this error from my xaml file

The property 'FadePropertyOf' was not found in type 'FadableImageControl'.

it looks like a cast problem, but I haven't figure out a way to make my object to read this property ImageFadeProperty , ImageSourceOf works fine. Do any one have an idea of what I'm missing?

     public partial class FadableImageControl : ContentView
{
    public static readonly BindableProperty ImageSourceProperty =
    BindableProperty.Create("ImageSourceOf",
        typeof(ImageSource), typeof(FadableImageControl));

    public ImageSource ImageSourceOf
    {
        get { return GetValue(ImageSourceProperty) as ImageSource; }
        set { SetValue(ImageSourceProperty, value); }
    }

    public bool FadePropertyOf
    {
        get => (bool)GetValue(FadePropertyOfProperty);
        set => SetValue(FadePropertyOfProperty, value);
    }

    public static readonly BindableProperty FadePropertyOfProperty =
       BindableProperty.Create(
           "FadePropertyOf",
           typeof(bool),
           typeof(FadableImageControl),
           defaultValue: false,
           defaultBindingMode: BindingMode.TwoWay,
           propertyChanged: async(BindableObject bindable, object oldValue, object newValue)=>
           {
                var myControl = bindable as FadableImageControl;
                var o = oldValue;
                var n = newValue;
                var opacityControl = myControl.fadableImage;

           if (opacityControl.Opacity == 0)
           {
               await opacityControl.FadeTo(1, 100);
           }
           else
           {
               await opacityControl.FadeTo(0, 100);
           }

    });

   


    public FadableImageControl()
    {
        InitializeComponent();
    }
}

Also added this in XAML:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
x:Class="animations.Views.MyPageInitComp"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:bindables="clr-namespace:animations.Views.Bindables">
    <ContentPage.Content>
    <StackLayout Padding="20" BackgroundColor="Pink">
       
        <StackLayout Padding="20" BackgroundColor="DeepPink">
            <bindables:FadableImageControl FadePropertyOfProperty="" ImageSourceOf="ino.png" Opacity="0" />

        </StackLayout>

    </StackLayout>
</ContentPage.Content>

Answer 1

This code works for me (I'm assuming the FadableImageControl is a ContentView):

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="App3.Controls.FadableImageControl"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="thisControl">
    <ContentView.Content>
        <StackLayout BindingContext="{x:Reference thisControl}">
            <Image Source="{Binding ImageSourceOf}" />
            <Label Text="{Binding FadePropertyOf, StringFormat='FadePropertyOf: {0}'}" />
        </StackLayout>
    </ContentView.Content>
</ContentView>

using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace App3.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FadableImageControl : ContentView
    {
        public static readonly BindableProperty ImageSourceOfProperty =
        BindableProperty.Create(
            nameof(ImageSourceOf),
            typeof(ImageSource),
            typeof(FadableImageControl));

        public ImageSource ImageSourceOf
        {
            get => GetValue(ImageSourceOfProperty) as ImageSource;
            set => SetValue(ImageSourceOfProperty, value);
        }

        public static readonly BindableProperty FadePropertyOfProperty =
            BindableProperty.Create(
                nameof(FadePropertyOf),
                typeof(bool),
                typeof(FadableImageControl),
                defaultValue: false,
                defaultBindingMode: BindingMode.TwoWay,
                propertyChanged: async (BindableObject bindable, object oldValue, object newValue) =>
                {
                    var myControl = bindable as FadableImageControl;
                    var o = oldValue;
                    var n = newValue;

                    //pretend to fade image here
                    await Task.Delay(1);
                }
            );

        public bool FadePropertyOf
        {
            get => (bool)GetValue(FadePropertyOfProperty);
            set => SetValue(FadePropertyOfProperty, value);
        }

        public FadableImageControl()
        {
            InitializeComponent();
        }
    }
}