Xamarin.Forms: how to focus your eyes with Relative Layout? `Width` and` Height` return -1

Question

When you try to use the Height and Width properties of a control in Xamarin.Forms, both return -1, and this causes the Relative Layout to be displayed off-center on the screen.

 var mainLayout = new RelativeLayout(); //Add the Switch to the center of the screen mainLayout.Children.Add(mySwitch, Constraint.RelativeToParent(parent => parent.Width / 2 - mySwitch.Width / 2), Constraint.RelativeToParent(parent => parent.Height / 2 - mySwitch.Height / 2)); //Add a Label below the switch mainLayout.Children.Add(switchLabel, Constraint.RelativeToParent(parent => parent.Width / 2 - switchLabel.Width / 2), Constraint.RelativeToView(mySwitch, (parent, view) => view.Y + mySwitch.Height + 10)); Content = mainLayout; 

Answer 1

Why does Xamarin.Forms return -1 for Height and Width ?

Xamarin.Forms returns -1 as the default value for these properties and remains -1 until Xamarin.Forms creates its own control, such as UIButton, and adds this own control to the layout.

From this link you can see the source code of Xamarin.Forms, returning -1 as the default value: https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/VisualElement.cs

The best way to use relative layouts to limit viewing

Option 1. Local functions (requires C # 7.0 or higher)

Use a local function to dynamically obtain the Width and Height properties.

 var mainLayout = new RelativeLayout(); //Add the Switch to the center of the screen mainLayout.Children.Add(mySwitch, Constraint.RelativeToParent(parent => parent.Width / 2 - getSwitchWidth(parent)/ 2), Constraint.RelativeToParent(parent => parent.Height / 2 - getSwitchHeight(parent) / 2)); //Add a Label below the switch mainLayout.Children.Add(switchLabel, Constraint.RelativeToParent(parent => parent.Width / 2 - getLabelWidth(parent) / 2), Constraint.RelativeToView(mySwitch, (parent, view) => view.Y + getSwitchHeight(parent) + 10)); Content = mainLayout; double getSwitchWidth(RelativeLayout parent) => mySwitch.Measure(parent.Width, parent.Height).Request.Width; double getSwitchHeight(RelativeLayout parent) => mySwitch.Measure(parent.Width, parent.Height).Request.Height; double getLabelWidth(RelativeLayout parent) => switchLabel.Measure(parent.Width, parent.Height).Request.Width; double getLabelHeight(RelativeLayout parent) => switchLabel.Measure(parent.Width, parent.Height).Request.Height; 

Option 2: Func<RelativeLayout, double>

Use Func to dynamically get Width and Height properties

 var mainLayout = new RelativeLayout(); Func<RelativeLayout, double> getSwitchWidth = (parent) => mySwitch.Measure(parent.Width, parent.Height).Request.Width; Func<RelativeLayout, double> getSwitchHeight = (parent) => mySwitch.Measure(parent.Width, parent.Height).Request.Height; Func<RelativeLayout, double> getLabelWidth = (parent) => switchLabel.Measure(parent.Width, parent.Height).Request.Width; Func<RelativeLayout, double> getLabelHeight = (parent) => switchLabel.Measure(parent.Width, parent.Height).Request.Height; //Add the Switch to the center of the screen mainLayout.Children.Add(mySwitch, Constraint.RelativeToParent(parent => parent.Width / 2 - getSwitchWidth(parent)/ 2), Constraint.RelativeToParent(parent => parent.Height / 2 - getSwitchHeight(parent) / 2)); //Add a Label below the switch mainLayout.Children.Add(switchLabel, Constraint.RelativeToParent(parent => parent.Width / 2 - getLabelWidth(parent) / 2), Constraint.RelativeToView(mySwitch, (parent, view) => view.Y + getSwitchHeight(parent) + 10)); Content = mainLayout; 

Thanks @BrewMate for teaching me this trick!