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.

[PureWeen]

@kevinxufei can you go back MAUI versions and figure out what version it regressed on?

[kevinxufei]

@PureWeen It has been verified that 8.0.60 does not work, 8.0.40 works fine

[mattleibow]

I am not able to repro or at least not able to see what it should be.

Here is 8.0.40:

And this is the repo, untouched, at 8.0.70:

I even tested 8.0.61, and that worked fine. What is the result you see?

[Marcos-Jose-DV]

When changing the FlexLayout parent by other Layout works all versions.

using FlexLayout in version 8.0.40.
summary, appears the body successfully.

using FlexLayout in version 8.0.60.
summary, body does not appear.

using FlexLayout in version 8.0.61.
summary, body does not appear.

[Marcos-Jose-DV]

Apparently when I use other layouts it works perfectly - Reproduction
Code.

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

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

        <!--  Content  -->
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <VerticalStackLayout>
                    <Frame
                        Margin="10"
                        Padding="0"
                        BorderColor="White"
                        CornerRadius="10"
                        HasShadow="True"
                        HeightRequest="240"
                        WidthRequest="160">
                        <Image
                            x:Name="ImageCard"
                            Aspect="AspectFill"
                            MaximumHeightRequest="240"
                            MaximumWidthRequest="160"
                            Source="{Binding Image}">
                            <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>

[mattleibow]

But I ran the attached sample app and that is where I got the screenshots.

Is the sample app using flex not correct repro, or is it my machine?

Can you attach a binlog so I can check what is happening in the build?

[Marcos-Jose-DV]

Which way do you prefer shipping? I don't know about zip and the correct way.
I can also send it as a txt file.
BinLog binlog.zip