Xamarin aligning items in List View

Question

I am using the following xaml in xamrin forms to create an order details page with the list of orders in a sub list-view however I am having a biit of difficulty in aligning the list view items.

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

As you can see from the image the items in the Listview are not in line with each other how can i make them so aligned.

Edit 2 Hi Again I AM afraid I tried the below answer but it didn't work in end it looked sound.

    <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

If you want things to align, StackLayout is probably not the way to do it. StackLayout allocates space to each child element based on how much it needs, so if each row in your list has differing width requirements for different elements, like price, you'll get the kind of layout you see.

A better approach would be Grid, which gives you explicit control over how wide each column is:

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

In this example, each column is defined to have an equal width (dividing the available width evenly), but you can adjust as you see fit.

You could change one of the ColumnDefinitions to Width="1.5*" which would allocate 1.5 times the space to that column as it does to the other columns. Or could you define a column with Width="100" which would give it a fixed size regardless of the width of the screen.

There is also Width="Auto" which lets you set the width of the column based on the amount of space needed by the contents of that column, but since each row in your ListView is a different Grid, you'd end up with the same problem as you are having now with StackLayout.