Unable to use FlexLayout in a BindableLayout with MAUI - flexbox

Question

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.

Answer 1

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>