比例尺寸和定位

如您所见，ChessboardDynamic程序根据AbsoluteLayout本身的大小重新定位BoxView子项并调整其大小。换句话说，每个孩子的大小和位置与容器的大小成比例。有趣的是，AbsoluteLayout通常就是这种情况，如果AbsoluteLayout自动适应这种情况可能会很好。

它确实！

AbsoluteLayout定义了第二个附加的可绑定属性，名为LayoutFlagsProperty，还有两个静态方法，名为SetLayoutFlags和GetLayoutFlags。设置此附加的可绑定属性允许您指定与AbsoluteLayout的大小成比例的子位置坐标或大小（或两者）。在布置孩子时，AbsoluteLayout会对这些孩子进行扩展

适当的坐标和大小。

您可以选择此功能如何与AbsoluteLayoutFlags枚举的一个或多个成员一起使用：

None (equal to 0)

XProportional (1)

YProportional (2)

PositionProportional (3)

WidthProportional (4)

HeightProportional (8)

SizeProportional (12)

All (xFFFFFFFF)

您可以使用两个静态方法在AbsoluteLayout的子项上设置比例位置和大小：

AbsoluteLayout.SetLayoutBounds(view, rect);AbsoluteLayout.SetLayoutFlags(view, AbsoluteLayoutFlags.All);

或者，您可以在接受AbsoluteLayoutFlags枚举成员的Children集合上使用Add方法的一个版本：

absoluteLayout.Children.Add(view, rect, AbsoluteLayoutFlags.All);

例如，如果使用SizeProportional标志并将子项的宽度设置为0.25，将高度设置为0.10，则子项将是AbsoluteLayout宽度的四分之一和高度的十分之一。很容易。

PositionProportional标志是类似的，但它考虑到孩子的大小：位置（0,0）将孩子放在左上角，位置（1,1）将孩子放在较低的位置 - 右上角和（0.5,0.5）的位置使孩子在AbsoluteLayout中居中。考虑到孩子的大小对于某些任务来说是很好的 - 例如将孩子置于AbsoluteLayout中心或者将其显示在右边或底边 - 但对其他任务来说有点尴尬。

这是ChessboardProportional。定位和大小调整的大部分工作已经移回构造函数。 SizeChanged处理程序现在仅通过将AbsoluteLayout的WidthRequest和HeightRequest属性设置为ContentView的宽度和高度的最小值来维持整体宽高比。删除SizeChanged处理，棋盘扩展到页面大小而不是填充。

public class ChessboardProportionalPage : ContentPage{    AbsoluteLayout absoluteLayout;    public ChessboardProportionalPage()    {        absoluteLayout = new AbsoluteLayout        {            BackgroundColor = Color.FromRgb(240, 220, 130),            HorizontalOptions = LayoutOptions.Center,            VerticalOptions = LayoutOptions.Center        };        for (int row = 0; row < 8; row++)        {            for (int col = 0; col < 8; col++)            {                // Skip every other square.                if (((row ^ col) & 1) == 0)                    continue;                BoxView boxView = new BoxView                {                    Color = Color.FromRgb(0, 64, 0)                };                Rectangle rect = new Rectangle(col / 7.0, // x                                               row / 7.0, // y                                               1 / 8.0, // width                                               1 / 8.0); // height                absoluteLayout.Children.Add(boxView, rect, AbsoluteLayoutFlags.All);            }        }        ContentView contentView = new ContentView        {            Content = absoluteLayout        };        contentView.SizeChanged += OnContentViewSizeChanged;        this.Padding = new Thickness(5, Device.OnPlatform(25, 5, 5), 5, 5);         this.Content = contentView;    }    void OnContentViewSizeChanged(object sender, EventArgs args)    {        ContentView contentView = (ContentView)sender;        double boardSize = Math.Min(contentView.Width, contentView.Height);        absoluteLayout.WidthRequest = boardSize;        absoluteLayout.HeightRequest = boardSize;    }}

屏幕看起来与ChessboardDynamic程序相同。

每个BoxView都使用以下代码添加到AbsoluteLayout。所有分母都是浮点值，因此除法的结果将转换为double：

Rectangle rect = new Rectangle(col / 7.0, // x                               row / 7.0, // y                               1 / 8.0, // width                               1 / 8.0); // heightabsoluteLayout.Children.Add(boxView, rect, AbsoluteLayoutFlags.All);

宽度和高度始终等于AbsoluteLayout的宽度和高度的八分之一。这很清楚。但是对于相对x和y坐标，row和col变量除以7（而不是8）。 for循环中的row和col变量的范围是0到7.行和col值0对应于left或top，但row和col值7必须映射到x和y坐标1以将子项定位到右边或底边。

如果您认为可能需要一些可靠的规则来获得比例坐标，请继续阅读。