Listview with Horizontal stack panel not scrolling windows 10 universal app - windows

Question

I am trying to build a 4 column list view to display some data in the Windows Universal App. I have the following Listview but the list view is not scrolling vertically in spite of data being there for scroll. I am not sure what I am doing wrong. Any pointers or help is appreciated..
XAML Code
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ChennaiTrains"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ChennaiTrains.ViewModel"
xmlns:Model="using:ChennaiTrains.Model"
x:Class="ChennaiTrains.MainPage"
xmlns:c="using:ChennaiTrains.Controls"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Icon="Find" Click="AppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Page.Background>
<ImageBrush ImageSource="..\Assets\Images\marina.jpg" Stretch="UniformToFill"></ImageBrush>
</Page.Background>
<Grid>
<Grid x:Name="body">
<StackPanel>
<Grid x:Name="titlebar">
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="menu"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}"
FontSize="30"
FontFamily="Segoe MDL2 Assets"
Content="" Click="HamburgerButton_Click"
Background="Transparent" Height="42" Visibility="Visible"/>
<TextBlock x:Name="content"
FontSize="25"
Text="Chennai Compass" Height="42" Visibility="Visible"
VerticalAlignment="{x:Bind VerticalContentAlignment}"
HorizontalAlignment="{x:Bind HorizontalContentAlignment}" Margin="0"/>
</StackPanel>
</Grid>
<SplitView x:Name="MySplitView"
DisplayMode="Inline"
OpenPaneLength="150"
CompactPaneLength="50"
IsPaneOpen="False" Background="Transparent" BorderBrush="Black">
<SplitView.Pane>
<StackPanel Background="Transparent">
<!-- <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" /> -->
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
<StackPanel Orientation="Horizontal" Background="Transparent">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Visibility="Collapsed"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" Visibility="Collapsed" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<Grid>
<AutoSuggestBox AllowDrop="True" x:Name="fromTextBox"
PlaceholderText="Enter the starting point"
QueryIcon="Find" TextChanged="DestinationBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextMemberPath="StationName"
>
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<AutoSuggestBox x:Name="DestinationBox"
QueryIcon="Find"
DisplayMemberPath="{Binding StationList.StationName}"
TextMemberPath="StationName"
TextChanged="DestinationBox_TextChanged"
SuggestionChosen="DestinationBox_SuggestionChosen"
PlaceholderText="Enter the destination" Margin="0,60,0,0">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="2">
<TextBlock Text="{Binding StationName}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
<AutoSuggestBox.DataContext>
<ViewModel:AutoSuggestBoxVM/>
</AutoSuggestBox.DataContext>
</AutoSuggestBox>
<Grid x:Name="resultGrid" Margin="0,140,2,0">
<ListView x:Name="resultsList" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="15"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="TimeTemplate">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="0">
<TextBlock Text="Start at:" Margin="0,0,5,0"></TextBlock>
<TextBlock x:Name="startAt" Text="{Binding Time}" />
<TextBlock FontFamily="Segoe MDL2 Assets" Margin="20,0,5,0" Text="">
</TextBlock>
<TextBlock x:Name="duration" Text="{Binding Duration}"/>
<TextBlock Text="Reach by:" Margin="-212,35,0,0"></TextBlock>
<TextBlock x:Name="EndPoint" Margin="-145,35,0,0" Text="{Binding DestinationTime}" />
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Margin="-75,35,0,0"></TextBlock>
<TextBlock x:Name="trainType" Margin="-55,35,0,0" Text="{Binding TrainType}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock x:Name="headerText" Text="Next available Trains"/>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<StaticResource ResourceKey="TimeTemplate"/>
</ListView.ItemTemplate>
<ListView.DataContext>
<Model:ResultListModel/>
</ListView.DataContext>
</ListView>
</Grid>
</Grid>
</SplitView>
</StackPanel>
</Grid>
</Grid>
</Page>

Answer 1

Your problem is the StackPanel that contains the titlebar and SplitView. Content inside of a StackPanel is not confined to any space and it will stretch on forever. In your case this means the SplitView and therefore the ListView inside it are stretching forever. Without being confined the ListView doesn't believe it needs to scroll.
The fix is to use a Grid with Rows instead. I would add Grid RowDefinitions into your body Grid with the titlebar in row 0 and the SplitView in row 1 and remove the StackPanel just inside the body Grid. That will get your scrolling working. Paraphrasing your code, the row definitions would look like this
<Grid x:Name="body">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="titlebar" Grid.Row="0">
</Grid>
<SplitView x:Name="MySplitView" Grid.Row="1">
</SplitView>
</Grid>