簡體   English   中英

在 XAML 和 Xamarin.Forms 中設置 CollectionView 以填充整個屏幕

[英]Set CollectionView to Fill Entire Screen in XAML and Xamarin.Forms

我正在為使用CollectionViewGrid的課程構建一個應用程序,並且在一個屏幕上,網格沒有填滿整個屏幕,如下面的屏幕截圖所示。 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>

截屏:

截屏

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

您可以將每列的寬度設置為屏幕寬度的 1/2

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM