添加列表视图时页面不滚动

问题描述 投票：0回答：1

我正在为课程制作一个 MAUI 移动应用程序。我已经为页面构建了 xaml，它可以正常工作，但我需要页面能够滚动，以便可以更好地看到底部的列表视图。下面是屏幕截图和我的 xaml。

注意底部列表视图中的滚动。这工作得很好，但页面本身不滚动。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="C971.CoursePage"
             Title="CoursePage">
    <!-- Title -->
    <NavigationPage.TitleView>
        <StackLayout VerticalOptions="Center">
            <Label Text="Configure Course" TextColor="White" HorizontalTextAlignment="Center" FontSize="Title" Margin="0, 0, 75, 0" />
        </StackLayout>
    </NavigationPage.TitleView>
    <!-- Term Content -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- Border Line -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="1" HeightRequest="1" BackgroundColor="MediumPurple"/>
        </Grid>
        <!-- Course Stack List -->
        <VerticalStackLayout x:Name="courseStack" Padding="10" Grid.Row="1">
            <Label Text="Course Name" FontSize="Small"/>
            <Entry x:Name="courseName" FontSize="Medium"/>
            <Label Text="Start Date:" FontSize="Small"/>
            <DatePicker x:Name="courseStart" FontSize="Medium"></DatePicker>
            <Label Text="End Date:" FontSize="Small"/>
            <DatePicker x:Name="courseEnd" FontSize="Medium"></DatePicker>
            <Label Text="Course Status" FontSize="Small"/>
            <Picker x:Name="courseStatus" FontSize="Medium" SelectedIndex="0">
                <Picker.Items>
                    <x:String>Not Started</x:String>
                    <x:String>Active</x:String>
                    <x:String>Completed</x:String>
                    <x:String>Dropped</x:String>
                </Picker.Items>
            </Picker>
            <Label Text="Course Instructor Name" FontSize="Small"/>
            <Entry x:Name="courseInstructorName" FontSize="Medium"/>
            <Label Text="Course Instructor Phone" FontSize="Small"/>
            <Entry x:Name="courseInstructorPhone" FontSize="Medium"/>
            <Label Text="Course Instructor Email" FontSize="Small"/>
            <Entry x:Name="courseInstructorEmail" FontSize="Medium"/>
            <Label Text="Notes" FontSize="Small"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Editor x:Name="courseNotes" FontSize="Medium" AutoSize="TextChanges"/>
                <Button x:Name="shareNotesButton" Grid.Column="1" Text="Share" BackgroundColor="Transparent" TextColor="White" Clicked="ShareNotesButton_Clicked"/>
            </Grid>
        </VerticalStackLayout>
        <!-- Course Buttons -->
        <Grid Padding="10" Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="25*"/>
            </Grid.ColumnDefinitions>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Text="Notifications:" FontAttributes="Bold" FontSize="Medium" VerticalOptions="Center"/>
                <Switch x:Name="notificationSwitch" Grid.Column="1" IsToggled="False" VerticalOptions="Center"/>
            </Grid>
            <Button x:Name="saveCourseButton" Grid.Column="1" Text="Save" BackgroundColor="Transparent" TextColor="White" Clicked="SaveCourseButton_Clicked"/>
            <Button x:Name="deleteCourseButton" Grid.Column="2" Text="Delete" BackgroundColor="Transparent" TextColor="White" Clicked="DeleteCourseButton_Clicked"/>
        </Grid>
        <!-- Assessment Content -->
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="25*"/>
            </Grid.ColumnDefinitions>
            <Label Text="Assessments" Grid.Column="1" FontSize="Large" HorizontalTextAlignment="Center"/>
            <Button x:Name="addAssessmentButton" Grid.Column="2" Text="Add" BackgroundColor="Transparent" TextColor="White" Clicked="AddAssessmentButton_Clicked"/>
        </Grid>
        <!-- Border Line -->
        <Grid Grid.Row="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="1" HeightRequest="1" BackgroundColor="MediumPurple"/>
        </Grid>
        <Grid Grid.Row="5" Padding="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="Completed: "/>
            <Label Grid.Column="1" x:Name="passedAssessmentCount" Text="{Binding PassedAssessmentCount}"/>
            <Label Grid.Column="2" Text="/"/>
            <Label Grid.Column="3" x:Name="assessmentCount" Text="{Binding AssessmentCount}"/>
        </Grid>
        <!-- Assessment List -->
        <ListView x:Name="assessmentListView" Grid.Row="6" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <VerticalStackLayout Padding="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Column="0" Grid.Row="0" Text="{Binding AssessmentName}" FontSize="17" FontAttributes="Bold"/>
                                <Label Grid.Column="0" Grid.Row="1" Text="Status:"/>
                                <Label Grid.Column="2" Grid.Row="1" Text="{Binding Status}"/>
                                <Label Grid.Column="0" Grid.Row="2" Text="Type:"/>
                                <Label Grid.Column="2" Grid.Row="2" Text="{Binding Type}"/>
                                <Label Grid.Column="0" Grid.Row="3" Text="Start Date:"/>
                                <Label Grid.Column="2" Grid.Row="3" Text="{Binding Start, StringFormat='{0:MMMM dd, yyyy}'}"/>
                                <Label Grid.Column="0" Grid.Row="4" Text="End Date:"/>
                                <Label Grid.Column="2" Grid.Row="4" Text="{Binding End, StringFormat='{0:MMMM dd, yyyy}'}"/>
                            </Grid>
                        </VerticalStackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>

我尝试将其全部包装在滚动视图中，并弄乱页面顶层的一些网格行定义，但列表视图似乎“霸占”了所有滚动本身。我已经研究了几个小时并且被困住了。有什么想法吗？

c# xaml mobile maui
1个回答
0
投票

我将内容页面中的所有内容都包装在滚动视图中，并带有 VerticalOptions 属性设置为填充和展开。这禁用了 列表视图滚动，但页面现在滚动并且列表视图完全 无论如何都扩大了。

是的，我们可以将内部控件包装在

ScrollView
内。这可以禁用 
Listview
的滚动，但页面可以滚动并且 
ListView
完全展开。

请参考以下代码：

 <ScrollView >
       
    <!-- Term Content -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- Border Line -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="1" HeightRequest="1" BackgroundColor="MediumPurple"/>
        </Grid>
        <!-- Course Stack List -->
        <VerticalStackLayout x:Name="courseStack" Padding="10" Grid.Row="1">
            <Label Text="Course Name" FontSize="Small"/>
            <Entry x:Name="courseName" FontSize="Medium"/>
            <Label Text="Start Date:" FontSize="Small"/>
            <DatePicker x:Name="courseStart" FontSize="Medium"></DatePicker>
            <Label Text="End Date:" FontSize="Small"/>
            <DatePicker x:Name="courseEnd" FontSize="Medium"></DatePicker>
            <Label Text="Course Status" FontSize="Small"/>
            <Picker x:Name="courseStatus" FontSize="Medium" SelectedIndex="0">
                <Picker.Items>
                    <x:String>Not Started</x:String>
                    <x:String>Active</x:String>
                    <x:String>Completed</x:String>
                    <x:String>Dropped</x:String>
                </Picker.Items>
            </Picker>
            <Label Text="Course Instructor Name" FontSize="Small"/>
            <Entry x:Name="courseInstructorName" FontSize="Medium"/>
            <Label Text="Course Instructor Phone" FontSize="Small"/>
            <Entry x:Name="courseInstructorPhone" FontSize="Medium"/>
            <Label Text="Course Instructor Email" FontSize="Small"/>
            <Entry x:Name="courseInstructorEmail" FontSize="Medium"/>
            <Label Text="Notes" FontSize="Small"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Editor x:Name="courseNotes" FontSize="Medium" AutoSize="TextChanges"/>
                <Button x:Name="shareNotesButton" Grid.Column="1" Text="Share" BackgroundColor="Transparent" TextColor="White" />
            </Grid>
        </VerticalStackLayout>
        <!-- Course Buttons -->
        <Grid Padding="10" Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="25*"/>
            </Grid.ColumnDefinitions>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Label Text="Notifications:" FontAttributes="Bold" FontSize="Medium" VerticalOptions="Center"/>
                <Switch x:Name="notificationSwitch" Grid.Column="1" IsToggled="False" VerticalOptions="Center"/>
            </Grid>
            <Button x:Name="saveCourseButton" Grid.Column="1" Text="Save" BackgroundColor="Transparent" TextColor="White" />
            <Button x:Name="deleteCourseButton" Grid.Column="2" Text="Delete" BackgroundColor="Transparent" TextColor="White" />
        </Grid>
        <!-- Assessment Content -->
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25*"/>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="25*"/>
            </Grid.ColumnDefinitions>
            <Label Text="Assessments" Grid.Column="1" FontSize="Large" HorizontalTextAlignment="Center"/>
            <Button x:Name="addAssessmentButton" Grid.Column="2" Text="Add" BackgroundColor="Transparent" TextColor="White" />
        </Grid>
        <!-- Border Line -->
        <Grid Grid.Row="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="1" HeightRequest="1" BackgroundColor="MediumPurple"/>
        </Grid>
        <Grid Grid.Row="5" Padding="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="Completed: "/>
            <Label Grid.Column="1" x:Name="passedAssessmentCount" Text=" PassedAssessmentCount}"/>
            <Label Grid.Column="2" Text="/"/>
            <Label Grid.Column="3" x:Name="assessmentCount" Text=" AssessmentCount}"/>
        </Grid>
        <!-- Assessment List -->
        <ListView x:Name="assessmentListView" Grid.Row="6" HasUnevenRows="True" ItemsSource="{Binding Items}" BackgroundColor="Yellow" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <VerticalStackLayout Padding="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Column="0" Grid.Row="0" Text="{Binding AssessmentName}" FontSize="17" FontAttributes="Bold"/>
                                <Label Grid.Column="0" Grid.Row="1" Text="Status:"/>
                                <Label Grid.Column="2" Grid.Row="1" Text="{Binding Status}"/>
                                <Label Grid.Column="0" Grid.Row="2" Text="Type:"/>
                                <Label Grid.Column="2" Grid.Row="2" Text="{Binding Type}"/>
                                <Label Grid.Column="0" Grid.Row="3" Text="Start Date:"/>
                                <Label Grid.Column="2" Grid.Row="3" Text="{Binding Start, StringFormat='{0:MMMM dd, yyyy}'}"/>
                                <Label Grid.Column="0" Grid.Row="4" Text="End Date:"/>
                                <Label Grid.Column="2" Grid.Row="4" Text="{Binding End, StringFormat='{0:MMMM dd, yyyy}'}"/>
                            </Grid>
                        </VerticalStackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

 </ScrollView>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.