Xamarin.Forms Grid Column's width not filling entire cell

2.1k Views Asked by At

I have a Grid with 4 Columns. Column 1, 2, 4 are absolute. And I want column 3 to fill the space.

The problem I am having is: for some rows in the Grid, the column 3 data does not fill up the entire space, and so its column 4 is out of alignment with respect to the other rows. See image below for clarity:

enter image description here

Here is my code (newbie, trying to get a handle on the visual part of XAML).

<ListView x:Name="lstData" HasUnevenRows="True" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="0, 5, 0, 5" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="45"></ColumnDefinition>
                        <ColumnDefinition Width="20"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="20"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>

                    <Label Text="{Binding TimesheetDate}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" FontSize="Micro"></Label>
                    <Label Text="{Binding UserInitials}" Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" FontSize="Micro"></Label>
                    <Label Text="{Binding TaskSummary}" Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap" FontSize="Micro"></Label>
                    <Label Text="{Binding TimesheetHours, StringFormat='{}{0:f2}'}" Grid.Row="0" Grid.Column="3" HorizontalOptions="EndAndExpand" FontSize="Micro"></Label>

                    <Label Text="{Binding TaskID}" Grid.Row="1" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" FontSize="Micro"></Label>
                    <Label Text="" Grid.Row="1" Grid.Column="1" FontSize="Micro" HorizontalOptions="CenterAndExpand"></Label>
                    <Label Text="{Binding UserComments}" Grid.Row="1" Grid.Column="2" LineBreakMode="WordWrap" HorizontalOptions="FillAndExpand" FontSize="Micro"></Label>
                    <Label Text="" Grid.Row="1" Grid.Column="3" FontSize="Micro" HorizontalOptions="EndAndExpand"></Label>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Thanks in advance, Kris

1

There are 1 best solutions below

0
On

you could change your HorizontalOptions of your Grid,

change

<Grid Padding="0, 5, 0, 5" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">

to:

 <Grid Padding="0, 5, 0, 5" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">