Forum› Xamarin.Forms
ListView with over 200 Bindings
tomek.1101
USMember ✭✭
USMember ✭✭
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.
Tagged:
0
Answers
@tomek.1101
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#
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.
Nobody will be able to tell you how to reduce their number in XAML without seeing your XAML :-)
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.
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>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
StackLayoutIsVisible 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 aboutvariable23.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
internand 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.
@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.
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.