BindableLayout.ItemsSource no longer works in 8.0.61

[Marcos-Jose-DV]

Description

After updating the Microsoft.Maui.Controls.Compatibility and Microsoft.Maui.Controls packages to version 8.0.61, a view of the BindableLayout.ItemsSource stopped working. The data linked to the binding was not configured correctly,

I went back to version 8.0.21 and resolved

  <Grid>
     <ScrollView>
         <FlexLayout>
             <!-- Header -->
             <VerticalStackLayout>
                 <Grid>
                     <BoxView BackgroundColor="#3255e2" HeightRequest="64"/>
                     <Label Text="Avaliações" FontSize="24"/>
                 </Grid>
                 <HorizontalStackLayout BackgroundColor="#202380" Padding="10">
                     <Button Text="Inicio"/>
                     <Button Text="Filmes" />
                     <Button Text="Séries"/>
                     <Button Text="Livros"/>
                     <Button Text="Musicas"/>
                 </HorizontalStackLayout>
             </VerticalStackLayout>


             <!-- Body -->
             <FlexLayout FlexLayout.Grow="1"
                         Wrap="Wrap"
                         JustifyContent="Start" 
                         BindableLayout.ItemsSource="{Binding Assessments}"
                         Margin="10"
                         ZIndex="4">

                 <!-- Content -->
                 <BindableLayout.ItemTemplate>
                     <DataTemplate>
                         <VerticalStackLayout>
                             <Frame CornerRadius="10"
                                    HasShadow="True"
                                    BorderColor="White"
                                    WidthRequest="160"
                                    HeightRequest="240"
                                    Padding="0"
                                    Margin="10">
                                 <Image Source="{Binding Image}"
                                    x:Name="ImageCard"
                                    Aspect="AspectFill"
                                    MaximumWidthRequest="160"
                                    MaximumHeightRequest="240">
                                     <Image.GestureRecognizers>
                                         <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                                                   PointerExited="OnPointerExited"/>

                                         <TapGestureRecognizer Command="{Binding BindingContext.DetailCommand,Source={x:Reference PaiPage}}"
                                                               CommandParameter="{Binding .}"/>
                                     </Image.GestureRecognizers>
                                 </Image>
                             </Frame>
                         </VerticalStackLayout>
                     </DataTemplate>
                 </BindableLayout.ItemTemplate>
             </FlexLayout>

         </FlexLayout>
     </ScrollView>
 </Grid>

Steps to Reproduce

1. Updated the versions of the Microsoft.Maui.Controls and Microsoft.Maui.Controls.Compatibility packages to version 8.0.61.
2. My FlexLayout layout was using BindableLayout.ItemsSource to bind the data.
3. After updating, the data did not appear on the page, although it was context-bound.
4. I went back to version 8.0.21 and everything is back to normal.

Link to public Reproduction project repository

No response

Version with bug

8.0.40

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

8.0.40

Affected platforms

Windows

Affected platform versions

windows 10.0.17763.0

Did you find any workaround?

No response

Relevant log output

I didn't have any way out

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Application Crash Issue with Data Binding in .NET MAUI 8 CollectionView and ObservableCollection (#20037), similarity score: 0.74

Closed similar issues:

• Flex Layout -> BindableLayout not working after ItemsSource changed in new vs preview version (#9544), similarity score: 0.77
• CollectionView view DataTemplateSelector takes random layout when scroll on Windows (#20842), similarity score: 0.74
• Picker regression in 8.0.60 (#23367), similarity score: 0.74
• .NET MAUI 7.0.81 breaks layouting of native controls on Windows (#14536), similarity score: 0.74

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[Marcos-Jose-DV]

Apparently when I use other layouts it works perfectly - Reproduction

With FlexLayout error (8.0.61)

 <Grid>
     <ScrollView>
         <FlexLayout>
             <!-- Header -->
             <VerticalStackLayout>
                 <Grid>
                     <BoxView BackgroundColor="#3255e2" HeightRequest="64"/>
                     <Label Text="Avaliações" FontSize="24"/>
                 </Grid>
                 <HorizontalStackLayout BackgroundColor="#202380" Padding="10">
                     <Button Text="Inicio"/>
                     <Button Text="Filmes" />
                     <Button Text="Séries"/>
                     <Button Text="Livros"/>
                     <Button Text="Musicas"/>
                 </HorizontalStackLayout>
             </VerticalStackLayout>


             <!-- Body -->
             <FlexLayout FlexLayout.Grow="1"
                         Wrap="Wrap"
                         JustifyContent="Start" 
                         BindableLayout.ItemsSource="{Binding Assessments}"
                         Margin="10"
                         ZIndex="4">

                 <!-- Content -->
                 <BindableLayout.ItemTemplate>
                     <DataTemplate>
                         <VerticalStackLayout>
                             <Frame CornerRadius="10"
                                    HasShadow="True"
                                    BorderColor="White"
                                    WidthRequest="160"
                                    HeightRequest="240"
                                    Padding="0"
                                    Margin="10">
                                 <Image Source="{Binding Image}"
                                    x:Name="ImageCard"
                                    Aspect="AspectFill"
                                    MaximumWidthRequest="160"
                                    MaximumHeightRequest="240">
                                     <Image.GestureRecognizers>
                                         <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                                                   PointerExited="OnPointerExited"/>

                                         <TapGestureRecognizer Command="{Binding BindingContext.DetailCommand,Source={x:Reference PaiPage}}"
                                                               CommandParameter="{Binding .}"/>
                                     </Image.GestureRecognizers>
                                 </Image>
                             </Frame>
                         </VerticalStackLayout>
                     </DataTemplate>
                 </BindableLayout.ItemTemplate>
             </FlexLayout>

         </FlexLayout>
     </ScrollView>
 </Grid>

With other layouts - Ok (8.0.61)

 <Grid>
     <ScrollView>
         <VerticalStackLayout>
             <!-- Header -->
             <VerticalStackLayout>
                 <Grid>
                     <BoxView BackgroundColor="#3255e2" HeightRequest="64"/>
                     <Label Text="Avaliações" FontSize="24"/>
                 </Grid>
                 <HorizontalStackLayout BackgroundColor="#202380" Padding="10">
                     <Button Text="Inicio"/>
                     <Button Text="Filmes" />
                     <Button Text="Séries"/>
                     <Button Text="Livros"/>
                     <Button Text="Musicas"/>
                 </HorizontalStackLayout>
             </VerticalStackLayout>


             <!-- Body -->
             <FlexLayout FlexLayout.Grow="1"
                         Wrap="Wrap"
                         JustifyContent="Start" 
                         BindableLayout.ItemsSource="{Binding Assessments}"
                         Margin="10"
                         ZIndex="4">

                 <!-- Content -->
                 <BindableLayout.ItemTemplate>
                     <DataTemplate>
                         <VerticalStackLayout>
                             <Frame CornerRadius="10"
                                    HasShadow="True"
                                    BorderColor="White"
                                    WidthRequest="160"
                                    HeightRequest="240"
                                    Padding="0"
                                    Margin="10">
                                 <Image Source="{Binding Image}"
                                    x:Name="ImageCard"
                                    Aspect="AspectFill"
                                    MaximumWidthRequest="160"
                                    MaximumHeightRequest="240">
                                     <Image.GestureRecognizers>
                                         <PointerGestureRecognizer PointerEntered="OnPointerEntered"
                                                                   PointerExited="OnPointerExited"/>

                                         <TapGestureRecognizer Command="{Binding BindingContext.DetailCommand,Source={x:Reference PaiPage}}"
                                                               CommandParameter="{Binding .}"/>
                                     </Image.GestureRecognizers>
                                 </Image>
                             </Frame>
                         </VerticalStackLayout>
                     </DataTemplate>
                 </BindableLayout.ItemTemplate>
             </FlexLayout>

         </VerticalStackLayout>
     </ScrollView>
 </Grid>

[Marcos-Jose-DV]

Version 8.0.60 and 8.0.70 have the same behavior

[kevinxufei]

This issue has been verified using Visual Studio 17.11.0 Preview 3.0(8.0.70 & 8.0.60). Can repro on Windows platform.