UWP ListView 滚动和缩放不起作用

Posted 2023-03-25

【中文标题】UWP ListView 滚动和缩放不起作用

【英文标题】：UWP ListView scrolling and zooming not working

【发布时间】：2020-05-15 13:05:39

【问题描述】：

所以我的主页上有一个简单的ListView。 ItemTemplate 只是一个非常简单的自定义 UserControl，其中包含 InkCanvas。我正在使用ObservableCollection<ViewModel> 填充我的模型，项目已正确添加到 ListView 但我无法缩放和滚动视图。以下是重现该问题的完整代码：

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);
        
    

这是自定义用户控件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>

ViewModel 类非常简单：

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));
            
        
    

【参考方案1】：

通过检查您的代码，您将 CanvasListView 的 IsHitTestVisible 设置为 false，此 UIElement 的包含区域不能用于命中测试。在这种情况下，您无法点击 listViewItem、对其进行缩放等操作。因此您需要将 CanvasListView 的 IsHitTestVisible 设置为 true 或注释此代码。

public MainPage()

    this.InitializeComponent();

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

【讨论】：

感谢它的工作原理（虽然我遇到了另一个错误，我会提出另一个问题）。