在 XAML 和 Xamarin.Forms 中设置 CollectionView 以填充整个屏幕

Question

I am building an app for a course that uses CollectionView 's Grid , and on one screen, the grid is not filling the entire screen, as shown in the screenshot below. The XAML is nearly identical in all screens, with the exception of this one. Looking through the documentation at https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout , I'm not seeing anything that will force the table to fill. I have tried adding HorizontalOptions="FillAndExpand" and HorizontalOptions="CenterAndExpand" in the CollectionView declaration, but am seeing the same thing when I run the debugger. How can I make this stretch across the screen using CollectionView instead of ListView ?

XAML Code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Project.TermPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Save"
                     Clicked="SaveButton_Clicked"/>
    </ContentPage.ToolbarItems>
    <NavigationPage.TitleView>
        <Label Text="Edit Term Information"
               HorizontalTextAlignment="Center"
               FontFamily="{StaticResource FuturaStdMedium}"
               TextColor="White"
               FontSize="Title"/>
    </NavigationPage.TitleView>
    <StackLayout>
        <CollectionView x:Name="TermsList"
                        ItemSizingStrategy="MeasureAllItems">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0"
                               Grid.Row="0"
                               Text="Term Name:"
                               TextColor="{StaticResource PrimaryBlue}"
                               FontFamily="{StaticResource FuturaStdMedium}"/>
                        <Entry Grid.Column="1"
                               Grid.Row="0"
                               Text="{Binding TermName}"
                               TextColor="{StaticResource SecondaryBlue}"
                               FontFamily="{StaticResource FuturaStdMedium}"/>
                        <Label Grid.Column="0"
                               Grid.Row="1"
                               Text="Start Date:"
                               TextColor="{StaticResource PrimaryBlue}"
                               FontFamily="{StaticResource FuturaStdMedium}"/>
                        <DatePicker MinimumDate="01/01/2020"
                                    MaximumDate="12/31/2050"
                                    Date="{Binding StartDate}"
                                    DateSelected="OnDateSelected"
                                    Grid.Column="1"
                                    Grid.Row="1"
                                    TextColor="{StaticResource SecondaryBlue}"
                                    FontFamily="{StaticResource FuturaStdBook}">
                            <DatePicker.Format>MM/dd/yyyy</DatePicker.Format>
                        </DatePicker>
                        <Label Grid.Column="0"
                               Grid.Row="2"
                               Text="End Date:"
                               TextColor="{StaticResource PrimaryBlue}"
                               FontFamily="{StaticResource FuturaStdMedium}"/>
                        <DatePicker MinimumDate="02/01/2020"
                                    MaximumDate="01/01/2051"
                                    Date="{Binding EndDate}"
                                    DateSelected="OnDateSelected"
                                    Grid.Column="1"
                                    Grid.Row="2"
                                    TextColor="{StaticResource SecondaryBlue}"
                                    FontFamily="{StaticResource FuturaStdBook}">
                            <DatePicker.Format>MM/dd/yyyy</DatePicker.Format>
                        </DatePicker>
                        <Button Text="View Courses for Term"
                                Grid.ColumnSpan="2"
                                Grid.Row="3"
                                x:Name="CoursesButton"
                                Clicked="CoursesButton_Clicked"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button Text="Delete Term"
                BackgroundColor="Red"
                Margin="30"
                TextColor="Black"
                x:Name="DeleteTermButton"
                Clicked="DeleteTermButton_Clicked"/>
    </StackLayout>
</ContentPage>

Screenshot:

Answer 1

在 collectionView 的<Grid>元素中添加HorizontalOptions="FillAndExpand"

Answer 2

You could set the width of each Column as 1/2 of screen width

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>