Xamarin.Forms Universal App 2 Colonne Mise en page indépendante de la taille de l'appareil

Question

Je suis très nouveau sur Xamarin.Forms pour créer une application universelle. En fait, je dois migrer une grande application native vers la technologie Xamarin.Forms.

Je dois créer une disposition à deux colonnes (par exemple la page d'enregistrement) qui est indépendante de la taille du périphérique. J'essaye de réaliser la même chose en utilisant RelativeLayout. Code pour le même est ci-dessous:

<?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> 

S'il vous plaît Suggest est-ce la bonne façon de réaliser la mise en page à deux colonnes ou est-il une autre façon correcte.

Answer 1

Utilisez une grille. Les grilles peuvent contenir autant de colonnes ou de lignes que vous le souhaitez et vous pouvez les dimensionner en fonction de leur contenu ou de l'espace disponible. Dans votre cas, vous pouvez avoir un gird avec deux colonnes de taille étoile - cela donne deux colonnes de largeur égale qui remplissent l'espace disponible, essentiellement deux colonnes chaque moitié de la largeur de l'écran.

<?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> 

Vous pouvez lire sur les différentes tailles de grille ici:

https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/