Hello Marco,
I wanted to follow-up quickly with an example using Tsvyatko's recommended approach, but using FFImageLoading in the template. Find it attached (you didn't specify which platform so I included all but tested extensively on Android).
Ultimately, after applying the custom TemplateCell, I was unable to determine a specific link between the RadListView and FFImage's CachedImage component leading to the performance problem as the images loaded pretty quick despite being high res (demo used Bing Images's 1080 images).
I did some further optimization and got significant improvement in load times by doing these:
- Set the DownsampleWidth to match what the container's width is (significant boost from this)
- Try using a different CacheType (it has both Disk and Memory), I chose Memory for the purposes of the demo. If your app will be showing the same images on multiple app launches, Disk or All is better
Here's a page from the FFImage.CacheImage docs, it has some great examples you could apply (in the custom TemplateCell or in the XAML).
Once the image is downloaded and cached by the control, it loads quickly when scrolling through the item containers. For quick reference, here is the XAML and CustomTemplateCell code.
XAML
C#
Please let us know if this doesn't resolve the issue and we'll investigate further. If possible, update the demo project to replicate the problem you're seeing.
Thank you for contacting Support and for choosing Telerik!
Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress
I wanted to follow-up quickly with an example using Tsvyatko's recommended approach, but using FFImageLoading in the template. Find it attached (you didn't specify which platform so I included all but tested extensively on Android).
Ultimately, after applying the custom TemplateCell, I was unable to determine a specific link between the RadListView and FFImage's CachedImage component leading to the performance problem as the images loaded pretty quick despite being high res (demo used Bing Images's 1080 images).
I did some further optimization and got significant improvement in load times by doing these:
- Set the DownsampleWidth to match what the container's width is (significant boost from this)
- Try using a different CacheType (it has both Disk and Memory), I chose Memory for the purposes of the demo. If your app will be showing the same images on multiple app launches, Disk or All is better
Here's a page from the FFImage.CacheImage docs, it has some great examples you could apply (in the custom TemplateCell or in the XAML).
Once the image is downloaded and cached by the control, it loads quickly when scrolling through the item containers. For quick reference, here is the XAML and CustomTemplateCell code.
XAML
<telerikDataControls:RadListView ItemsSource="{Binding BingImages}" > <telerikDataControls:RadListView.ItemTemplate> <DataTemplate> <layouts:FastTemplateCell> <layouts:FastTemplateCell.View> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <forms:CachedImage x:Name="image" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CacheDuration="5" CacheType="All" DownsampleWidth="300" HeightRequest="200" Aspect="AspectFill" FadeAnimationEnabled="True"/> <Grid Grid.Row="1" BackgroundColor="White"> <StackLayout Padding="16"> <Label x:Name="title" TextColor="#362F2D" FontAttributes="Italic" FontSize="16" LineBreakMode="TailTruncation"/> <Label x:Name="author" TextColor="#534741" FontSize="12" LineBreakMode="TailTruncation" /> </StackLayout> </Grid> </Grid> </layouts:FastTemplateCell.View> </layouts:FastTemplateCell> </DataTemplate> </telerikDataControls:RadListView.ItemTemplate> </telerikDataControls:RadListView>C#
public class FastTemplateCell : ListViewTemplateCell { private FFImageLoading.Forms.CachedImage image; private Label titleLabel; private Label authorLabel; protected override void OnBindingContextChanged() { base.OnBindingContextChanged(); this.EnsureCachedElements(); var data = this.BindingContext as BingImage; if (data != null) { this.image.Source = $"http://www.bing.com{data?.url}"; this.authorLabel.Text = data?.copyright; this.titleLabel.Text = data?.startdate; } } private void EnsureCachedElements() { if (this.image == null) { this.image = this.View.FindByName<CachedImage>("image"); } if (titleLabel == null) { this.titleLabel = this.View.FindByName<Label>("title"); } if (authorLabel == null) { this.authorLabel = this.View.FindByName<Label>("author"); } } }Please let us know if this doesn't resolve the issue and we'll investigate further. If possible, update the demo project to replicate the problem you're seeing.
Thank you for contacting Support and for choosing Telerik!
Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items