search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.98k stars 1.71k forks source link

BindableLayout.ItemsSource no longer works in 8.0.61 #23491

Open Marcos-Jose-DV opened 2 months ago

Marcos-Jose-DV commented 2 months ago

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[bot] commented 2 months ago

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:

Closed similar issues:

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

Marcos-Jose-DV commented 2 months ago

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 commented 2 months ago

Version 8.0.60 and 8.0.70 have the same behavior

kevinxufei commented 2 months ago

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 commented 1 month ago

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

kevinxufei commented 1 month ago

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

mattleibow commented 2 weeks ago

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

Here is 8.0.40: image

And this is the repo, untouched, at 8.0.70: image

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

Marcos-Jose-DV commented 2 weeks ago

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

using FlexLayout in version 8.0.40. summary, appears the body successfully. versao 8 0 40

using FlexLayout in version 8.0.60. summary, body does not appear. versao 8 0 60

using FlexLayout in version 8.0.61. summary, body does not appear. versao 8 0 61

Marcos-Jose-DV commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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