Multiple label alignment in xamarin forms xaml

Question

I am working on xaml part in which i have took stack layout with list view . i am new to xamarin but dont know how to align label under their main category .i want to align label properly

my code for xaml is below.

<ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand" Margin="0,30,0,0" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
            <Label Text="Branch" FontSize="11" TextColor="#0A7475" HorizontalOptions="Start" Margin="10,0,0,0" />
            <Label Text="Restock Reason" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Qty" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Vendor" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Text="Created On" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
        </StackLayout>
        <ListView x:Name="listViewn" BackgroundColor="White">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                            <Label x:Name="Branchh" TextColor="Gray" FontSize="11" HorizontalOptions="Start" Text="{Binding Branch}" Margin="10,5,0,10" />
                            <Label x:Name="reason" TextColor="#325772" FontSize="11" Text="{Binding Reason}" Margin="20,5,0,10" />
                            <Label x:Name="Qtty" TextColor="Gray" FontSize="11" HorizontalOptions="Center" Text="{Binding Qty}" Margin="0,5,0,0" />
                            <Label x:Name="vendor" TextColor="Gray" FontSize="11" Text="{Binding Vendor}" Margin="20,5,0,10" />
                            <Label x:Name="schedDate" TextColor="Gray" HorizontalOptions="End" FontSize="11" Text="{Binding SchedDate}" Margin="0,5,10,10" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

Answer 1

As SushiHangover suggested, use a grid to allow you to align your columns.

Like this

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height"Auto"/>
            <RowDefinition Height"*"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="Branch" FontSize="11" TextColor="#0A7475" HorizontalOptions="Start" Margin="10,0,0,0" />
            <Label Grid.Column="1" Text="Restock Reason" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="2" Text="Qty" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="3" Text="Vendor" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
            <Label Grid.Column="4" Text="Created On" TextColor="#0A7475" FontSize="11" HorizontalOptions="Start" Margin="20,0,0,0" />
        </Grid>

        <ListView Grid.Row="1" x:Name="listViewn" BackgroundColor="White">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" TextColor="Gray" FontSize="11" HorizontalOptions="Start" Text="{Binding Branch}" Margin="10,5,0,10" />
                            <Label Grid.Column="1" TextColor="#325772" FontSize="11" Text="{Binding Reason}" Margin="20,5,0,10" />
                            <Label Grid.Column="2" TextColor="Gray" FontSize="11" HorizontalOptions="Center" Text="{Binding Qty}" Margin="0,5,0,0" />
                            <Label Grid.Column="3" TextColor="Gray" FontSize="11" Text="{Binding Vendor}" Margin="20,5,0,10" />
                            <Label Grid.Column="4" TextColor="Gray" HorizontalOptions="End" FontSize="11" Text="{Binding SchedDate}" Margin="0,5,10,10" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>
</ContentPage.Content>

You can also put the header into a listview header but that will scroll up the page with the listview.