Search code examples
c#imagexamarinlagcollectionview

When scrolling in CollectionView pictures in xamarin its laging, what to do?


When i am scrolling in CollectionView it starts to lag, probably loading of next pictures. What can i do with that? How can i optimize it?

Here is XAML:

<Grid BackgroundColor="#00aeef">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <CollectionView x:Name="myCollectionView" Grid.Row="0">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame Padding="0" BackgroundColor="#00d2ff" Margin="20" CornerRadius="30">
                            <StackLayout Padding="20">
                                <Label Text="{Binding Airline}" TextColor ="White" FontSize="30" HorizontalOptions="Center"/>
                                <Image Source="{Binding Url}" HeightRequest="200"/>
                                <Label Text="{Binding Plane, StringFormat='Plane: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Airline, StringFormat='Airline: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Livery, StringFormat='Livery: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Registration, StringFormat='Reg: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Airport, StringFormat='Airport: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Date, StringFormat='Date: {0}'}" TextColor ="White" FontSize="15"/>
                                <Label Text="{Binding Comment, StringFormat='Comment: {0}'}" TextColor ="White" FontSize="15"/>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

And here is my code:

public ShowPlanes()
    {
        InitializeComponent();
        var db = new SQLiteConnection(_dbPath);
        var data = db.Table<Airplane>().ToList();
        myCollectionView.ItemsSource = data;
        NavigationPage.SetHasNavigationBar(this, false);
    }

Solution

  • if your images are large try resizing it to your required size may be it will solve it below is very good reference.

    https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/xamformsimageresize/