Xamarin形式RelativeLayout不出現

Question

我正在遵循一些相當標準Xamarin forms tutorials，我真的很努力使RelativeLayout工作。最後，我想有一個ActivityIndi​​cator覆蓋在搜索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; 

當我設置內容=搜索Maincontent我看到的一切都很好，但與上面的代碼我得到一個白色的屏幕。我一直在尋找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. Ÿ約束
4. 寬度約束
5. 高度約束

與所有約束條件是可選的。

要明確地將其放置在整個屏幕上，做這樣的事情：

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

對於AbsoluteLayout，嘗試一套略有不同的約束：

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

這明確規定了搜索Maincontent是佔用整個AbsoluteLayout而不是依賴mainContent的實際佈局大小。