Выравнивание элементов Xamarin в представлении списка

Question

Я использую следующий xaml в формах xamrin, чтобы создать страницу сведений о заказе со списком заказов в подсписке, однако у меня возникли трудности с выравниванием элементов списка.

<ContentPage.Content>
  <ScrollView>
    <StackLayout Spacing="2">
         <Label Text="Order Number:"></Label>
          <Label Text="{Binding  Item.SopOrderNumber}" 
           LineBreakMode="NoWrap" 
           FontSize="20" />
            <Label Text="Phone Number:" FontSize="20" ></Label>
            <Label Text="{Binding  Item.TelephoneNumber}"/>
            <Button Command="{Binding SubmitCommand}"  Text="Click To Call"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" /> 
            <Label Text="{Binding  Item.CustomerName}" 
                            LineBreakMode="NoWrap" 
                           FontSize="20"  />                                        
            <Label Text="Order Status"                         
            HorizontalOptions="StartAndExpand" />              
            <Picker x:Name="picker" Title="Order Status">
                <Picker.ItemsSource >
                    <x:Array Type="{x:Type x:String}">
                        <x:String>Delivered</x:String>
                        <x:String>Damaged</x:String>
                        <x:String>Missing</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </Picker> 

            <Label Text="Order Details" FontSize="Large"></Label>
            <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
                    <ListView.ItemTemplate >
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                <StackLayout Orientation="Horizontal" Padding="10" Spacing="15">
                                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                                </StackLayout>

                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <Label Text="Notes"                           
            HorizontalOptions="StartAndExpand"             
               />
            <Editor x:Name="txtNotes"
                    VerticalOptions="FillAndExpand" HeightRequest="20"></Editor>

                  <Sig:SignaturePadView x:Name="signaturePad" />

            <Image x:Name="PhotoSource" ></Image>

            <Button Command="{Binding SubmitCommand}"  Text="Take Picture of Delivery" x:Name="btnTakePhto" Clicked="BtnTakePhto_Clicked"  TextColor="White"  
                FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                BackgroundColor="#088da5" />

            <Button Text="Update Order" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>
            <Button Text="Update Order and Goto Next Job" BackgroundColor="AliceBlue"  Clicked="Update_Order_Clicked"></Button>

        </StackLayout>
    </ScrollView>
</ContentPage.Content>

Как видно из изображения, элементы в ListView не совпадают друг с другом, как я могу сделать их выровненными.

Редактировать 2 Привет еще раз. Я боюсь, что попробовал приведенный ниже ответ, но в итоге это не сработало. * +1012 *

    <ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >

<ListView.ItemTemplate >
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>

                    <Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
                    <Label Text="{Binding StockCode}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding StockDescription}"  FontSize="20" TextColor="Gray"></Label>
                    <Label Text="{Binding Price}" TextColor="Gray"  FontSize="20" ></Label>
                    <Label Text="{Binding Qty}" TextColor="Gray"  FontSize="20" ></Label>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

</ListView>

Answer 1

Если вы хотите, чтобы что-то выровнялось, StackLayout, вероятно, не способ сделать это. StackLayout выделяет пространство для каждого дочернего элемента в зависимости от того, сколько ему нужно, поэтому, если каждая строка в вашем списке имеет разные требования к ширине для разных элементов, например, для цены, вы получите вид макета, который вы видите.

Лучшим подходом будет Grid, который дает вам явный контроль над шириной каждого столбца:

<ListView.ItemTemplate >
    <DataTemplate>
        <ViewCell>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>

            <Label Text="{Binding ItemNumber}" Grid.Column="0" FontSize="20" ></Label>
            <Label Text="{Binding StockCode}"  Grid.Column="1" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding StockDescription}"  Grid.Column="2" FontSize="20" TextColor="Gray"></Label>
            <Label Text="{Binding Price}" Grid.Column="3" TextColor="Gray"  FontSize="20" ></Label>
            <Label Text="{Binding Qty}"  Grid.Column="4" TextColor="Gray"  FontSize="20" ></Label>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

В этом примере каждый столбец определен, чтобы иметь равную ширину (равномерно делить доступную ширину), но вы можете отрегулировать, как считаете нужным.

Вы можете изменить одно из ColumnDefinitions на Width = "1.5 *", которое будет выделять в 1,5 раза больше места для этого столбца, чем для других столбцов. Или вы можете определить столбец с Width = "100", который даст ему фиксированный размер независимо от ширины экрана.

Существует также Width = "Auto", который позволяет вам установить ширину столбца на основе количества пространства, необходимого для содержимого этого столбца, но, поскольку каждая строка в вашем ListView представляет собой отдельную таблицу, вы должны завершить с той же проблемой, что и сейчас, с StackLayout.