CODEWITHSUNDEEP
xamllistviewxamarin.forms
Viktor Bylbas
Viktor Bylbas

Reputation: 767

Xamarin.Forms. Optimization ListView

Can you give recommendations on how to optimize the ListView? It slows down when scrolling. My viewCell looks like this:

<Grid BackgroundColor="{Binding ListViewCustomizer.ItemBorderColor, Source={x:Static theme:ThemeManager.Theme}}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

    <Grid Margin="0, 0, 0, 1" 
        BackgroundColor="{Binding ListViewCustomizer.ItemBackgroundColor, Source={x:Static theme:ThemeManager.Theme}}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid.Triggers>
            <DataTrigger Binding="{Binding IsRead}" TargetType="Grid" Value="true">
                <Setter Property="BackgroundColor" Value="#bfe3fa" />
            </DataTrigger>
        </Grid.Triggers>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="6*"/>
            <RowDefinition Height="4*"/>
        </Grid.RowDefinitions>

        <ContentView Grid.RowSpan="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="1, 1">
            <ffimageloading:CachedImage x:Name="mainImage" 
                                Source="news_placeholder.png" 
                                LoadingPlaceholder="news_placeholder.png"  
                                DownsampleToViewSize="false" 
                                CacheDuration="{x:Static constant:ImageConfig.PreviewImageCacheDuration}"
                                ErrorPlaceholder="news_placeholder.png" Aspect="AspectFill" 
                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                        Transformations="{Binding IsRead, Converter={StaticResource BoolToTransformationConverter}}">
                <ffimageloading:CachedImage.DownsampleHeight>
                    <extensions:OnDeviceType x:TypeArguments="x:Double" Phone="130" Tablet="200"/>
                </ffimageloading:CachedImage.DownsampleHeight>
            </ffimageloading:CachedImage>
        </ContentView>            

        <Grid Grid.Column="1" RowSpacing="0" Margin="10,10,10,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

             <Label Style="{StaticResource BaseListItemLabelStyle}" FormattedText="{Binding ., Converter={StaticResource NewsItemToFormattedStringConveter}}"/>

            <ctrl:ExtendedLabel 
                Grid.Row="1"
                MultilineTrimming="True" 
                x:Name="content"
                Style="{StaticResource ListItemContentLabelStyle}" />
        </Grid>

    </Grid>
</Grid>

Maybe something to replace something. Maybe should I replace all bindings with code-behind?

Help me please.

Upvotes: 1

Views: 557

Answers (1)

Markus Michel
Markus Michel

Reputation: 2299

You packed quite a lot of stuff into that viewcell. Also changing data binding to code behind won't give you significant benefits performancewise.

What is happening here is that all of these elements need to run layout passes, which requires time (performance). Now multiply that with the amount of items in your ListView. Good news however is, that this multiplication factor will be in your favour once you improve your view to do less layouting.

What I would suggest:

1) Don't use "Auto" height definitions, since that will need multiple layout passes until the final height has been determined

2) Reduce the grids to one single grid and work with RowSpan and ColumnSpan properties to set your elements

3) Is there a reason why you are using a content view? If I remember correctly you should be able to put the ffimageloading.cachedimage directly into a grid.

For more information about how to optimize your xamarin forms layout performance, I would recomment this article: https://xamarininsider.com/2017/08/03/optimizing-layout-performance-in-xamarin-forms/

Upvotes: 3

Related Questions