同时滚动多个列表视图 C# UWP

Question

我正在使用 C# 构建一个 UWP 应用，但无法同时滚动多个列表视图。

我有 3 个列表视图：ListViewA、ListViewB 和 ListViewC。

如果我滚动 ListViewA，那么 ListViewB 和 ListViewC 都应该滚动。 如果我滚动 ListView B，则 ListViewA 和 ListViewC 将滚动，如果我滚动 ListViewC，也是如此。

我在 Stackoverflow 上完成了通常的搜索和尝试示例，以及其他成员提供的以下链接。仍然没有解决这个问题。希望这里的某个人能够提供一些启示，或提供一些关于在哪里寻找的见解？

我正在使用 MVVM 方法来填充列表视图，并且按预期运行。

现在只是让所有 3 个列表视图一次滚动。如果您需要任何其他信息，请告诉我。谢谢。

public class TestModel
{
    int ID {get; set;}
    string ColumnA {get; set;}
    string ColumnB {get; set;}
    string ColumnC {get; set;}  
}

public class MainPage : Page
{
        public TestModelViewModel ViewModel { get; set; }
        public MainPage()
        {
            this.InitializeComponent();
            ViewModel = new TestModelViewModel("Filename=TestModelDB.db");
        }
}

<ListView x:Name="ListViewA" ItemsSource="{x:Bind ViewModel.CollectionOfTestModelData, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:TestModelViewModel" >
            <StackPanel>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{x:Bind ColumnA, Mode=OneWay}"/>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<ListView x:Name="ListViewB" ItemsSource="{x:Bind ViewModel.CollectionOfTestModelData, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:TestModelViewModel" >
            <StackPanel>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{x:Bind ColumnB, Mode=OneWay}"/>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<ListView x:Name="ListViewC" ItemsSource="{x:Bind ViewModel.CollectionOfTestModelData, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:TestModelViewModel" >
            <StackPanel>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{x:Bind ColumnC, Mode=OneWay}"/>
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

首先，可以订阅PointerEntered事件来判断哪个listView被滚动。下面我只以ListViewA和ListViewB为例。

public bool ScrollViewerAScrolled = false;
public bool ScrollViewerBScrolled = false;

ListViewA.PointerEntered += ListViewA_PointerEntered;
ListViewB.PointerEntered += ListViewB_PointerEntered;

private void ListViewB_PointerEntered(object sender, PointerRoutedEventArgs e)
        {​
            ScrollViewerBScrolled = true;​
            ScrollViewerAScrolled = false;​
        }​


private void ListViewA_PointerEntered(object sender, PointerRoutedEventArgs e)​
        {​
            ScrollViewerAScrolled = true;​
            ScrollViewerBScrolled = false;​
        }

然后，可以通过VisualTreeHelper获取listView中的ScrollViewer（需要在ListView加载完成后调用）。 并订阅ViewChanged事件。例如，当ListViewA滚动时，会触发该事件，您可以在该事件中滑动ListViewB和ListViewC。同样适用于ListViewB和ListViewC。

var scrollViewerA = FindVisualChild<ScrollViewer>(ListViewA, "ScrollViewer");
var scrollViewerB = FindVisualChild<ScrollViewer>(ListViewB, "ScrollViewer");
scrollViewerA.ViewChanged += (s, e) =>
            {​
                if (ScrollViewerAScrolled)​  
                {​
                    scrollViewerB.ChangeView(null, scrollViewerA.VerticalOffset, null, false);​
                }
             ​
                ​
           };​

scrollViewerB.ViewChanged += (s, e) =>​
            {​
    ​
                 if (ScrollViewerBScrolled)​
                 {​
                     scrollViewerA.ChangeView(null, scrollViewerB.VerticalOffset, null, false);​
                      ​
                 }​

             };

这里是如何在 ListView 中获取 ScrollViewr：

protected T FindVisualChild<T>(DependencyObject obj, string name) where T : DependencyObject
            {
                //get number
                int count = VisualTreeHelper.GetChildrenCount(obj);

                //Traversing each object based on the index
                for (int i = 0; i < count; i++)
                {
                    var child = VisualTreeHelper.GetChild(obj, i);
                    //According to the parameters to determine whether we are looking for the object
                    if (child is T && ((FrameworkElement)child).Name == name)
                    {
                        return (T)child;
                    }
                    else
                    {
                        var child1 = FindVisualChild<T>(child, name);

                        if (child1 != null)
                        {
                            return (T)child1;
                        }


                    }
                }

                return null;

            }