10

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;

enter image description here

1 Answer 1

21

Why does Xamarin.Forms return -1 for 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

Best Way to Use Relative Layouts to Constrain Views

Option 1: Local Functions (Requires C# 7.0 or higher)

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;

Option 2: 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;

enter image description here

Thanks to @BrewMate for teaching me this trick!

4
  • 2
    This is also great for centering Labels containing dynamic text! As the text increases/decreases in size, the Relative Layout will automatically recalculate its width and keep the Label centered! Commented Dec 3, 2016 at 0:03
  • The answer by CaptainXamtastic in the Xamarin Forms also does a great job explaining this: forums.xamarin.com/discussion/22902/… Commented Dec 14, 2016 at 6:44
  • 30
    Is there a way to do this in XAML? Commented May 4, 2017 at 20:16
  • 2
    How can I do this in xaml ? Thank you !
    – CarLoOSX
    Commented Mar 22, 2018 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.