Horizontal ListView items do not scroll when swiped in WinRT app?

Question

I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:

WinRT Xaml ListView - Touch doesn't scroll well

Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?

NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.

Here is the XAML for the page:

<Page
    <!-- headers snipped for brevity -->
    <Page.Resources>
        <Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
        <Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <DataTemplate x:Key="HorzVideomarksItemTemplate1">
            <Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20*"/>
                    <RowDefinition Height="52*"/>
                    <RowDefinition Height="23*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
                <TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
                <Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
                <!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap" 
                    Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid x:Name="gridPage" 
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="897*"/>
            <ColumnDefinition Width="469*"/>
        </Grid.ColumnDefinitions>
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="347*"/>
            <RowDefinition Height="231*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                VerticalAlignment="Top"
                AutomationProperties.Name="Back"
                AutomationProperties.AutomationId="BackButton"
                AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
            <Button x:Name="exitButton"
                Click="exitButton_Click"
                Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
            <Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
        </Grid>
        <WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
        <Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
        <ListView 
                x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
                ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}" 
                ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None" 
                    >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">

                    </StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

        <Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
            <Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="187*"/>
                    <ColumnDefinition Width="188*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="189*"/>
                    <RowDefinition Height="137*"/>
                    <RowDefinition Height="62*"/>
                </Grid.RowDefinitions>
                <TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
                <TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
                <Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
                <Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
                <Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
            </Grid>
        </Border>
    </Grid>
</Page>

Answer 1

I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.

<ListView 
    x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
    ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}" 
    ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None" 
    ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
    >
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal" 
                ScrollViewer.HorizontalScrollMode="Disabled" 
                ScrollViewer.VerticalScrollMode="Disabled">

            </StackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>