BindableLayout Height loading Time

[PauchardThomas]

Description

As you can see below, I try to load the same view 3 times, and it take more and more time to load...

MauiPerfIssue2.mp4

==> It's running on Release mode ! (On debug i can take my shower, eat, sleep...)

I really don't know if it's a bindablelayout issue or DataTemplate.

Steps to Reproduce

MainView :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="DatatTemplatePerfIssue.NewPage1"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DatatTemplatePerfIssue"
             Title="NewPage1">
    <ScrollView>
        <StackLayout>
            <HorizontalStackLayout>
                <VerticalStackLayout>
                    <Button BackgroundColor="Black" Clicked="Button_Clicked" HorizontalOptions="Center" Text="Load Tab 1" TextColor="White" WidthRequest="200" />
                    <Label x:Name="lb1" />
                </VerticalStackLayout>
                <VerticalStackLayout>
                    <Button BackgroundColor="Black" Clicked="Button_Clicked_1" HorizontalOptions="Center" Text="Load Tab 2" TextColor="White" WidthRequest="200" />
                    <Label x:Name="lb2" />
                </VerticalStackLayout>
                <VerticalStackLayout>
                    <Button BackgroundColor="Black" Clicked="Button_Clicked_2" HorizontalOptions="Center" Text="Load Tab 3" TextColor="White" WidthRequest="200" />
                    <Label x:Name="lb3" />
                </VerticalStackLayout>
            </HorizontalStackLayout>
            <Label x:Name="lbLoaded" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" />
            <local:Table x:Name="tb1" />
            <local:Table x:Name="tb2" />
            <local:Table x:Name="tb3" />
        </StackLayout>
    </ScrollView>
</ContentPage>

• ContentView xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="DatatTemplatePerfIssue.Table"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DatatTemplatePerfIssue">
    <VerticalStackLayout>
        <VerticalStackLayout x:Name="Rows" Spacing="10">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="local:Row">
                    <Grid RowDefinitions="45,1">
                        <Grid Grid.Row="0" ColumnDefinitions="auto,auto,*" ColumnSpacing="10">
                            <Label Grid.Column="0" Text="{Binding Title, Mode=OneTime}" />
                            <Label Grid.Column="1" Text="{Binding Description, Mode=OneTime}" />
                            <HorizontalStackLayout Grid.Column="2" BindableLayout.ItemsSource="{Binding Cols, Mode=OneTime}" Spacing="10" WidthRequest="500">
                                <BindableLayout.ItemTemplate>
                                    <DataTemplate x:DataType="local:Col">
                                        <HorizontalStackLayout WidthRequest="100">
                                            <Border HeightRequest="25" Stroke="Blue" WidthRequest="25" />
                                            <Border HeightRequest="25" Stroke="Green" WidthRequest="25" />
                                            <Border HeightRequest="25" Stroke="Orange" WidthRequest="25" />
                                            <Border HeightRequest="25" Stroke="Red" WidthRequest="25" />
                                        </HorizontalStackLayout>
                                    </DataTemplate>
                                </BindableLayout.ItemTemplate>
                            </HorizontalStackLayout>
                        </Grid>
                        <BoxView Grid.Row="1" BackgroundColor="Black" />
                    </Grid>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </VerticalStackLayout>
        <BoxView BackgroundColor="Red" HeightRequest="2" HorizontalOptions="FillAndExpand" />
    </VerticalStackLayout>
</ContentView>

• ContentView code behind

using System.Collections.ObjectModel;
using System.Diagnostics;

namespace DatatTemplatePerfIssue;

public partial class Table : ContentView
{
	public Table()
	{
		InitializeComponent();
    }

    public void Load()
    {
        ObservableCollection<Col> cols = new ObservableCollection<Col>();
        for (int i = 0; i < 7; i++)
        {
            cols.Add(new Col("Title" + i));
        }
        ObservableCollection<Row> rows = new ObservableCollection<Row>();
        for (int i = 0; i < 5; i++)
        {
            rows.Add(new Row("Row " + i, "Description " + i, cols));
        }

        BindableLayout.SetItemsSource(Rows, rows);
    }
}

Link to public reproduction project repository

https://github.com/PauchardThomas/MauiBindableLayoutPerfIssue

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

No response

[PauchardThomas]

Associated speedscope (zipped file size too big)
dotnet-dsrouter.exe_20240426_164744.speedscope.zip

[PauchardThomas]

Any workaround please ? I don't know how to analyse the speedcope trace.

[albyrock87]

Speedscope Trace Outcome (from https://github.com/jlfwong/speedscope)

[PauchardThomas]

Any news ? What am i supposed to do ? :( Waiting a fix ?

[albyrock87]

Either:

• propose a fix (PR) and wait for it to be reviewed and included (could take months)
• wait for the fix (could take more months)
• create your own component (including platforms handlers) based on View to render exactly what you need at native level

I think the third one is the best approach.

Edit: my PR #23136 will probably improve the rendering time when you press those buttons if you use one single Table component with bindings, but it won't improve initial rendering time.

[albyrock87]

@PauchardThomas to be clear: issue is unrelated to BindableLayout.

The problem lies in the mapping of Border-related properties. Basically mappers (native code) are being invoked multiple times in a row with the same values, causing every square to be rendered many times instead of just one.

In #23156 I've done some work on iOS to improve initial rendering time.
I would have done it also on Android but it didn't look trivial.

[PauchardThomas]

@PauchardThomas to be clear: issue is unrelated to BindableLayout.

The problem lies in the mapping of Border-related properties. Basically mappers (native code) are being invoked multiple times in a row with the same values, causing every square to be rendered many times instead of just one.

In #23156 I've done some work on iOS to improve initial rendering time. I would have done it also on Android but it didn't look trivial.

Thank you so much for you answer and your work, i guess for now i'll replace all border components from my app until a fix on all platforms ...