I’m making a MAUI mobile app for a class. I’ve built out the xaml for the page and it’s functional but I need the page to be able to scroll so the listview at the bottom can be seen a bit better. Here’s a screenshot and my xaml below.
Note the scroll in the list view at the bottom. That works just fine but the page itself doesn’t scroll.
<?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>
I tried wrapping it all in a scrollview and messing with some of the grid row definitions at the top level of page but it appears the listview is “hogging” all the scroll for itself. I’ve been at it for hours and am stuck. Any ideas?
New contributor
MrTravelingBard is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2