Maui Using Binding in a custom Control inside a CollectionView

Question

I've created a Custom Switch control in a ContentView , I'm trying to Bind the toggled State of this Custom switch , so that it changes according to the binded Value, but I'm getting an error when using the Binding.

This is my ContentView Control page.

public partial class CustomSwitchView : ContentView, INotifyPropertyChanged
{

    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(
        nameof(IsToggledValue),
        typeof(bool),
        typeof(CustomSwitchView),
        false,
        propertyChanged: IsToggledPropertyChangeEvent
    );

    public bool IsToggledValue
    {
        get => (bool)GetValue(IsToggledProperty);
        set => SetValue(IsToggledProperty, value);
    }

    private void SetSwitchState()
    {
        if (IsToggledValue)
        {
            Switch_Circle.SetValue(Grid.ColumnProperty, 1);
            Switch_Body.BackgroundColor = Color.FromRgb(122, 146, 105);
        }
        else
        {
            Switch_Circle.SetValue(Grid.ColumnProperty, 0);
            Switch_Body.BackgroundColor = Color.FromRgb(255, 255, 255);
        }
    }

    private static void IsToggledPropertyChangeEvent(BindableObject bindable, object oldValue, object newValue)
    {
        CustomSwitchView switchView = bindable as CustomSwitchView;
        switchView.IsToggledValue = (bool)newValue;
    }
    private void this_Loaded(object sender, EventArgs e)
    {
        SetSwitchState();
    }

    [RelayCommand]
    async Task Tap()
    {
        if (IsToggledValue)
        {

            Switch_Circle.SetValue(Grid.ColumnProperty, 0);
            Switch_Body.BackgroundColor = Color.FromRgb(255, 255, 255);
            IsToggledValue = false;
        }
        else
        {
            Switch_Circle.SetValue(Grid.ColumnProperty, 1);
            Switch_Body.BackgroundColor = Color.FromRgb(122, 146, 105);
            IsToggledValue = true;
        }
    }


   public CustomSwitchView()
    {
        InitializeComponent();
    }

}

I'm new to creating custom controls , so I'm not sure if everything is done correctly.

This is how I'm trying to bind the Toggled State of the Control Inside a CollectionView

<DataTemplate>
  <StackLayout>

          <!--ALLERGENIC LAYOUT-->
             <Grid Margin="0,0,0,0">
                <Grid.ColumnDefinitions>
                   <ColumnDefinition/>
                   <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                    <Label Style="{StaticResource PrimaryEntryLabelStyle}" 
                          VerticalOptions="Center" FontSize="16" 
                          TextTransform="Uppercase"
                          TextColor="{StaticResource SecondaryTextColor}" 
                          Text="{Binding Name}"/>

                     views:CustomSwitchView x:Name="SwitchView_Allergenics" Margin="0,0,20,0" Grid.Column="1" HorizontalOptions="End"
                             IsToggledValue="{Binding IsSelected}"/>
                  </Grid>

        </StackLayout>
</DataTemplate>

For some reason the IsToggledValue= {Binding IsSelected} gives me the error :

Severity Code Description Project File Line Suppression State

Error XFC0009 No property, BindableProperty, or event found for "IsToggledValue", or mismatching type between value and property.

I'm not sure how I can bind this specific property so it gets updated, or If im using the wrong approach to this problem, Any help is appreciated, thanks in advance!

When I use this Custom Switch outside of a collection I can treat it independently and have no problem , the problem comes when using it in a CollectionView and using a Binding to the property.

Answer 1

from the docs

The naming convention for bindable properties is that the bindable property identifier must match the property name specified in the Create method, with "Property" appended to it.

public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(
    nameof(IsToggled),
    typeof(bool),
    typeof(CustomSwitchView),
    false,
    propertyChanged: IsToggledPropertyChangeEvent
);

public bool IsToggled
{
    get => (bool)GetValue(IsToggledProperty);
    set => SetValue(IsToggledProperty, value);
}