Add a Layout on Orientation change in Xamarin.Forms

Question

What I need to achieve is, Adding a Layout to the existing page on Changing the screen from Portrait to Landscape. I have managed to detect orientation change using void OnSizeAllocated(double width, double height) . But I cannot add a layout on this event.

My sample C# Code is

   public class MyLayoutView : ContentPage
   {
      StackLayout portraitcontent = null;
      StackLayout landscapecontent = null;
      StackLayout footer = null;

   public MyLayoutView ()
    {

    portraitcontent = new StackLayout ();
    landscapecontent = new StackLayout ();
    footer = new StackLayout ();

    this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
    this.BackgroundColor = Color.FromHex ("#ffffff");
    this.Content = new StackLayout
        {
            Children =
            {
                portraitcontent ,
                landscapecontent ,
                footer 
            }
            };
         }
   }

OnSizeAllocated Method

   protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);

        if (width < height) {
            // In Portrait
            portraitcontent .IsVisible = true;
            landscapecontent.IsVisible = false;
            Debug.WriteLine ("Application Is in portrait");
        } else {
            // In Landscape
            portraitcontent .IsVisible = false;
            landscapecontent.IsVisible = true;

            landscapecontent.Children.Clear ();

            Label LandscapeLabel= new Label
            {
              Text = "<Each Time Text Changes>",
              HorizontalOptions = LayoutOptions.StartAndExpand,
              TextColor=Xamarin.Forms.Color.FromHex("#000000")
            };

            landscapecontent.Children.Add(LandscapeLabel); 

            Debug.WriteLine ("Application Is in Landscape");
        }
    }

It throws cannot modify the collection while reenterancy is blocked error. I need to add a new label in stacklayout each time when orientation changes. How can I achieve it in a proper way??

Thanks in advance

Answer 1

On Size allocated is invoked multiple times when orientation change. I think you have to do more validations like checking the number of chidren to avoid duplication of views.

    if(landscapecontent.Children.Count>1)
     { 
       //Don't add any views
     }

As long as I tried there is no event handler for rotation. Itz kind of hack in the code to change views when orientation changes.

Even though you can use the accepted answer here.. Hope it serves your purpose..