正文
【Win10】实现 ListViewBase 平滑滚动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
首先解释下标题的 ListViewBase 是什么鬼。ListViewBase 我们可以查阅 MSDN 文档：https://msdn.microsoft.com/zh-cn/library/windows.ui.xaml.controls.listviewbase.aspx 得知，ListViewBase 是 ListView 和 GridView 的基类（ListView 和 GridView 则为常用的数据展示控件之一）。而本文的 主要 目的就是实现 ListView 和 GridView 的平滑滚动，因此我将标题写成“实现 ListViewBase 平滑滚动”而不是“实现 ListView 和 GridView 平滑滚动”（实际上本文适用于任何继承自 ListViewBase 的控件）。
首先我们先复习一下怎么滚动到 ListViewBase 的某一个 item。
在 ListViewBase 类中，有一个方法叫做 ScrollIntoView。这个方法有两个重载，我们看复杂一点，有两个参数的这个：
//
// 摘要:
// 滚动列表，以将指定数据项移入具有指定对齐方式的视图中。
//
// 参数:
// item:
// 要在视图中显示的数据项。
//
// alignment:
// 指定项是使用 Default 还是 Leading 对齐方式的枚举值。
[Overload("ScrollIntoViewWithAlignment")]
public void ScrollIntoView(System.Object item, ScrollIntoViewAlignment alignment);
第一个参数就是我们需要滚动到当前可视区域的 item，而第二个参数，Default 是指让其滚动到当前可视区域即可，Leading 则是指让其滚动到当前可视区域的顶部。
但是比较遗憾的是，这个方法一执行 就 (?)立马滚动到目标 item 了，完全不带一丁点动画效果（后文你会了解到内部执行仍需很少一段时间，尽管我们肉眼察觉不到）。在这个时代，没有一个好的 UI，怎么能吸引用户呢？因此我们就来研究并实现怎样能让 ListViewBase 平滑滚动到某个 item。
说起滚动的话，我们一定会想到 ScrollBar、ScrollViewer 这类的控件的。而幸运的是，ScrollViewer 有一个方法，叫 ChangeView 是带动画效果的（也可以选择不使用动画效果）。并且 ListView、GridView 内部都是有一个 ScrollViewer 的。那么我们自然而然就想到，是不是可以操作 ListViewBase 内部的这个 ScrollViewer 来实现平滑滚动。
先开始编写代码吧：
public static class ListViewBaseExtensions
{
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
}
}
然而问题来了，targetHorizontalOffset 和 targetVerticalOffset 我们是不知道的，也就是说，我们不知道目标 item 所在的位置。
尽管我们不知道，但是，ListViewBase 自身的 ScrollIntoView 方法它是知道的，那我们干脆就让它当个跑腿，先执行一次，然后就可以获取目标位置了。
public static class ListViewBaseExtensions
{
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 // 记录初始位置，用于 ScrollIntoView 检测目标位置后复原。
double originHorizontalOffset = scrollViewer.HorizontalOffset;
double originVerticalOffset = scrollViewer.VerticalOffset; // 跑腿。
listViewBase.ScrollIntoView(item, alignment); // 获取目标位置。
double targetHorizontalOffset = scrollViewer.HorizontalOffset;
double targetVerticalOffset = scrollViewer.VerticalOffset; // scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
}
}
然而通过断点检查后，发现 targetHorizontalOffset 和 targetVerticalOffset 并没有发生变化。但是执行过后，ListViewBase 确实发生了滚动，因此我们质疑，是不是 ScrollIntoView 方法在控件内部是以一个异步的形式执行。
这个时候，我们还是想起近乎万能的 LayoutUpdated 事件吧。改写下代码。
public static class ListViewBaseExtensions
{
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 // 记录初始位置，用于 ScrollIntoView 检测目标位置后复原。
double originHorizontalOffset = scrollViewer.HorizontalOffset;
double originVerticalOffset = scrollViewer.VerticalOffset; EventHandler<object> layoutUpdatedHandler = null;
layoutUpdatedHandler = delegate
{
listViewBase.LayoutUpdated -= layoutUpdatedHandler; // 获取目标位置。
double targetHorizontalOffset = scrollViewer.HorizontalOffset;
double targetVerticalOffset = scrollViewer.VerticalOffset; // scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
};
listViewBase.LayoutUpdated += layoutUpdatedHandler; // 跑腿。
listViewBase.ScrollIntoView(item, alignment);
}
}
这次我们再断点后，发现能够获取目标位置了！！（所以我上面说“内部执行仍需很少一段时间，尽管我们肉眼察觉不到”）
接下来，由于跑腿是已经滚动目标位置了，因此我们 需要复原到原来的位置，再滚动到目标位置以实现平滑滚动的动画效果。
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 // 记录初始位置，用于 ScrollIntoView 检测目标位置后复原。
double originHorizontalOffset = scrollViewer.HorizontalOffset;
double originVerticalOffset = scrollViewer.VerticalOffset; EventHandler<object> layoutUpdatedHandler = null;
layoutUpdatedHandler = delegate
{
listViewBase.LayoutUpdated -= layoutUpdatedHandler; // 获取目标位置。
double targetHorizontalOffset = scrollViewer.HorizontalOffset;
double targetVerticalOffset = scrollViewer.VerticalOffset; // 复原位置，且不需要使用动画效果。
scrollViewer.ChangeView(originHorizontalOffset, originVerticalOffset, null, true); // 最终目的，带平滑滚动效果滚动到 item。
scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
};
listViewBase.LayoutUpdated += layoutUpdatedHandler; // 跑腿。
listViewBase.ScrollIntoView(item, alignment);
}
}
执行之后，然而我们发现还是直接滚动到目标，不带一丁点动画效果
。但是，有了上面 ScrollIntoView 的经验后，我们自然而然也可以质疑 ChangeView 方法是不是像 ScrollIntoView 一样，内部也是异步执行的。再改写下：
public static class ListViewBaseExtensions
{
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 // 记录初始位置，用于 ScrollIntoView 检测目标位置后复原。
double originHorizontalOffset = scrollViewer.HorizontalOffset;
double originVerticalOffset = scrollViewer.VerticalOffset; EventHandler<object> layoutUpdatedHandler = null;
layoutUpdatedHandler = delegate
{
listViewBase.LayoutUpdated -= layoutUpdatedHandler; // 获取目标位置。
double targetHorizontalOffset = scrollViewer.HorizontalOffset;
double targetVerticalOffset = scrollViewer.VerticalOffset; EventHandler<ScrollViewerViewChangedEventArgs> scrollHandler = null;
scrollHandler = delegate
{
scrollViewer.ViewChanged -= scrollHandler; // 最终目的，带平滑滚动效果滚动到 item。
scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
};
scrollViewer.ViewChanged += scrollHandler; // 复原位置，且不需要使用动画效果。
scrollViewer.ChangeView(originHorizontalOffset, originVerticalOffset, null, true); };
listViewBase.LayoutUpdated += layoutUpdatedHandler; // 跑腿。
listViewBase.ScrollIntoView(item, alignment);
}
}
这次我们终于成功了！！！
效果：
最后我们像 ListViewBase 的 ScrollIntoView 方法，加多个只有一个参数的重载吧。
最终代码：
public static class ListViewBaseExtensions
{
public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item)
{
ScrollIntoViewSmoothly(listViewBase, item, ScrollIntoViewAlignment.Default);
} public static void ScrollIntoViewSmoothly(this ListViewBase listViewBase, object item, ScrollIntoViewAlignment alignment)
{
if (listViewBase == null)
{
throw new ArgumentNullException(nameof(listViewBase));
} // GetFirstDescendantOfType 是 WinRTXamlToolkit 中的扩展方法，
// 寻找该控件在可视树上第一个符合类型的子元素。
ScrollViewer scrollViewer = listViewBase.GetFirstDescendantOfType<ScrollViewer>(); // 由于 ScrollViewer 肯定有，因此不做 null 检查判断了。 // 记录初始位置，用于 ScrollIntoView 检测目标位置后复原。
double originHorizontalOffset = scrollViewer.HorizontalOffset;
double originVerticalOffset = scrollViewer.VerticalOffset; EventHandler<object> layoutUpdatedHandler = null;
layoutUpdatedHandler = delegate
{
listViewBase.LayoutUpdated -= layoutUpdatedHandler; // 获取目标位置。
double targetHorizontalOffset = scrollViewer.HorizontalOffset;
double targetVerticalOffset = scrollViewer.VerticalOffset; EventHandler<ScrollViewerViewChangedEventArgs> scrollHandler = null;
scrollHandler = delegate
{
scrollViewer.ViewChanged -= scrollHandler; // 最终目的，带平滑滚动效果滚动到 item。
scrollViewer.ChangeView(targetHorizontalOffset, targetVerticalOffset, null);
};
scrollViewer.ViewChanged += scrollHandler; // 复原位置，且不需要使用动画效果。
scrollViewer.ChangeView(originHorizontalOffset, originVerticalOffset, null, true); };
listViewBase.LayoutUpdated += layoutUpdatedHandler; // 跑腿。
listViewBase.ScrollIntoView(item, alignment);
}
}
最后再附送上 Demo：ListViewBaseScrollSmoothlyDemo.zip
最后的最后，冰天雪地裸体 360 度跪求一份 UWP/WP8.1 相关的工作
。（长期有效）
