Xamarin.Forms:如何使用相对布局将视图居中?`Width` 和 `Height` 返回 -1 [英] Xamarin.Forms: How to center views using Relative Layout? `Width` and `Height` return -1

问题描述

当尝试在 Xamarin.Forms 中使用控件的 Height 和 Width 属性时，两者都返回 -1，这会导致相对布局偏心在屏幕上.

var mainLayout = new RelativeLayout();//将Switch添加到屏幕中央mainLayout.Children.Add(mySwitch,Constraint.RelativeToParent(parent => parent.Width/2 - mySwitch.Width/2),Constraint.RelativeToParent(parent => parent.Height/2 - mySwitch.Height/2));//在开关下方添加一个标签mainLayout.Children.Add(switchLabel,Constraint.RelativeToParent(parent => parent.Width/2 - switchLabel.Width/2),Constraint.RelativeToView(mySwitch, (parent, view) => view.Y + mySwitch.Height + 10));内容 = mainLayout;

解决方案

为什么 Xamarin.Forms 为 Height 和 Width 返回 -1?

Xamarin.Forms 返回 -1 作为这些属性的默认值，并且它保持 -1 直到 Xamarin.Forms 创建本机控件，例如UIButton，并将该原生控件添加到布局中.

在此链接中，您可以看到返回 -1 作为默认值的 Xamarin.Forms 源代码:

感谢 @BrewMate 教我这个技巧！

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;

解决方案

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;

Thanks to @BrewMate for teaching me this trick!

这篇关于Xamarin.Forms:如何使用相对布局将视图居中?`Width` 和 `Height` 返回 -1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！