Установите CollectionView для заполнения всего экрана в XAML и Xamarin.Forms - PullRequest
0 голосов
/ 09 марта 2020

Я создаю приложение для курса, использующего CollectionView Grid, и на одном экране сетка не заполняет весь экран, как показано на скриншоте ниже. XAML практически идентичен на всех экранах, за исключением этого. Просматривая документацию по https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout, я не вижу ничего, что заставит таблицу заполниться. Я попытался добавить HorizontalOptions="FillAndExpand" и HorizontalOptions="CenterAndExpand" в объявление CollectionView, но вижу то же самое при запуске отладчика. Как я могу растянуть изображение по экрану, используя 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>

Снимок экрана:

screenshot

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

Вы можете установить ширину каждого столбца как 1/2 ширины экрана

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
0 голосов
/ 09 марта 2020

добавить HorizontalOptions="FillAndExpand" в элемент * <Grid> внутри вашей коллекции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...