Frame gets duplicated when rotating the screen

Question

I need to add a Frame to a Xamarin Forms grid inside a view, but I'm struggling with a bug.

Every time I launch the application in portrait mode and then switch to landscape mode, the frame gets duplicated and another white area appears on screen, as soon as I switch back to portrait the second frame disappears. The application works fine if I launch it in landscape and then rotate to portrait and back.

This is what I see in portrait mode: This is what I see when I switch to landscape mode: The second frame touchwise is transparent, if I tap over its area it's like touching the content below and, in fact, if I set the background color to transparent the bug disappears. If I add some content to the frame, just the frame is duplicated, while the content appears just in the first one.

This is the code of the grid:

<Grid HorizontalOptions="FillAndExpand"
      VerticalOptions="FillAndExpand"
      Padding="15">
    <Grid.RowDefinitions>
        <RowDefinition Height="192"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="78"/>
    </Grid.ColumnDefinitions>


    <Frame
        Grid.Column="1"
        Grid.Row="0"
        BackgroundColor="White"
        Padding="5,12,5,12"
        CornerRadius="24"
        Margin="15">
    </Frame>

</Grid>

I tried changing the Row and Column height and width, to remove the content of the frame, to remove padding, margin and corner radius and to remove grid and column row for the frame, but without any success. If I substitute the frame with a StackLayout I don't have this problem.

I'm using Xamarin Forms 4.5.0.356 and testing the app on an iPad. Can anyone help me solve this or suggest an alternative to display a box like the one in the image with radius corners without using a Frame?

MontresorXPL MontresorXPL · Accepted Answer · 2020-12-22T17:32:27

try adding this line (obviously changed to suite your code)

    [Activity(Label = "Menu", Icon = "@drawable/Icon", ConfigurationChanges = 
    Android.Content.PM.ConfigChanges.Orientation | 
    Android.Content.PM.ConfigChanges.ScreenSize)]

from this snippet::

[Activity (Label = "CodeLayoutActivity", 
ConfigurationChanges=Android.Content.PM.ConfigChanges.Orientation | 
Android.Content.PM.ConfigChanges.ScreenSize)]
public class CodeLayoutActivity : Activity
{
  TextView _tv;
  RelativeLayout.LayoutParams _layoutParamsPortrait;
  RelativeLayout.LayoutParams _layoutParamsLandscape;
            
  protected override void OnCreate (Bundle bundle)
  {
    // create a layout
   // set layout parameters
// get the initial orientation

    // create portrait and landscape layout for the TextView
    _layoutParamsPortrait = new RelativeLayout.LayoutParams 
(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.WrapContent);
            
    _layoutParamsLandscape = new RelativeLayout.LayoutParams 
(ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.WrapContent);
    _layoutParamsLandscape.LeftMargin = 100;
    _layoutParamsLandscape.TopMargin = 100;
                    
    _tv = new TextView (this);
                    
    if (surfaceOrientation == SurfaceOrientation.Rotation0 || surfaceOrientation == 
SurfaceOrientation.Rotation180) {
      _tv.LayoutParameters = _layoutParamsPortrait;
    } else {
      _tv.LayoutParameters = _layoutParamsLandscape;
    }
                    
    _tv.Text = "Programmatic layout";
    rl.AddView (_tv);
    SetContentView (rl);
  }
            
   public override void OnConfigurationChanged (Android.Content.Res.Configuration 
newConfig)
   {
    base.OnConfigurationChanged (newConfig);
                    
    if (newConfig.Orientation == Android.Content.Res.Orientation.Portrait) {
      _tv.LayoutParameters = _layoutParamsPortrait;
      _tv.Text = "Changed to portrait";
    } else if (newConfig.Orientation == Android.Content.Res.Orientation.Landscape) {
      _tv.LayoutParameters = _layoutParamsLandscape;
      _tv.Text = "Changed to landscape";
    }
  }
}

and from this website: https://docs.microsoft.com/en-us/xamarin/android/app-fundamentals/handling-rotation

or take a look at this question: Layout duplicating itself on screen rotation

Frame gets duplicated when rotating the screen

1 Answers