Xamarin Formulaires - Réaliser 2 colonnes avec des paires étiquette/valeur

Question

Est-il possible de réaliser la mise en page suivante dans Xamarin Forms:

Quelques notes:

1. Idéalement je vous voulez qu'une valeur puisse être envelopper sur 2 lignes - auquel cas la ligne entière deviendra plus grande (ligne signifiant étiquette 1, valeur 1, étiquette 2, valeur 2).
2. La grille() a known issues with word wrap.

Answer 1

Je ne sais pas pourquoi vous pensez que la grille a des problèmes d'emballage de mots. J'ai utilisé la grille dans plusieurs de mes applications exactement pour ce scénario. Voici le code.

<Grid 
    ColumnSpacing="10" 
    RowSpacing="10" 
    HorizontalOptions="FillAndExpand" 
    VerticalOptions="Start"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="50"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <Label 
     Grid.Row="0" 
     Grid.Column="0" 
     Text="label 1:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="0" 
     Grid.Column="1" 
     Text="value 1"/> 

    <Label 
     Grid.Row="0" 
     Grid.Column="3" 
     Text="label 2:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="0" 
     Grid.Column="4" 
     Text="value 2 is very very infinitely long and can potentially wrap to many many lines"/> 

    <Label 
     Grid.Row="1" 
     Grid.Column="0" 
     Text="label 3:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="1" 
     Grid.Column="1" 
     Text="value 3"/> 

    <Label 
     Grid.Row="1" 
     Grid.Column="3" 
     Text="label 4:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="1" 
     Grid.Column="4" 
     Text="value 4 goes here"/> 

    <Label 
     Grid.Row="2" 
     Grid.Column="0" 
     Text="label 5:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="2" 
     Grid.Column="1" 
     Text="value 5"/> 

    <Label 
     Grid.Row="2" 
     Grid.Column="3" 
     Text="label 6:" 
     FontAttributes="Bold" 
     HorizontalOptions="Start"/> 
    <Label 
     Grid.Row="2" 
     Grid.Column="4" 
     Text="value 6 here"/> 

    </Grid> 

Et voici des captures d'écran pour iOS et Android