如何使用 Xamarin Forms 将 BoxView 相对于另一个 BoxView 居中答案

【问题标题】：How to Center a BoxView relative to another BoxView using Xamarin Forms如何使用 Xamarin Forms 将 BoxView 相对于另一个 BoxView 居中
【发布时间】：2016-11-29 16:09:02
【问题描述】：

我是一名 iOS 开发人员，正在学习 Xamarin Forms。

我正在尝试将 BoxView 相对于另一个 BoxView 居中。这两个盒子就像兄弟姐妹一样，在RelativeLayout 上添加。第二个盒子的宽度和高度是第一个盒子的一半。我如何做到这一点？

现在，我可以通过将HeighConstraint 和WidthConstraint 与Factor 相加，使第二个框成为第一个框的一半。但我不确定如何集中这两种观点。在 iOS 中，我可以通过添加两个约束轻松做到这一点 - 中心到 X 和中心到 Y。但我在 Xamarin Forms 中找不到类似的东西。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PhoneWord.ExplorePage">
    <ContentPage.Content>
        <RelativeLayout>
            <BoxView
                x:Name="GrayBox"
                Color="Gray"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}">
            </BoxView>
            <BoxView
                BackgroundColor="Yellow"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=X, Constant=100}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Y, Constant=50}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Height, Factor=0.5}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Width, Factor=0.5}">
            </BoxView>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

【问题讨论】：

标签： xamarin xamarin.ios xamarin.forms

【解决方案1】：

我想出了如何做到这一点。对于XConstraint，我必须使用Factor 和Property X。

由于我的高度是第一个框的 0.5，因此我必须使用 0.25 因子 ((1-0.5)/2)。如果我将高度增加到 0.75，我必须使用因数 0.125 ((1-0.75)/2)

    <?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PhoneWord.ExplorePage">
    <ContentPage.Content>
        <RelativeLayout>
            <BoxView
                x:Name="GrayBox"
                Color="Gray"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}">
            </BoxView>
            <BoxView
                BackgroundColor="Red"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Width, Factor=0.25}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Height, Factor=0.25}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Height, Factor=0.5}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=GrayBox, Property=Width, Factor=0.5}">
            </BoxView>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

【讨论】：