看了看原生UWP的ScrollViewer,滑动很流畅(例如 开始菜单),但是WPF自带的ScrollViewer滚动十分生硬..
突发奇想,今天来实现一个流畅滚动的ScrollViewer.
一、目标
查阅网上的实现方法,要么直接重写控件,要么一堆Storyboard..很是无奈,还有些许bug.
主要目标如下:
1.能够流畅地滚动ScrollViewer 要求:有惯性的物理滚动 而不是 生硬的 内容滚动.
2.在使用动画的过程中,避免多个begin导致卡顿
3.好用(? )
二、准备工作
实现以上目标需要到的几件东西:
1.对于Listbox之类的控件需要先讲滚动方式变为 像素滚动 (若没有的话就可以不设置)
<ListBox VirtualizingPanel.ScrollUnit = "Pixel" VirtualizingPanel.VirtualizationMode="Recycling"/>
2.选一种动画使用的 缓动函数 这里推荐使用 CubicEase的EaseOut函数 (优点:接近于惯性滚动 对于CPU比较友好)
3.要对ScrollViewer启用滚动动画 需要自己写依赖属性:
public static class ScrollViewerBehavior { public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.RegisterAttached("VerticalOffset", typeof(double), typeof(ScrollViewerBehavior), new UIPropertyMetadata(0.0, OnVerticalOffsetChanged)); public static void SetVerticalOffset(FrameworkElement target, double value) => target.SetValue(VerticalOffsetProperty, value); public static double GetVerticalOffset(FrameworkElement target) => (double)target.GetValue(VerticalOffsetProperty); private static void OnVerticalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) => (target as ScrollViewer)?.ScrollToVerticalOffset((double)e.NewValue); }
三、编码
//继承ScrollViewer 通过截获MouseWheel事件控制滚动 public class MyScrollViewer : ScrollViewer { //记录上一次的滚动位置 private double LastLocation = 0; //重写鼠标滚动事件 protected override void OnMouseWheel(MouseWheelEventArgs e) { double WheelChange = e.Delta; //可以更改一次滚动的距离倍数 (WheelChange可能为正负数!) double newOffset = LastLocation - (WheelChange * 2); //Animation并不会改变真正的VerticalOffset(只是它的依赖属性) 所以将VOffset设置到上一次的滚动位置 (相当于衔接上一个动画) ScrollToVerticalOffset(LastLocation); //碰到底部和顶部时的处理 if (newOffset < 0) newOffset = 0; if (newOffset > ScrollableHeight) newOffset = ScrollableHeight; AnimateScroll(newOffset); LastLocation = newOffset; //告诉ScrollViewer我们已经完成了滚动 e.Handled = true; } private void AnimateScroll(double ToValue) { //为了避免重复,先结束掉上一个动画 BeginAnimation(ScrollViewerBehavior.VerticalOffsetProperty, null); DoubleAnimation Animation = new DoubleAnimation(); Animation.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut }; Animation.From = VerticalOffset; Animation.To = ToValue; //动画速度 Animation.Duration = TimeSpan.FromMilliseconds(800); //考虑到性能,可以降低动画帧数 //Timeline.SetDesiredFrameRate(Animation, 40); BeginAnimation(ScrollViewerBehavior.VerticalOffsetProperty, Animation); } }
使用方法:直接创建 <MyScrollViewer/>
如果是在ListBox中,可以通过修改模板的方式,把<ScrollViewer/>换成MyScrollViewer即可.
四、关于性能
按照上述方法实现的功能,CPU占用率基本稳定在10% ,但是要疯狂地上下滑动滚轮的话,25%+ 但是动画还是很流畅的
以下有几点可以改进的措施:
滚动的CPU占用不只是对偏移量的一个计算,与你滚动的UI画面内容具有很大的关系
例如大量的图片Image 3D对象 复杂的自定义控件 等等 都需要在滚动时计算并绘制。
你可以尝试以下方法:
1).启用ListBox的虚拟化技术
2).对于图像的绘制,可以通过降低其渲染度(可能会损坏图片质量 特别是低清小图 ),对你的图片对象使用:
RenderOptions.SetBitmapScalingMode(控件对象,BitmapScalingMode.LowQuality);
3).就像上文中所说,可以通过降低渲染帧数来控制CPU占用率(可能会有失流畅度)
4).如果能找到更好的缓动函数
5).参阅: 优化控件性能 -WPF |Microsoft Docs