Listview doesn't scroll smoothly

GoranHalvarssonGoranHalvarsson SEMember
edited April 2016 in Xamarin.Forms

Hello guys

I really need some help here. I have done a listview with a viewcell. The viewcell presents a grid containing two "list items".
image

The issue is that the listview does not scroll smoothly. :-(

The images are stored as byte arrays in sqlite db, in order to present the images I use a converter.
I've also tried to download and save the images on the file system. I even tried to just have a url, using ImageSource.FromUri - but still the same issue.

The only way that worked well was when I had the images as an embedded resource, but that is not acceptable since I want to be able to present(and store) images dynamically.

Any ideas how to make the listview scroll smoothly?

Here is the xaml I'm using:

<ListView x:Name="MediaItemsListView" 
                BackgroundColor="{DynamicResource HabitatBackgroundColor}" 
                ItemsSource="{Binding ListItems}" 
                SeparatorVisibility="None" 
                HorizontalOptions="FillAndExpand" 
                Header = "{Binding}" 
                RowHeight="200" >
                <ListView.HeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="200" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" Padding="10,0,10,0">
                                <Image Aspect="AspectFill" Source="{Binding ContentMedia, Converter={StaticResource imageConverter}}" />
                                <StackLayout Padding="10,10,10,10">
                                    <StackLayout Opacity="0.7" BackgroundColor="{DynamicResource HabitatBackgroundColor}" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" Orientation="Vertical">
                                        <Label x:Name="headerLabel" VerticalOptions="EndAndExpand" Text="{Binding ContentHeader}" Style="{DynamicResource HabitatWhiteHeaderStyle}" />
                                    </StackLayout>
                                </StackLayout>
                            </Grid>
                            <StackLayout Padding="10,0,10,10" Grid.Row="1" HorizontalOptions="Start" VerticalOptions="EndAndExpand" Orientation="Horizontal">
                                <Label x:Name="subtitleLabel" VerticalOptions="StartAndExpand" Style="{DynamicResource ArticleLightTextStyle}" HorizontalOptions="StartAndExpand" Text="{Binding ContentSummary, Converter={StaticResource htmlConverter}}" />
                            </StackLayout>
                        </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>


            <ListView.ItemTemplate>
                <DataTemplate>


                    <ViewCell>

                        <Grid Padding="10,0,10,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="200" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Row="0" Grid.Column="0" Padding="0,0,0,5">
                                <Image Opacity="0.5" Aspect="AspectFill"  Source="{Binding Item1.Media, Converter={StaticResource imageConverter}}">
                                    <Image.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference rootPage}, Path=BindingContext.LinkSelectedCommand}" CommandParameter="{Binding Item1.NavigationItem}" />
                                    </Image.GestureRecognizers>
                                </Image>
                                <StackLayout Padding="10"  HorizontalOptions="Fill" VerticalOptions="Fill" Orientation="Vertical">
                                    <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference rootPage}, Path=BindingContext.LinkSelectedCommand}" CommandParameter="{Binding Item1.NavigationItem}" />
                                    </StackLayout.GestureRecognizers>
                                    <Label VerticalOptions="EndAndExpand" Text="{Binding Item1.Header}" Style="{DynamicResource ArticleLightTextStyle}" />
                                </StackLayout>

                            </Grid>
                            <Grid Grid.Row="0" Grid.Column="1" Padding="0,0,0,5">
                                <Image  Opacity="0.5" Aspect="AspectFill" Source="{Binding Item2.Media, Converter={StaticResource imageConverter}}" >
                                    <Image.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference rootPage}, Path=BindingContext.LinkSelectedCommand}" CommandParameter="{Binding Item2.NavigationItem}" />
                                    </Image.GestureRecognizers>
                                </Image>
                                <StackLayout Padding="10"  HorizontalOptions="Fill" VerticalOptions="Fill" Orientation="Vertical">
                                    <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference rootPage}, Path=BindingContext.LinkSelectedCommand}" CommandParameter="{Binding Item2.NavigationItem}" />
                                    </StackLayout.GestureRecognizers>
                                    <Label  VerticalOptions="EndAndExpand" Text="{Binding Item2.Header}" Style="{DynamicResource ArticleLightTextStyle}" />
                                </StackLayout>

                            </Grid>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>`

`

Best Answer

  • seanydaseanyda GB ✭✭✭✭✭
    Accepted Answer

    I had the same issue with a Live Feed I built images slow the list views down a lot. I used the component FFImageLoading and it helped so much.

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭
    Accepted Answer

    I had the same issue with a Live Feed I built images slow the list views down a lot. I used the component FFImageLoading and it helped so much.

  • GoranHalvarssonGoranHalvarsson SEMember
    edited April 2016

    Thanks a lot Mr! You truly saved the day :-)

Sign In or Register to comment.