Xamarin.Forms 网格列的宽度未填充整个单元格

Question

I have a Grid with 4 Column s. 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:

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

Answer 1

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