Xamarin.Forms Universal App 2デバイスのサイズに依存しないカラムレイアウト

Question

普遍的なアプリケーションを作成するには、Xamarin.Formsの新機能です。実際には、大きなネイティブアプリをXamarin.Formsテクノロジに移行する必要があります。

デバイスサイズに依存しない2列レイアウト（登録ページなど）を作成する必要があります。

私はRelativeLayoutを使用して同じことを達成しようとしています。そのためのコードは以下の通りです：

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage"> 
    <ContentPage.Content> 
     <RelativeLayout> 
      <StackLayout x:Name="mainLayout" BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}" 
       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=0}"> 
       <RelativeLayout> 
        <BoxView x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30" 
         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}" 
         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" 
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.48, Constant=0}" 
        /> 
        <BoxView BackgroundColor="Green" HeightRequest="30" 
         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=10}" 
         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Y, Factor=1, Constant=0}" 
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=0}" 
        /> 
       </RelativeLayout> 

      </StackLayout> 
     </RelativeLayout> 
    </ContentPage.Content> 
</ContentPage> 

示唆してくださいこれは、2列のレイアウトを達成するための正しい方法であるか、他の正しい方法があります。

Answer 1

グリッドを使用します。グリッドには、必要な数の列または行を配置することができ、内容や使用可能な領域のサイズを変更できます。あなたの場合、2つの星型サイズの列を持つガードを持つことができます。これは、利用可能なスペースを満たす2つの等しい幅の列を提供します。あなたが別のグリッドについて読むことができます

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage"> 
    <ContentPage.Content> 
     <Grid BackgroundColor="Maroon"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <BoxView Grid.Column="0" x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"/> 
      <BoxView Grid.Column="1" BackgroundColor="Green" HeightRequest="30"/> 
     </Grid> 
    </ContentPage.Content> 
</ContentPage> 

がここサイズ：

​​