ListView with over 200 Bindings

tomek.1101 · January 23

Is there a way to speed up the performance of ListView, which uses over 200 Bindings?

This is a list that uses mostly Label elements, I do not use images at all.

JohnHardman · January 23

See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/performance for information about caching strategy.

If you are already using the most appropriate caching strategy, post your XAML/C#

tomek.1101 · January 23

I tested different CachingStrategy but it did not accelerate anything. The code in c # / xaml is standard simple, it does not contain anything complicated, the only thing that worries me is the number of bindings. Is there any known trick that allows you to speed up operations on them or reduce their number in xaml.

JohnHardman · January 23

@tomek.1101 said:
Is there any known trick that allows you to speed up operations on them or reduce their number in xaml.

Nobody will be able to tell you how to reduce their number in XAML without seeing your XAML :-)

ClintStLaurent · January 23

200 bindings in a ListView... Really? Sounds like that could probably be re-imagined. I can't fathom how a ListView record could be at all manageable or viewable on a mobile device - even a PC screen - with over 200 elements in a single record.

It sounds more like someone knew how to do one thing: Binding... And used it as the only tool in their toolbox - as a way to handle everything from business rules to data validation.

tomek.1101 · January 23

Part of ListView in Xaml file:

MyList - is generate and modify in ViewModel very fast.

I have a lot of elements isVisible, this explains why the entire list has as many as 200 bindings.

   <ListView ItemsSource="{Binding MyList}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Yellow" CachingStrategy="RecycleElement">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="340" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <StackLayout IsVisible="{Binding Variable1}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="0" Grid.Column="1">

                                <StackLayout IsVisible="{Binding Variable_visible}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" AutomationProperties.IsInAccessibleTree="True">
                                    <Grid RowSpacing="0" Padding="10,0,10,0" Margin="0,10,0,0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="20"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>

                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="80"/>
                                            <ColumnDefinition Width="30"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>

                                        <StackLayout Margin="0,0,0,0" HorizontalOptions="Start" VerticalOptions="Start" Orientation="Vertical" Spacing="0" Grid.Row="1" Grid.Column="0">
                                            <Label IsVisible="{Binding Variable2}" Text="Odjazd" FontSize="Micro" TextColor="{StaticResource My_color}" VerticalOptions="Center"/>
                                            <Label IsVisible="{Binding Variable3}" Text="{Binding Variable38}" FontSize="Small" TextColor="{StaticResource My_color}"/>
                                            <Label IsVisible="{Binding Variable4}" VerticalOptions="Start" 
                                                                Text="{Binding Variable5, StringFormat=' (+{0})'}" FontSize="Micro" TextColor="{Binding Variable6}"/>

                                            <Label Margin="15,0,0,0" IsVisible="{Binding Variable7}" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans1}" FontSize="Micro" TextColor="{StaticResource My_color}"/>
                                            <Label Margin="15,0,0,0" Text="{Binding Variable8, StringFormat = '{0}'}" FontSize="Micro" TextColor="{StaticResource My_color}"/>
                                            <Label Margin="15,0,0,0" IsVisible="{Binding Variable9}" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans2}" FontSize="Micro" TextColor="{StaticResource My_color}"/>
                                            <Label Margin="15,0,0,15" Text="{Binding Variable10, StringFormat = '{0}'}" FontSize="Micro" TextColor="{StaticResource My_color}"/>
                                        </StackLayout>

                                        <BoxView IsVisible="{Binding Variable11}" VerticalOptions="Fill" HorizontalOptions="Center" Margin="0,0,0,0" WidthRequest="4" HeightRequest="50" 
                                                                Color="{Binding My_color1}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="5" />

                                        <imagecircle:CircleImage WidthRequest="30" HeightRequest="30" VerticalOptions="Start" HorizontalOptions="Center"
                                                                                FillColor="{Binding My_color2}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />

                                        <imagecircle:CircleImage WidthRequest="26" VerticalOptions="Start"
                                                                                HorizontalOptions="Center" Margin="0,2,0,0" HeightRequest="26" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" 
                                                                                FillColor="{Binding My_color2}" BorderColor="{Binding My_color2}"/>

                                        <Image x:Name="image1" Aspect="AspectFit" Source="{Binding Variable12}" VerticalOptions="Start" HorizontalOptions="Center"
                                                                        Margin="0,5,0,0" WidthRequest="20" HeightRequest="20" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"/>

                                        <Label IsVisible="{Binding Variable13}" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans3}" TextColor="White" BackgroundColor="{StaticResource My_color3}" VerticalOptions="FillAndExpand" 
                                                            HorizontalOptions="Start" Margin="70,0,0,0" Grid.Column="0" FontSize="Micro" Grid.Row="5" Grid.ColumnSpan="3"/>
                                        <Label IsVisible="{Binding Variable14}" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=trans4}" TextColor="White" BackgroundColor="{StaticResource My_color3}" VerticalOptions="FillAndExpand" 
                                                            HorizontalOptions="Start" Margin="70,0,0,0" Grid.Column="0" FontSize="Micro" Grid.Row="5" Grid.ColumnSpan="3" />

                                        <Frame IsVisible="{Binding Variable_35}" BackgroundColor="{StaticResource My_color3}" Margin="75,0,0,0" VerticalOptions="FillAndExpand" HorizontalOptions="Start" HeightRequest="20" Padding="3" 
                                                    Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3">
                                            <Label Text="{Binding Variable_36}" FontSize="Micro" TextColor="White" HorizontalOptions="Center" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center"/>
                                        </Frame>

                                        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Grid.Row="0" Grid.Column="2">
                                            <Label VerticalOptions="Start" Text="{Binding Variable15}" FontSize="Medium" TextColor="{StaticResource My_color}">
                                                <Label.Triggers>
                                                    <DataTrigger TargetType="Label" Binding="{Binding Variable16}" Value="True">
                                                        <Setter Property="TextColor" Value="{Binding Variable17}"/>
                                                    </DataTrigger>
                                                </Label.Triggers>
                                            </Label>
                                        </StackLayout>


                                        <StackLayout Margin="0,0,0,0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Grid.Row="1" Grid.Column="2">
                                            <StackLayout Orientation="Horizontal">
                                                <Label IsVisible="{Binding Variable18}" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans_6}" 
                                                                    TextColor="White" BackgroundColor="{Binding Variable19}" VerticalOptions="FillAndExpand"
                                                                    HorizontalOptions="Start" Grid.Column="0" FontSize="Micro" />
                                            </StackLayout>

                                            <StackLayout IsVisible="{Binding Variable20}" Orientation="Horizontal" VerticalOptions="Fill" HorizontalOptions="Fill">

                                                <Frame IsVisible="{Binding Variable21}" VerticalOptions="Start" HorizontalOptions="Start" HeightRequest="20" WidthRequest="40"
                                                                    CornerRadius="5" HasShadow="True" Padding="5" BackgroundColor="{StaticResource My_color3}" OutlineColor="{StaticResource My_color4}">
                                                    <controls:WCAGButton Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans5}" TextColor="White" HasClickAnimation="False"
                                                                         HorizontalOptions="Center" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" 
                                                                         Clicked="My_Tapped_1" ContentDescription="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans6}">
                                                        <controls:WCAGButton.FontSize>
                                                            <OnPlatform x:TypeArguments="x:Double" iOS="13" />
                                                        </controls:WCAGButton.FontSize>
                                                    </controls:WCAGButton>
                                                </Frame>

                                                <StackLayout IsVisible="{Binding Variable22}" Orientation="Horizontal" VerticalOptions="Fill" HorizontalOptions="Fill">
                                                    <Label IsVisible="{Binding Variable23}" Text="{Binding Variable24}" FontSize="Micro" TextColor="{Binding My_color5}"/>
                                                    <Label IsVisible="{Binding Variable23}" Text="{Binding Variable25}" FontSize="Micro" TextColor="{Binding My_color5}"/>
                                                </StackLayout>

                                                <Image IsVisible="{Binding Variable26}" Aspect="AspectFit" Source="{Binding My_Image1}" Margin="0,0,0,0" WidthRequest="20" HeightRequest="20"/>
                                                <Label IsVisible="{Binding Variable27}" FontSize="Micro" Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans_4}" VerticalOptions="Start" HorizontalOptions="Center" Margin="0,0,0,0" WidthRequest="1" HeightRequest="1"/>

                                                <Label IsVisible="{Binding Variable28}" Text="{Binding Variable29}" FontSize="Micro" TextColor="{Binding My_color5}"/>
                                                <Label IsVisible="{Binding Variable28}" Text="{Binding Variable30}" FontSize="Micro" TextColor="{Binding My_color5}"/>
                                            </StackLayout>

                                            <StackLayout IsVisible="{Binding Variable31}" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="Start">
                                                <controls:WCAGButton CustomImage="my_image2.png" ContentDescription="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans6}"
                                                                     CustomImageWidth="25" CustomImageHeight="25" WidthRequest="25" HeightRequest="25" HasClickAnimation="False" Clicked="My_Tapped2" Padding="0,-7,0,0">
                                                    <controls:WCAGButton.BackgroundColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="White" iOS="White"/>
                                                    </controls:WCAGButton.BackgroundColor>
                                                    <controls:WCAGButton.TextColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="{StaticResource My_color}" iOS="{StaticResource My_color}"/>
                                                    </controls:WCAGButton.TextColor>
                                                    <controls:WCAGButton.BorderWidth>
                                                        <OnPlatform x:TypeArguments="x:Double" Android="0" iOS="0"/>
                                                    </controls:WCAGButton.BorderWidth>
                                                    <controls:WCAGButton.BorderColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="White" iOS="White"/>
                                                    </controls:WCAGButton.BorderColor>
                                                </controls:WCAGButton>
                                            </StackLayout>

                                            <StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="StartAndExpand">
                                                <Label IsVisible="{Binding Variable32, Converter={StaticResource My_Converter2}}" Text="{Binding Variable35}" FontSize="Micro" TextColor="{Binding My_color6}"/>
                                                <Label IsVisible="{Binding Variable33, Converter={StaticResource My_Converter2}}" Text="{Binding Variable36}" FontSize="Micro" 
                                                                    TextColor="{Binding Variable34, Converter={StaticResource My_Converter1}}"/>
                                                <Label IsVisible="{Binding Variable34, Converter={StaticResource My_Converter12}}" Text="{Binding Variable34}" FontSize="Micro" TextColor="{Binding My_color6}"/>
                                            </StackLayout>

                                            <StackLayout Orientation="Horizontal">
                                                <controls:WCAGButton CustomImage="my_image3.png" IsVisible="{Binding Variable37}" HasClickAnimation="False" VerticalOptions="Start" HorizontalOptions="Center"
                                                                     CustomImageWidth="25" CustomImageHeight="25" WidthRequest="25" HeightRequest="25" 
                                                                     ContentDescription="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans_4}"
                                                                     Clicked="My_Tapped_3" Padding="0,-7,0,0">
                                                    <controls:WCAGButton.BackgroundColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="White" iOS="White"/>
                                                    </controls:WCAGButton.BackgroundColor>
                                                    <controls:WCAGButton.TextColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="{StaticResource My_color}" iOS="{StaticResource My_color}"/>
                                                    </controls:WCAGButton.TextColor>
                                                    <controls:WCAGButton.BorderWidth>
                                                        <OnPlatform x:TypeArguments="x:Double" Android="0" iOS="0"/>
                                                    </controls:WCAGButton.BorderWidth>
                                                    <controls:WCAGButton.BorderColor>
                                                        <OnPlatform x:TypeArguments="Color" Android="White" iOS="White"/>
                                                    </controls:WCAGButton.BorderColor>
                                                </controls:WCAGButton>

                                                <Frame IsVisible="{Binding Variable38}" VerticalOptions="Start" HorizontalOptions="Start" HeightRequest="20" WidthRequest="80" 
                                                       CornerRadius="5" HasShadow="True" Padding="5" 
                                                                    BackgroundColor="{StaticResource My_color7}" OutlineColor="{StaticResource My_color7}">
                                                    <controls:WCAGButton Text="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans7}" TextColor="White" HasClickAnimation="False" ContentDescription="{Binding Source={x:Static tc:Translation.Instance}, Path=Trans8}"
                                                                         HorizontalOptions="Center" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" Clicked="My_Tapped_2">
                                                        <controls:WCAGButton.FontSize>
                                                            <OnPlatform x:TypeArguments="x:Double" iOS="13" />
                                                        </controls:WCAGButton.FontSize>
                                                    </controls:WCAGButton>
                                                </Frame>
                                            </StackLayout>

                                        </StackLayout>
                                    </Grid>
                                </StackLayout>

                            <!--
                                ...
                            ...
                            similar code 2x times
                            ...
                            ...
                            -->

                    </Grid>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

JoeManke · January 23

Why is your cell so ridiculously complex? How many of these visibility bindings are ever going to be true at the same time? The XAML you posted is only for one of three columns, I feel like if all three of them are visible it would be impossible to read anything.

You really need to look into simplifying your model and using a DataTemplateSelector to define a few different cells instead of cramming them all into one.

ClintStLaurent · January 23

@ClintStLaurent said:
200 bindings in a ListView... Really? Sounds like that could probably be re-imagined. I can't fathom how a ListView record could be at all manageable or viewable on a mobile device - even a PC screen - with over 200 elements in a single record.

It sounds more like someone knew how to do one thing: Binding... And used it as the only tool in their toolbox - as a way to handle everything from business rules to data validation.

@JoeManke said:
Why is your cell so ridiculously complex? How many of these visibility bindings are ever going to be true at the same time? The XAML you posted is only for one of three columns, I feel like if all three of them are visible it would be impossible to read anything.

You really need to look into simplifying your model and using a DataTemplateSelector to define a few different cells instead of cramming them all into one.

I'm going to be more frank....

What a mess.

Pure and simple no sugar coating. What a mess.
Every item has its own fontsize and margins set individually instead of defining styles.
Every item is micro-managed to within an inch of its life.
variable25 ... variable 37... You have got to be kidding.
A bunch of these

<imagecircle:CircleImage WidthRequest="30" HeightRequest="30" VerticalOptions="Start" HorizontalOptions="Center"
                                                                                FillColor="{Binding My_color2}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />

<controls:WCAGButton.BorderWidth>
                                                        <OnPlatform x:TypeArguments="x:Double" Android="0" iOS="0"/>
                                                    </controls:WCAGButton.BorderWidth>

Then there's junk like this.

The StackLayout IsVisible is binded to one property. Its only has two items, and they are binded to the same different property. Let's just add 3 times the amount of computing required. Bind just the StackLayout to the one property you care about variable23.

Total rendering engine nightmare. Whatever graphic designer did this UI needs to be fired. Whatever developer did those variable names needs to be demoted to intern and go back to school.

I'm surprised the app runs at all and the phone doesn't just burst into flame.

This has got to be something out of a Mumbai outsource company.

Thanks for the laugh

I really needed it today.

JohnHardman · January 23

@tomek.1101

That's why we needed to see your XAML. From your original post, you might have had four bindings per item and 50 items. Seeing your XAML shows that is not the case and that you actually have a serious design issue.

Immediate thoughts - I'm using "may" and "might" here, as you'd have to pay me to go through this in detail to give definitive answers:

(1) You might want to use a DataTemplateSelector
(2) You may not need the granularity of control over IsVisible that you currently have
(3) You might be able to use Styles to simplify things
(4) You may not need to control IsVisible on Views that are inside Layouts for which you already control IsVisible

What you currently have is crazy complicated. I seriously doubt that it needs to be anywhere near that complex. That it's slow to render is no surprise. Assuming that you are in a corporate environment, I'd suggest getting somebody in to look at the requirements and to come up with a design that copes on devices that have limited CPUs.

clopez · January 23

Or, if you don't want to deal with templates or styles (even they're reccomended), just separate it in views, and work with blocks. That's easy even for total noobs. Just take a look on how they work, because is a very basic feature.

That XAML remembers me the old HTML pages and the way they were programmed years ago.

Xamarin

ListView with over 200 Bindings

Answers

What a mess.

Thanks for the laugh

Xamarin

Quick Links

ListView with over 200 Bindings

Answers

What a mess.

Thanks for the laugh