Ffimageloading: Example of XAML Usage in ListView with ListViewCachingStrategy.RecycleElement enabled using normal ViewCell

[Korayem]

I tried following instructions on this page and that page too but both show code-behind implementation (non XAML). In case of XAML, if I have the following list view with normal view cell, what should I do to set OnBindingContextChanged of ViewCell to be compatible with Recycle Caching Strategy?

    <ListView x:Name="listView" CachingStrategy="RecycleElement">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout Orientation="Horizontal">
                                                              <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"  WidthRequest="300" HeightRequest="300" DownsampleToViewSize="true" />
                                    <Label Text="{Binding Name}"/>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Thanks

[molinch]

@Korayem All I say here will have to be rechecked by @daniel-luberda. I'm not using XF personally but native Xamarin.iOS/Android.

So:
Unfortunately with XF Recycle strategy, OnElementChanged events are not raised when cells are recycled. This impacts libraries like FFImageLoading which cannot know when to trigger requests.
XF documentation: https://developer.xamarin.com/api/type/Xamarin.Forms.ListViewCachingStrategy/

Hence the wiki page that states:

don't rely on bindings for setting the Source property - please use ViewCell's OnBindingContextChanged

So if you inherit from the XF ViewCell like in wiki and use it in your XAML. Everything should behave as expected.

[Korayem]

Thanks @molinch for the detailed explanation

My issue with using custom view cell is that my viewcell is implemented in XAML and has other elements like labels, stacklayout etc.. along with FFImage. From the custom cell implementation you linked to, it assumes the viewcell only contains FFImage which is not in my case.

[Korayem]

@fabianMolinet It's described with no mention of XAML and using Custom View

On Sat, May 14, 2016 at 11:13 AM, Fabien Molinet [email protected]
wrote:

@Korayem https://github.com/Korayem This is described in the wiki:
https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/luberda-molinet/FFImageLoading/issues/200#issuecomment-219209730

[molinch]

@daniel-luberda Could you answer? I have not enough knowledge of XF.

[daniel-luberda]

@Korayem You should create separate XAML view for a cell (separate file: Add File -> Forms ContentView XAML), then use it in your page:

C# <ListView x:Name="listView" CachingStrategy="RecycleElement"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <local:YourCustomView/> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

Then override OnBindingContextChanged method in YourCustomView.xaml.cs file.

[molinch]

@daniel-luberda Maybe wiki could be improved regarding Recycle strategy? So we have the XAML example too

[daniel-luberda]

@molinch Yes, definitely. There're much more things to update in Wiki for Forms. I'll try to do that when I'll have some time.

[michaeldimoudis]

Don't want to open up another issue, as my question is related to this. So I have a ViewCell in XAML, in the xaml.cs code behind I did put OnBindingContextChanged. I named the CachedImage and I tried to set the source in the code behind, but the source was never set. Only way I could get it to work is in XAML Source={Binding MyImage} etc.

Any tips on this?

[db-007]

How would you use FFImageLoading with a ListView.ImageCell?