How to set the width of the fixed columns in xamarin

Question

I have a ListView that shows chemical residues, the problem is that when I add a particular residue ("BORRAS") my column configuration goes to shit as shown in the following figure

I think there is a nomenclature to set the width of the columns, how can I solve this? How can I make my ListView look homogenous?

I attach my ListView.XAML:

<ListView
    SelectionMode="None"
    Margin="5,0,10,10"
    IsRefreshing="{Binding IsRefreshing}"
    HeightRequest="{Binding AltoListaResiduos}"
    SeparatorVisibility="None"  
    HasUnevenRows="true"
    ItemsSource="{Binding ListaResiduos}">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal"
                             VerticalOptions="FillAndExpand">

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <!--NOMBRE RESIDUO-->
                            <ColumnDefinition Width="3*"/>
                            <!--CANTIDAD ESTIMADA-->
                            <ColumnDefinition Width="1.5*"/>
                            <!--NOMBRE ESTIMADA-->
                            <ColumnDefinition Width="1.5*"/>
                            <!--CANTIDAD CONTENEDOR-->
                            <ColumnDefinition Width="1.5*"/>
                            <!--NOMBRE CONTENEDOR-->
                            <ColumnDefinition Width="1.5*"/>
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding NombreResiduo}"
                               HorizontalOptions="FillAndExpand"                                                      
                               MaxLines="3"
                               VerticalTextAlignment="Center"
                               TextColor="{StaticResource das.color.texto}"
                               VerticalOptions="CenterAndExpand"
                               Grid.Column="0"
                               Margin="4,0">
                            <Label.FontSize>
                                <OnPlatform x:TypeArguments="x:Double" iOS="11" Android="11" />
                            </Label.FontSize>
                        </Label>
                        <Label Text="{Binding formattedCantidadEstimada}" 
                               HorizontalTextAlignment="End"
                               FontSize="Small" 
                               VerticalTextAlignment="Center"
                               TextColor="{StaticResource das.color.texto}"
                               VerticalOptions="CenterAndExpand"
                               Grid.Column="1"
                               Margin="4,0">
                        </Label>

                        <Label Text="{Binding Estimado}" 
                               HorizontalTextAlignment="End"
                               FontSize="Micro" 
                               VerticalTextAlignment="Center"
                               TextColor="{StaticResource das.color.texto}"
                               VerticalOptions="CenterAndExpand"
                               Grid.Column="2"
                               Margin="4,0">
                        </Label>

                        <Label Text="{Binding CantidadContenedor}" 
                               HorizontalTextAlignment="End" 
                               FontSize="Small" 
                               VerticalTextAlignment="Center"
                               TextColor="{StaticResource das.color.texto}"
                               VerticalOptions="CenterAndExpand"
                               Grid.Column="3"
                               Margin="4,0">
                        </Label>
                        <Label Text="{Binding Contenedor}" 
                               HorizontalTextAlignment="End"
                               FontSize="Micro" 
                               VerticalTextAlignment="Center"
                               TextColor="{StaticResource das.color.texto}"
                               VerticalOptions="CenterAndExpand"
                               Grid.Column="4"
                               Margin="4,0">
                        </Label>

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

I'm new to Xamarin.Forms and I hope this question helps others, how can I make my list look the same with all the waste? (independent of the name) any help for me?

Answer 1

I have a feeling this is happening because you are using VerticalTextAlignment now for some reason both the TextAlignment Properties(H, V) have weird behaviors in them, even though Xamarin says for VerticalTextAlignment that it

Gets or sets the vertical alignment of the Text property.

I would rather use YAlign instead as it does not have this behavior and Xamarin says about YAling that it

Gets or sets the vertical alignment for the Text inside of the Label bound.

Secondly, when you use a grid layout a define the columns and rows you should never use AndExpand types as you have already defined the max area and it will not overlay that. Now what the LayoutOptions docs say is CenterAndExpand or FillAndExpand do is

A LayoutOptions structure that describes an element that is centered and expands.

Also, Remove the StackLayout just keep the Grid in your ViewCell.

   <Label Text="{Binding Contenedor}" 
                           XAlign="End"
                           FontSize="Micro" 
                           YAlign="Center"
                           TextColor="{StaticResource das.color.texto}"                               
                           Grid.Column="4"
                           Margin="4,0"/>

Want to learn the best practices with Xamarin forms? Check my blog here: https://heartbeat.fritz.ai/techniques-for-improving-performance-in-a-xamarin-forms-application-b439f2f04156

Answer 2

You shouldn't need the StackLayout at all since you are defining a Grid with the appropriate columns.

This should help your Grid to span properly and fill the entire space