When trying to use the Height
and Width
properties of a control in Xamarin.Forms, both return -1, and it causes the Relative Layout to appear off-centered 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;
Height
and Width
?Xamarin.Forms returns -1 as the default value for these properties, and it remains -1 until Xamarin.Forms creates the native control, e.g. UIButton, and adds that native control to the layout.
In this link, you can see the Xamarin.Forms source code returning -1
as the default value:
https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Core/VisualElement.cs
Use a Local Function to dynamically retrieve 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 - getWidth(parent, mySwitch)/ 2),
Constraint.RelativeToParent(parent => parent.Height / 2 - getHeight(parent, mySwitch) / 2));
//Add a Label below the switch
mainLayout.Children.Add(switchLabel,
Constraint.RelativeToParent(parent => parent.Width / 2 - getWidth(parent, switchLabel) / 2),
Constraint.RelativeToView(mySwitch, (parent, view) => view.Y + getHeight(parent, mySwitch) + 10));
Content = mainLayout;
static double getWidth(RelativeLayout parent, View view) => view?.Measure(parent.Width, parent.Height).Request.Width ?? -1;
static double getHeight(RelativeLayout parent, View view) => view?.Measure(parent.Width, parent.Height).Request.Height ?? -1;
Func<RelativeLayout, double>
Use a Func
to dynamically retrieve the 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 to @BrewMate for teaching me this trick!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With