Unable to use FlexLayout in a BindableLayout with MAUI

I'm trying to use a FlexLayout in the DataTemplate section of a BindableLayout with MAUI. I'm using a StackLayout as a BindableLayout. However, the app does not even start because of an error that seems to come from the Xaml code. Everything is fine when I use a StackLayout or a Grid instead but I want to use a FlexLayout if possible. What am I doing wrong?

Here is a picture of the error:

XAML Error

Exception details 1

Exception details 2

The error message is "Élément introuvable" which means Unable to find element.

Here is the xaml code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tests="clr-namespace:Tests"
             xmlns:components="clr-namespace:Tests.Components"
             Shell.NavBarIsVisible="False"
             x:Class="Tests.MainPage">

    <StackLayout>

        <StackLayout x:Name="Items">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="tests:Phone">
                    <FlexLayout>
                        <Image MaximumHeightRequest="150" Source="{Binding Image}"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Price}"/>
                        <Label Text="{Binding Year}"/>
                    </FlexLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>

    </StackLayout>

</ContentPage>

Here is the .cs code:


public partial class MainPage : ContentPage {
    private ObservableCollection<Phone> phones = new();
    public MainPage() {
        InitializeComponent();

        InitPhoneCollection();
    }
    private void InitPhoneCollection() {
        Phone phone1 = new Phone {
            Name = "iPhone",
            Price = 100,
            Year = "2019",
            Image = "iphone.jpg"
        };

        Phone phone2 = new Phone {
            Name = "Samsung",
            Price = 150,
            Year = "2021",
            Image = "samsung.jpg"
        };

        Phone phone3 = new Phone {
            Name = "Blackberry",
            Price = 200,
            Year = "2022",
            Image = "blackberry.jpg"
        };

        phones.Add(phone1);
        phones.Add(phone2);
        phones.Add(phone3);

        BindableLayout.SetItemsSource(Items, phones);
    }
}

Thanks

I tried a StackLayout and a Grid instead but for best results but I would prefer a FlexLayout.

Solution

This is a known issue that being tracked in the links below, you can follow up there.

https://github.com/dotnet/maui/issues/9905

https://github.com/dotnet/maui/issues/11909

https://github.com/dotnet/maui/issues/9075

As an alternative workaround, you can use StackLayout or Grid instead of FlexLayout like below:

   <StackLayout x:Name="Items">
            <BindableLayout.ItemTemplate>
                <DataTemplate x:DataType="tests:Phone">
                    <StackLayout>
                        <Image MaximumHeightRequest="150" Source="{Binding Image}"/>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Price}"/>
                        <Label Text="{Binding Year}"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
    </StackLayout>