Resume on Android breaks page layout

nblewnblew Member ✭✭

I am creating an app that revolves around launching a different app, then eventually returning to my app.
The issue I'm having is after the 2nd or 3rd resume, the layout of the page breaks (somehow) and I am left with buttons that don't work and an ugly page.
The first time the user resumes the app it seems to work fine.

This is what the page looks like (this is after the first resume):

And here's what it looks like after 2 or 3 resumes:

I've verified that OnResume gets called in the main page, and I've tried using InvalidateMeasure with no success (doing a hot-reload while connected to the debugger fixes the problem)

For the stack, I'm using a NavigationPage layout and this is the second or third page in. The "popup" is simply a grid that overlays the entire screen with a black background and opacity of 0.8, and then another grid with a white background inside, both horizontal and vertical options are "Center", but no sizing calculations or constraints. Inside that grid is a StackLayout that has the rest of the content in it

I also don't want to specify the size of the background, as it could be a different size image and can look different on different devices/orientations.

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited February 12

    I couldn't reproduce this question so far, could you please post the code of the popup or a basic demo so that we can test on our side?

  • nblewnblew Member ✭✭

    Working on it, but can't get it to repro exactly the way I found it.

    My thinking right now is that it has to do with fetching the image, which in turn causes the whole Grid to resize. It seems the size of the grid it's taking when it errors out is the same size if the photo element was not visible/0px.

    It's also interesting that when this happens, any of the controls that still are inside that white box are clickable, but any controls outside of the white box with this bug are not interactable.

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post the layout code of the popup so that we can try to reproduce this question on our side?

  • nblewnblew Member ✭✭

    Here's the direct code from my app:

    <Grid x:Name="ConfirmGrid" IsVisible="{Binding IsRequestingAnswer}">
                    <Grid BackgroundColor="Black"
                          Opacity="0.8" />
                    <Grid VerticalOptions="Center"
                          HorizontalOptions="Center"
                          BackgroundColor="White">
                        <StackLayout HorizontalOptions="Center"
                                     VerticalOptions="FillAndExpand"
                                     Orientation="Vertical"
                                     Padding="8,16">
                            <Label Text="The anime was"
                                   HorizontalOptions="Center"
                                   Margin="4" />
                            <Label Text="{Binding QuizGame.CurrentSegment.Anime.Title}"
                                   HorizontalOptions="Center"
                                   FontSize="16"
                                   FontAttributes="Bold"
                                   LineBreakMode="WordWrap"
                                   Margin="4,4,4,8" />
    
                            <Image Source="{Binding QuizGame.CurrentSegment.Anime.PosterImageUrl}" Margin="4,4,4,12" />
    
                            <StackLayout HorizontalOptions="Center"
                                         Orientation="Horizontal">
                                <buttons:SfButton Text="Correct"
                                                  Margin="8"
                                                  Command="{Binding AnsweredCorrectCommand}"
                                                  WidthRequest="140"
                                                  Clicked="ConfirmButton_Clicked" />
                                <buttons:SfButton Text="Incorrect"
                                                  Margin="8"
                                                  Command="{Binding AnsweredIncorrectCommand}"
                                                  WidthRequest="140"
                                                  Clicked="ConfirmButton_Clicked" />
                            </StackLayout>
    
                            <Label Text="The video was not correct"
                                   HorizontalOptions="Center"
                                   Margin="8"
                                   TextColor="DarkBlue">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding IncorrectVideoCommand}" />
                                </Label.GestureRecognizers>
                            </Label>
    
                            <Label Text="View on Kitsu"
                                   HorizontalOptions="Center"
                                   Margin="8"
                                   TextColor="DarkBlue">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding ViewOnKitsuCommand}" />
                                </Label.GestureRecognizers>
                            </Label>
                            <!--Add link to do something if the video was incorrect-->
    
                        </StackLayout>
                    </Grid>
                </Grid>
    

    And Code-Behind method

    async void ConfirmButton_Clicked(object sender, System.EventArgs e)
    {
       await ConfirmGrid.FadeTo(0, 150, Easing.CubicOut);
       _ViewModel.IsRequestingAnswer = false;
    
       await Task.Delay(500);
        ConfirmGrid.Opacity = 1; // Reset the fade-out animation so it'll appear next time we set IsRequestingAnswer to True
    }
    

    And you can assume that the ViewModel has the IsRequestingAnswer property with INotifyPropertyChanged properly hooked up.

    I'll post the sample app in a minute, but let me know if there's anything else you'd like to look at.

  • jezhjezh Member, Xamarin Team Xamurai

    Have you tried to wrap the Grid into a parent control(e.g. StackLayout),and set property Padding for it.
    I created a simple demo, and it worked well.
    For example:

         <StackLayout Padding="5"  >
            <Grid x:Name="ConfirmGrid" Padding="6" >
                <Grid BackgroundColor="Black"
                          Opacity="0.8" />
                <Grid VerticalOptions="Center"
                          HorizontalOptions="Center"
                          BackgroundColor="White">
                    <StackLayout HorizontalOptions="Center"
                                     VerticalOptions="FillAndExpand"
                                     Orientation="Vertical"
                                     Padding="8,16">
                        <Label Text="The anime was"
                                   HorizontalOptions="Center"
                                   Margin="4" />
                        <Label Text="Title"
                                   HorizontalOptions="Center"
                                   FontSize="16"
                                   FontAttributes="Bold"
                                   LineBreakMode="WordWrap"
                                   Margin="4,4,4,8" />
    
                        <Image Source="{Binding QuizGame.CurrentSegment.Anime.PosterImageUrl}" Margin="4,4,4,12" />
    
                        <StackLayout HorizontalOptions="Center"
                                         Orientation="Horizontal">
                            <Button Text="Correct"
                                                  Margin="8"
                                                  WidthRequest="140"
                                                  />
                            <Button Text="Incorrect"
                                                  Margin="8"
                                                  WidthRequest="140"
                                                   />
                        </StackLayout>
    
                        <Label Text="The video was not correct"
                                   HorizontalOptions="Center"
                                   Margin="8"
                                   TextColor="DarkBlue">
    
                        </Label>
    
                        <Label Text="View on Kitsu"
                                   HorizontalOptions="Center"
                                   Margin="8"
                                   TextColor="DarkBlue">
                        </Label>
                        <!--Add link to do something if the video was incorrect-->
    
                    </StackLayout>
                </Grid>
            </Grid>
        </StackLayout>
    
  • nblewnblew Member ✭✭

    Thanks for the reply. Appologies as I don't think I gave you the full context. The XAML code I gave you above is within another Grid, that has lots of content on the page itself. The problem with a StackLayout is that it is ever-expanding to whatever its content is, while a Grid will fill whatever its parent is. I want the "ConfirmGrid" to fill the parent grid in order to display that "Opacity" overlay to make it look like the background is grayed out.

    Here is an example repo with similar code to the one I have in my main repo (that I unfortunately can't share at the moment). You can see what I mean by "dialog" in here (as well as loading different sizes). Unfortunately I haven't been able to get this example to reproduce my issue yet.

    https://github.com/nolanblew/XamarinIssue177739

Sign In or Register to comment.