Question

我是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>

Answer 1

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

由于我的身高是第一个盒子的0.5，我必须使用0.25因子（（1-0.5）/ 2）。如果我将高度增加到0.75，我必须使用facor 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>

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

1 个答案: