在 XAML 和 Xamarin.Forms 中将 CollectionView 设置为填充整个屏幕答案

【问题标题】：Set CollectionView to Fill Entire Screen in XAML and Xamarin.Forms在 XAML 和 Xamarin.Forms 中将 CollectionView 设置为填充整个屏幕
【发布时间】：2020-03-09 01:05:37
【问题描述】：

我正在为使用CollectionView 的Grid 的课程构建应用程序，并且在一个屏幕上，网格没有填满整个屏幕，如下面的屏幕截图所示。 XAML 在所有屏幕中几乎相同，除了这个。查看https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout 的文档，我没有看到任何会迫使表格填满的内容。我尝试在CollectionView 声明中添加HorizontalOptions="FillAndExpand" 和HorizontalOptions="CenterAndExpand"，但是当我运行调试器时看到同样的事情。如何使用CollectionView 而不是ListView 在屏幕上进行拉伸？

XAML 代码：

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

截图：

【问题讨论】：

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

您可以将每列的宽度设置为屏幕宽度的 1/2

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

【讨论】：

【解决方案2】：

在您的 collectionView 内的 <Grid>Element 中添加 HorizontalOptions="FillAndExpand"

【讨论】：

更改为<Grid Padding="10" HorizontalOptions="FillAndExpand">时的相同视图。
将 ColumnDefinitions 更改为 " * "