Layout incorrect after visibility is toggled of a child view

[davidortinau]

Description

I have a ContentPage with a couple Entry fields and a bindable layout in a ScrollView. If I toggled the visibility of one of the Entry fields, and then update the BindableLayout, the layout of the page shows the space where the IsVisible shouldn't be. The Grid.Row that contains this control is Auto and not visible by default.

As you can see in the video, the whole page content shifts up in the window.

layout-glitch.mov

https://github.com/davidortinau/SentenceStudio/blob/main/src/SentenceStudio/Pages/Writing/WritingPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c="clr-namespace:SentenceStudio.Pages.Controls"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:lesson="clr-namespace:SentenceStudio.Pages.Lesson"
             xmlns:w="clr-namespace:SentenceStudio.Pages.Writing"
             xmlns:l="clr-namespace:CustomLayouts"
             xmlns:s="clr-namespace:SentenceStudio.Services"
             xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
             xmlns:model="clr-namespace:SentenceStudio.Models"
             x:Class="SentenceStudio.Pages.Lesson.WritingPage"
             Title="{Binding Localize[Write]}"
             x:DataType="lesson:WritingPageModel" 
             HideSoftInputOnTapped="False"
             Shell.NavBarIsVisible="True">

    <ContentPage.Resources>
        <w:BoolToReturnTypeConverter x:Key="BoolToReturnTypeConverter" />

        <DataTemplate x:Key="DesktopTemplate" x:DataType="model:Sentence">
            <Grid ColumnDefinitions="8*,2*,2*,2*">
                <Label Text="{Binding Answer}"
                    Grid.Column="0" />
                <Label Text="{Binding Accuracy}"
                    HorizontalOptions="Center"
                    Grid.Column="1" />
                <Label Text="{Binding Fluency}"
                    HorizontalOptions="Center"
                    Grid.Column="2" />
                
                <HorizontalStackLayout Grid.Column="3" HorizontalOptions="Center">
                    <Button ImageSource="{mi:SegoeFluent Icon=Copy, IconSize={StaticResource IconSizeSmall}}"
                            BackgroundColor="Transparent"
                            TextColor="Black"
                            Padding="0" Margin="0"
                            VerticalOptions="Center"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type lesson:WritingPageModel}}, Path=UseVocabCommand}"
                            CommandParameter="{Binding Answer}" />
                    <Button ImageSource="{mi:SegoeFluent Icon=Info, IconSize={StaticResource IconSizeSmall}}"
                        BackgroundColor="Transparent"
                        TextColor="Black"
                        Padding="0" Margin="0"
                        VerticalOptions="Center"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type lesson:WritingPageModel}}, Path=ShowExplanationCommand}"
                        CommandParameter="{Binding .}" />
                </HorizontalStackLayout>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="MobileTemplate" x:DataType="model:Sentence">
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItems Mode="Execute">
                        <SwipeItemView  
                            Command="{Binding Source={RelativeSource AncestorType={x:Type lesson:WritingPageModel}}, Path=UseVocabCommand}"
                            CommandParameter="{Binding Answer}">
                            <Grid WidthRequest="60" Background="Red">
                                <Image Source="{mi:SegoeFluent Icon=Copy, IconSize={StaticResource IconSizeSmall}}"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center" />
                            </Grid>
                        </SwipeItemView>
                    </SwipeItems>
                </SwipeView.LeftItems>
                <SwipeView.RightItems>
                    <SwipeItems Mode="Execute">
                     <SwipeItemView  
                            Command="{Binding Source={RelativeSource AncestorType={x:Type lesson:WritingPageModel}}, Path=ShowExplanationCommand}"
                            CommandParameter="{Binding .}">
                            <Grid WidthRequest="60" Background="Orange">
                                <Image Source="{mi:SegoeFluent Icon=Info, IconSize={StaticResource IconSizeSmall}}"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center" />
                            </Grid>
                        </SwipeItemView>
                        
                    </SwipeItems>
                </SwipeView.RightItems>
                <Grid ColumnDefinitions="8*,2*,2*" RowDefinitions="45"
                    Background="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}">
                    <Label Text="{Binding Answer}"
                        VerticalOptions="Center"
                        Grid.Column="0" />
                    <Label Text="{Binding Accuracy}"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Grid.Column="1" />
                    <Label Text="{Binding Fluency}"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Grid.Column="2" />
                </Grid>
            </SwipeView>
        </DataTemplate>

        <w:AnswerTemplateSelector x:Key="AnswerTemplateSelector"
                                  DesktopTemplate="{StaticResource DesktopTemplate}"
                                  MobileTemplate="{StaticResource MobileTemplate}" />
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
        <ToolbarItem IconImageSource="{mi:SegoeFluent Icon=Refresh, IconSize={StaticResource IconSize}}"
                     Command="{Binding RefreshVocabCommand}" />
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="Auto,*,Auto">
        <Grid Margin="{StaticResource size160}"
                ColumnDefinitions="{OnIdiom '8*,2*,2*,2*', Phone='8*,2*,2*,0'}">
            <Label Text="{Binding Localize[Sentence]}"
                Style="{StaticResource Title3}"
                Grid.Column="0" />
            <Label Text="{Binding Localize[Accuracy]}"
                Style="{StaticResource Title3}"
                HorizontalOptions="Center"
                Grid.Column="1" />
            <Label Text="{Binding Localize[Fluency]}"
                Style="{StaticResource Title3}"
                HorizontalOptions="Center"
                Grid.Column="2" />
            <Label Text="{Binding Localize[Actions]}"
                Style="{StaticResource Title3}"
                HorizontalOptions="Center"
                Grid.Column="3" />
        </Grid>
        <ScrollView Grid.Row="1">
            <VerticalStackLayout 
                Margin="{StaticResource size160}"
                BindableLayout.ItemsSource="{Binding Sentences}"
                BindableLayout.ItemTemplateSelector="{StaticResource AnswerTemplateSelector}">
                <VerticalStackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding HideKeyboardCommand}" CommandParameter="{x:Reference Name=UserInputField}" />
                </VerticalStackLayout.GestureRecognizers>               

            </VerticalStackLayout>
            
        </ScrollView>

        <!-- Input -->
        <Grid RowDefinitions="Auto,Auto,Auto"
              ColumnDefinitions="*,Auto"
              x:Name="InputUI"
              Grid.Row="2"
              RowSpacing="{StaticResource size40}"
              Padding="{StaticResource size160}">
            <ScrollView Orientation="Horizontal" Grid.ColumnSpan="2">
                <VerticalStackLayout Spacing="{OnIdiom {StaticResource size320}, Phone={StaticResource size40}}">
                    <Label Text="{Binding Localize[ChooseAVocabularyWord]}" Style="{StaticResource Title3}"/>
                    <HorizontalStackLayout Spacing="{OnIdiom {StaticResource size320}, Phone={StaticResource size40}}"
                                        
                                        BindableLayout.ItemsSource="{Binding VocabBlocks}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate x:DataType="model:VocabularyWord">
                                <Button Text="{Binding TargetLanguageTerm}"
                                        Background="{StaticResource Gray200}"
                                        TextColor="{StaticResource Gray900}"
                                        FontSize="{OnIdiom 32, Phone=16}"
                                        Padding="{StaticResource size40}"
                                        MinimumHeightRequest="-1"
                                        VerticalOptions="Start"
                                        Command="{Binding UseVocabCommand, Source={RelativeSource AncestorType={x:Type lesson:WritingPageModel}}}"
                                        CommandParameter="{Binding TargetLanguageTerm}" />
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </HorizontalStackLayout>
                </VerticalStackLayout>
            </ScrollView>
            <c:FormField ControlTemplate="{StaticResource FormFieldTemplate}"
                         FieldLabel="{Binding Localize[WhatDoYouWantToSay]}"
                         Grid.Row="1"
                         Grid.Column="0">
                <Grid ColumnDefinitions="*,Auto"
                      ColumnSpacing="2">
                    <Entry Placeholder="{Binding Localize[UserInputPlaceholder]}"
                           Text="{Binding UserInput}"
                           x:Name="UserInputField"
                           FontSize="{OnIdiom 32, Phone=16}"
                           ReturnType="{Binding ShowMore, Converter={StaticResource BoolToReturnTypeConverter}}"
                           ReturnCommand="{Binding GradeMeCommand}"
                           toolkit:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference IMeanToSayField}"
                           >
                        <Entry.Keyboard>
                            <Keyboard x:FactoryMethod="Create">
                                <x:Arguments>
                                    <KeyboardFlags>Suggestions,Spellcheck</KeyboardFlags>
                                </x:Arguments>
                            </Keyboard>
                        </Entry.Keyboard>
                    </Entry>
                    <Button ImageSource="{mi:SegoeFluent Icon=Dictionary, IconSize={StaticResource IconSize}}"
                            BackgroundColor="Transparent"
                            TextColor="Black"
                            Padding="0" Margin="0"
                            VerticalOptions="Center"
                            HorizontalOptions="End"
                            Command="{Binding TranslateInputCommand}"
                            Grid.Column="1" />
                    <Button ImageSource="{mi:SegoeFluent Icon=Delete, IconSize={StaticResource IconSize}}"
                            BackgroundColor="Transparent"
                            TextColor="Black"
                            Padding="0" Margin="0"
                            VerticalOptions="Center"
                            Command="{Binding ClearInputCommand}"
                            Grid.Column="0"
                            HorizontalOptions="End" />
                </Grid>
            </c:FormField>
            <Button ImageSource="{mi:SegoeFluent Icon=More, IconSize={StaticResource IconSize}}"
                            BackgroundColor="Transparent"
                            TextColor="Black"
                            Padding="0" Margin="0"
                            VerticalOptions="Center"
                            Command="{Binding ToggleMoreCommand}"
                            Grid.Row="1"
                            Grid.Column="1"
                            HorizontalOptions="End" />
            <c:FormField ControlTemplate="{StaticResource FormFieldTemplate}"
                         Grid.Row="2"
                         Grid.ColumnSpan="2"
                         IsVisible="{Binding ShowMore}">
                <Entry Placeholder="What I mean to say is..."
                        Text="{Binding UserMeaning}"
                        x:Name="IMeanToSayField"
                        FontSize="{OnIdiom 32, Phone=16}"
                        ReturnType="Go"
                        toolkit:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference UserInputField}"
                        ReturnCommand="{Binding GradeMeCommand}">
                    
                </Entry>
            </c:FormField>
            
        </Grid>
        <!-- Busy Indicator -->
        <AbsoluteLayout x:Name="LoadingOverlay"
                        IsVisible="{Binding IsBusy}"
                        BackgroundColor="#80000000"
                        Grid.RowSpan="2">
            <Label Text="Thinking..."
                   FontSize="64"
                   AbsoluteLayout.LayoutFlags="PositionProportional"
                   AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize"
                   TextColor="{AppThemeBinding Dark={StaticResource LightOnDarkBackground}, Light={StaticResource DarkOnLightBackground}}" />
        </AbsoluteLayout>
    </Grid>
</ContentPage>

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.21 SR4.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

macOS
iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[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!

Closed similar issues:

• ScrollView with VerticalStackLayout and dynamically added child controls incorrectly renders on Android platform (iOS OK). (#14737), similarity score: 0.82
• Border has an almost animated resizing effect when first loaded. (IOS) (#21103), similarity score: 0.82
• Having Shell NavBar Visible shortens visible part of the page on the bottom (#14914), similarity score: 0.80
• ScrollView in Grid cell multiple issues on iOS, Android and WinUI. (#15076), similarity score: 0.80
• There is a lot of space between each data when nested collection view is implemented in .NET MAUI in iOS (#18476), similarity score: 0.80

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

[ninachen03]

@davidortinau I'm trying to reproduce this problem, but the appsetting file is missing from the repo provided. Could you provide it again?

[dotnet-policy-service]

Hi @davidortinau. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.