I am not the initiator of this thread, I just thought it makes sense to add my problem here. Feel free to move this to a new thread if it suits better for your internals.
I am using a pretty complex ViewCell template (well, at least it is in the Xamarin Forms world). Here is the code I am using:
01.
<telerikDataControls:RadListView x:Name=
"NewsListView"
Grid.Row=
"1"
ItemsSource=
"{Binding NewsTabVm.NewsPosts}"
SelectionMode=
"None"
SelectionGesture=
"Tap"
>
02.
<telerikDataControls:RadListView.LayoutDefinition>
03.
<listView:ListViewLinearLayout VerticalItemSpacing=
"6"
HorizontalItemSpacing=
"6"
></listView:ListViewLinearLayout>
04.
</telerikDataControls:RadListView.LayoutDefinition>
05.
06.
<telerikDataControls:RadListView.Behaviors>
07.
<behaviors:EventToCommandBehavior EventName=
"ItemTapped"
Command=
"{Binding NewsTabVm.PostSelectedCommand}"
Converter=
"{StaticResource ItemTappedConverter}"
></behaviors:EventToCommandBehavior>
08.
</telerikDataControls:RadListView.Behaviors>
09.
10.
<telerikDataControls:RadListView.ItemTemplate>
11.
<DataTemplate>
12.
<listView:ListViewTemplateCell>
13.
<listView:ListViewTemplateCell.View>
14.
<Grid HeightRequest=
"200"
Margin=
"6"
BackgroundColor=
"Black"
>
15.
<Grid>
16.
<Grid.RowDefinitions>
17.
<RowDefinition Height=
"*"
></RowDefinition>
18.
</Grid.RowDefinitions>
19.
<Grid.ColumnDefinitions>
20.
<ColumnDefinition Width=
"*"
></ColumnDefinition>
21.
</Grid.ColumnDefinitions>
22.
<ffImgLoading:CachedImage Grid.Row=
"0"
Grid.Column=
"0"
23.
HorizontalOptions=
"FillAndExpand"
VerticalOptions=
"FillAndExpand"
24.
CacheDuration=
"5"
Source=
"{Binding Image}"
MinimumHeightRequest=
"200"
25.
Aspect=
"AspectFill"
FadeAnimationEnabled=
"True"
>
26.
</ffImgLoading:CachedImage>
27.
</Grid>
28.
29.
<Grid VerticalOptions=
"Start"
HorizontalOptions=
"EndAndExpand"
BackgroundColor=
"Lime"
IsVisible=
"{Binding IsLeitArtikel}"
WidthRequest=
"28"
HeightRequest=
"28"
>
30.
<Image Source=
"ic_star_white_24dp.png"
HorizontalOptions=
"Center"
VerticalOptions=
"Center"
></Image>
31.
</Grid>
32.
33.
<Grid VerticalOptions=
"EndAndExpand"
BackgroundColor=
"#96000000"
Margin=
"0,0,0,-2"
>
34.
<Grid.RowDefinitions>
35.
<RowDefinition Height=
"Auto"
></RowDefinition>
36.
<RowDefinition Height=
"Auto"
></RowDefinition>
37.
</Grid.RowDefinitions>
38.
<Label Grid.Row=
"0"
Text=
"{Binding Title}"
FontAttributes=
"Bold"
FontSize=
"Medium"
Margin=
"6,0"
TextColor=
"White"
></Label>
39.
40.
<Grid Grid.Row=
"1"
Margin=
"6,0"
>
41.
<Grid.ColumnDefinitions>
42.
<ColumnDefinition Width=
"*"
></ColumnDefinition>
43.
<ColumnDefinition Width=
"*"
></ColumnDefinition>
44.
</Grid.ColumnDefinitions>
45.
<StackLayout Orientation=
"Horizontal"
Grid.Row=
"0"
VerticalOptions=
"Center"
Margin=
"0,0,0,6"
>
46.
<Label Text=
"{Binding Date}"
VerticalOptions=
"Center"
></Label>
47.
<Label Text=
"{Binding AuthorName}"
VerticalOptions=
"Center"
></Label>
48.
</StackLayout>
49.
<StackLayout Orientation=
"Horizontal"
Grid.Column=
"1"
HorizontalOptions=
"EndAndExpand"
Margin=
"0,0,0,6"
>
50.
<Label Text=
"{Binding CommentCount}"
VerticalOptions=
"Center"
></Label>
51.
<Image Source=
"ic_mode_comment_white_24dp.png"
WidthRequest=
"18"
HeightRequest=
"18"
></Image>
52.
</StackLayout>
53.
</Grid>
54.
</Grid>
55.
</Grid>
56.
</listView:ListViewTemplateCell.View>
57.
</listView:ListViewTemplateCell>
58.
</DataTemplate>
59.
</telerikDataControls:RadListView.ItemTemplate>
60.
61.
62.
</telerikDataControls:RadListView>
I have used this kind of template already a thousand times on Windows (Phone 7/8.x/10) without any problems.
Adding you ImageRenderer has no recognizable imapct, but that might be due to the fact I am using the FFImageLoading library because of its advanced techniques of caching.
Once I have scrolled down the whole list, it is working a little better during scrolling. The ListView is inside a Grid with two rows, the first one is defined as Star and the second is defined as Auto. The Grid is inside a ContentPage that is part of a two page CarouselPage. Data is bound via MVVM.
I am open for any suggestions.