UWP ListView scrolling and zooming not working

Question

So I have a simple ListView in my main page. The ItemTemplate is just a very simple custom UserControl containing a InkCanvas. I am using an ObservableCollection<ViewModel> to populate my model, the items are added to the ListView correctly but I am unable to zoom and scroll the view. Here is the complete code to reproduce the issue:

MainPage.xaml:

<Page
    x:Class="ListViewAddingTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListViewAddingTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <Style TargetType="ScrollViewer" x:Key="ZoomableScrollViewer">
            <Setter Property="ZoomMode" Value="Enabled"/>
            <Setter Property="HorizontalScrollMode" Value="Enabled"/>
            <Setter Property="VerticalScrollMode" Value="Enabled"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Visible"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
            <Setter Property="MaxZoomFactor" Value="5"/>
            <Setter Property="MinZoomFactor" Value="1"/>
        </Style>
    </Page.Resources>
    <Grid HorizontalAlignment="Stretch">
        <ListView x:Name="CanvasListView" IsTapEnabled="False"
                  ScrollViewer.ZoomMode="Enabled"
                  ScrollViewer.HorizontalScrollMode="Enabled"
                  ScrollViewer.VerticalScrollMode="Enabled"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.VerticalScrollBarVisibility="Visible"
                  HorizontalAlignment="Stretch">

            <!-- Make sure that items are not clickable and centered-->
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                </Style>
            </ListView.ItemContainerStyle>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <local:CanvasControl Margin="0 2"
                                             VerticalAlignment="Stretch"
                                         HorizontalAlignment="Stretch" 
                                         MinWidth="1000" MinHeight="100" MaxHeight="150"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button x:Name="AddButton" Content="Add Page" Click="Button_Click"/>
    </Grid>
</Page>

MainPage.cs:

using System.Collections.ObjectModel;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Input.Inking;

namespace ListViewAddingTest
{
    public sealed partial class MainPage : Page
    {
        ObservableCollection<ViewModel> pageCollection;
        public MainPage()
        {
            this.InitializeComponent();
            pageCollection = new ObservableCollection<ViewModel>();
            CanvasListView.ItemsSource = pageCollection;
            CanvasListView.IsHitTestVisible = false;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("Adding new page...");
            pageCollection.Add(new ViewModel());
            Debug.WriteLine("CanvasListView count is " + CanvasListView.Items.Count);
        }
    }
}

And here is the custom user control CanvasControl:

<UserControl
    x:Class="ListViewAddingTest.CanvasControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListViewAddingTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid>
        <InkCanvas x:Name="inkCanvas" 
                   Margin="0 2"
                   MinWidth="1000" 
                   MinHeight="300"
                   HorizontalAlignment="Stretch" />
    </Grid>
</UserControl>

The ViewModel class is extremely simple:

using System;
using System.ComponentModel;

namespace ListViewAddingTest
{
    public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Answer 1

By checking your code, you set IsHitTestVisible of CanvasListView as false, the contained area of this UIElement cannot be used for hit testing. In that case, you can't click the listViewItem, zoom it, etc. So you need to set the IsHitTestVisible of CanvasListView as true or comment this code.

public MainPage()
{
    this.InitializeComponent();

    pageCollection = new ObservableCollection<ViewModel>();
    CanvasListView.ItemsSource = pageCollection;
    CanvasListView.IsHitTestVisible = true;
    //Or
    //CanvasListView.IsHitTestVisible = false;
}