XamarinはRelativeLayoutが表示されないようにします

Question

かなり標準のXamarin forms tutorialsに従っています。私は本当にRelativeLayoutを動作させるために苦労しています。最終的に私はActivityIndi​​catorがMainContentのの上にオーバーレイしたい：私は= MainContentのコンテンツを設定すると

 BindingContext = new LoginViewModel(this); 
     Padding = new Thickness(20); 

     Title = "Login"; 

     var image = new Image 
     { 
      Source = ImageSource.FromFile("logo.png"), 
      HeightRequest = 50 
     }; 

     var label = new Label 
     { 
      Text = "...", 
      FontSize = 20, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 
     var errorLabel = new Label 
     { 
      Text = "", 
      TextColor = Color.Red, 
      FontSize = 20, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 

     var loginButton = new Button 
     { 
      Text = "Log In", 
      BackgroundColor = Color.Black, 
      TextColor = Color.White, 
      FontSize = 20, 
      HeightRequest = 50 
     }; 

     var loginEntry = new Entry 
     { 
      Placeholder = "Username" 
     }; 

     var passwordEntry = new Entry 
     { 
      Placeholder = "Password" 
     }; 

     var copywrite = new Label 
     { 
      Text = "© 2016", 
      FontSize = 15, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 

     var loadingIndicator = new ActivityIndicator 
     { 
      BackgroundColor = Color.Blue, 
      IsVisible = true 
     }; 

     ... 

     var topLayer = new StackLayout 
     { 
      Spacing = 10, 
      Children = { image, label, loginEntry, passwordEntry, loginButton, errorLabel }, 
      VerticalOptions = LayoutOptions.Start 
     }; 

     var bottomLayer = new StackLayout 
     {    
      Spacing = 10, 
      Children = { copywrite }, 
      VerticalOptions = LayoutOptions.End 
     }; 

     var mainContent = new StackLayout 
     { 
      Children = 
      { 
       topLayer, 
       new StackLayout 
       { 
        VerticalOptions = LayoutOptions.CenterAndExpand, 
       }, 
       bottomLayer 
      }, 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      BackgroundColor = Color.Green 
     }; 

     var r = new RelativeLayout() 
     { 
      BackgroundColor = Color.Pink 
     }; 
     r.Children.Add(mainContent, 
      Constraint.RelativeToParent((parent) => 
      { 
       return parent.Width; 
      }), 
      Constraint.RelativeToParent((parent) => 
      { 
       return parent.Height; 
      }) 
     ); 

     Content = r; 

私はすべてがうまく見ますが、上記のコードで私は白い画面を取得します。私はhereを探しています。

私はこれしようとすると：

 var overlay = new AbsoluteLayout() 
     { 
      BackgroundColor = Color.Pink 
     }; 
     AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.PositionProportional); 
     AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)); 
     AbsoluteLayout.SetLayoutFlags(loadingIndicator, AbsoluteLayoutFlags.PositionProportional); 
     AbsoluteLayout.SetLayoutBounds(loadingIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)); 
     overlay.Children.Add(mainContent); 
     overlay.Children.Add(loadingIndicator); 

     Content = overlay; 

私はグリーンとピンクの景色を見ることができますが、彼らは同様に（重ねされるのとは対照的に）積層してもよい - の内側だけでなく、私が見ることができないアクティビティインジケータをピンクアブソリュートレイアウト。

Answer 1

RelativeLayoutの場合、呼び出すAddメソッドは、幅と高さではなく、XとYの制約を設定しています。追加のバリアントのパラメータの順序は次のとおりです。

1. 子ビュー
2. X制約
3. Y制約
4. 幅制約
5. 高さの制約

すべての制約があることでオプション。

が明示的にこのような何か、画面全体にそれを配置するには：

AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.All); 
    AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, 1f, 1f)); 

これは、明示的にMainContentのであることを指定します。

r.Children.Add(mainContent, 
    Constraint.Constant(0), 
    Constraint.Constant(0), 
    Constraint.RelativeToParent((parent) => 
    { 
     return parent.Width; 
    }), 
    Constraint.RelativeToParent((parent) => 
    { 
     return parent.Height; 
    }) 
); 

AbsoluteLayoutの場合を、制約のわずかに異なるセットを試してみてくださいmainContentの実際のレイアウトサイズに頼るのではなく、AbsoluteLayout全体を占有します。