让ListView滚动到选定的项目

Question

我有一个WinRT/C#/XAML应用程序，其中一个视图包含一个垂直的项目ListView。根据项目数量，ListView会显示垂直滚动条。以下是XAML定义：

<UserControl.Resources>
    <CollectionViewSource
        x:Name="myViewSource"
        Source="{Binding myViewModel.Items}" />
</UserControl.Resources>
...
<ListView
    x:Name="myListView"
    ItemsSource="{Binding Source={StaticResource myViewSource}}"
    SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</ListView>

现在，每次我导航到这个视图时，都会通过在代码后台（OnNavigatedTo）设置数据绑定的SelectedItem属性来选择ListView的选定项。我的问题是：ListView不会自动滚动到此选定项目。滚动条保持在ListView的顶部，用户必须手动滚动以查看选定的项目。

我尝试在代码后台（OnNavigatedTo）设置SelectedItem之后执行myListView.ScrollIntoView(MyViewModel.SelectedItem); ，但它无效。滚动条仍然停留在顶部。

我意识到StackOverflow上有一个线程：Scroll WinRT ListView to particular group 。这似乎是一个类似的问题。但是，当我手动或使用WinRT XAML工具包遍历ListView的可视树时，它找不到ScrollViewer（返回null）。

- Matthias

---

你是否在等待ListView加载（添加到可视树）后再尝试滚动？ - Filip Skakun

我在OnNavigatedTo()中调用了ScrollIntoView()。我认为这应该是正确的位置，ListView也应该已经加载了。或者我可能错了吗？ - Matthias

我认为OnNavigatedTo事件发生在控件加载之前... - Filip Skakun

Answer 1

感谢Filip，我注意到在OnNavigatedTo()中调用ScrollIntoView()太早了，因为此时ListView控件尚未加载。

第一个解决方案的想法是绑定ListView的Loaded事件：

myListView.Loaded += (s, e) => 
    myListView.ScrollIntoView(MyViewModel.SelectedItem);

不幸的是，这会导致一个令人讨厌的视觉效果，在一小段时间内，当前ListView项与选定项会重叠在一起，然后才会被正确地重新排列。

我找到的最终解决方案是通过视图的Dispatcher异步调用ScrollIntoView()：

myListView.Loaded += (s, e) => Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
    () => myListView.ScrollIntoView(MyViewModel.SelectedItem));

使用这种解决方案，布局效果良好。

- Matthias

---

我认为你的解决方案中有一个小语法错误——在 myListView.ScrollIntoView(MyViewModel.SelectedItem) lambda 表达式体后面需要加上分号。 - honzakuzel1989

在我的情况下，myListView.ScrollIntoView() 之前加上 myListView.UpdateLayout() 也有帮助。 - Borzh

Answer 2

我有一个类似的需求，但是采取了稍微不同的方法。我订阅了 ListView 的 SelectionChangedEvent，并在处理程序中执行滚动。

XAML:

<ListView x:Name="myListView" SelectionChanged="myListView_SelectionChanged" ...>
</ListView>

代码：

private void myListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    myListView.ScrollIntoView(myListView.SelectedItem);
}

- denver