Grayscale image not showing inside a CoverFlowView [Xamarin Forms iOS]

Issue

I am currently working with a coverflowview by using this nuget: https://github.com/AndreiMisiukevich/CardView

Works very well with the binding when I use a regular image or cachedimage (ffimageloading nuget). However now i try to grayscale the image by using a custom control. I successfully run the code to grayscale it (when propertyischanged to IsSelectable true), but for some reason the image is not showing at all, if i remove the grayscale logic, the image shows nicely.

 <cards:CoverFlowView PositionShiftValue="40"
                                         ItemsSource="{Binding Items}"
                                         VerticalOptions="FillAndExpand"
                                         HeightRequest="360">
                    <cards:CoverFlowView.ItemTemplate>
                        <DataTemplate>
                            <AbsoluteLayout HeightRequest="360">
                                 
                               <controls:GrayScaleImage Aspect="AspectFill"
                                                        AbsoluteLayout.LayoutBounds="0.0, 0.5, 1, 1"
                                                        AbsoluteLayout.LayoutFlags="All"
                                                        Source="{Binding ProgramDeserialized.Image}"
                                                        IsSelectable="{Binding IsSelectable}"/>
                           </AbsoluteLayout>
                        </DataTemplate>
                    </cards:CoverFlowView.ItemTemplate>
                </cards:CoverFlowView>

And custom control:

public class GrayScaleImage : CachedImage
{
    public static BindableProperty IsSelectableProperty = BindableProperty.Create(nameof(IsSelectable), typeof(bool), typeof(GrayScaleImage), true, propertyChanged: UpdateImage);
    
    public bool IsSelectable
    {
        get { return (bool)GetValue(IsSelectableProperty); }
        set { SetValue(IsSelectableProperty, value); }
    }
    
    private static void UpdateImage (BindableObject bindable, object oldColor, object newColor)
    {
        
        var view = (GrayScaleImage)bindable;
        if (!view.IsSelectable)
        {
            var transformations = new System.Collections.Generic.List<ITransformation>() {
                new GrayscaleTransformation()
            };
            view.Transformations = transformations;
        }
        
    }
}

Not sure what the issue might be. When i did it on a regular stacklayout bindable list, and applied the same logic, it works, so my gutfeeling is that there is some issue with the coverflowview nuget.

Solution

How did you set binding for the Image? I created a sample to test the function code, the grayScale image works fine.

Check the screenshot:
https://us.v-cdn.net/5019960/uploads/editor/ab/jqki5zvo7cfw.gif

Here is the code about the model class and the viewModel class, you could refer to it.

public class CustomModel
{
    public Xamarin.Forms.ImageSource MyImage { get; set; }
    public bool IsSelectable { get; set; }
}

public class CustomViewModel
{
    public ObservableCollection<CustomModel> Items { get; set; }

    public CustomViewModel()
    {
        Items = new ObservableCollection<CustomModel>();
        //add the data
    }
}

Answered By - Jarvan Zhang - MSFT