如何使用Xamarin Forms將BoxView相對於另一BoxView居中

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，我必須使用面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>