WPF 控件库——带有惯性的ScrollViewer*(转)

转:https://blog.csdn.net/ahilll/article/details/82418892

一、先看看效果

二、原理

  虽然效果很简单,但是网上的一些资料涉及的代码量非常可观,而且效果也不是很理想,滚动的时候没有一个顺滑感。我这里提供的源码一共120多行,就能实现上图的效果。

  本质上我们只要接管ScrollViewer的滚动逻辑,并且把这个逻辑替换成带有惯性的即可,那么如何去接管呢?这里的关键是先屏蔽ScrollViewer的鼠标滚轮事件:

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3      e.Handled = true;
4 }

  这样一来,ScrollViewer就不会响应滚轮事件了,我们就在这里做文章。首先我们给这个ScrollViewer添加一个属性 IsEnableInertia ,用来控制是否使用惯性,因为萝卜青菜各有所爱,不要想着强制所有人使用惯性,所以滚轮响应方法变为:

1 protected override void OnMouseWheel(MouseWheelEventArgs e)
2 {
3     if (!IsEnableInertia)
4     {
5         base.OnMouseWheel(e);
6         return;
7     }
8     e.Handled = true;
9 }    

  控制ScrollViewer的垂直滚动可以使用 ScrollViewer.ScrollToVerticalOffset ,横向也一样。为什么不能用 VerticalOffset ?因为 VerticalOffset 在注册的时候就说明了是只读的:

1 private static readonly DependencyPropertyKey VerticalOffsetPropertyKey = DependencyProperty.RegisterReadOnly(nameof (VerticalOffset), typeof (double), typeof (ScrollViewer), (PropertyMetadata) new FrameworkPropertyMetadata((object) 0.0));
2
3 public static readonly DependencyProperty VerticalOffsetProperty = ScrollViewer.VerticalOffsetPropertyKey.DependencyProperty;

  好了,接下来就是怎么在滚轮响应方法中实现惯性运动了,也就是一种减速运动。想到这儿,熟悉动画的博友很快就知道要用WPF的动画来实现了,默认的动画都是一次线性的,要有惯性效果就得用缓动函数,WPF的缓动函数有很多,而 CubicEase 非常适合用来做惯性,它的描述图如下:

  图中,横轴表示时间,纵轴表示运动距离。很明显,中间的 EaseOut 模式就是我们想要的。到了这里思路就清晰了,我们可以定义一个属性 CurrentVerticalOffset ,我们会在它上面实现动画,在它的值回调函数中调用 ScrollViewer.ScrollToVerticalOffset 来更新ScrollViewer的滚动位置。当然我们还需要一个私有字段 _totalVerticalOffset ,这个是用来存放ScrollViewer滚动目标位置的,滚轮向下滚动一个单位我们就给它减去一次 e.Delta ,这里的e是滚轮响应方法传进来的参数,每次给它赋值之后,就可以在 CurrentVerticalOffset 上执行动画了: BeginAnimation(CurrentVerticalOffsetProperty, animation) ,需要特别注意的是,当一个依赖属性用了动画改变后,再对其赋值则不会生效,原因是在一个动画到达活动期的终点后,时间线默认会保持其进度,直到其父级的活动期和保持期结束为止。如果想在动画结束后还可以手动更改依赖属性的值,则需要把 FillBehavior 设置为Stop。不过这样又会出现一个问题,一旦动画结束,这个依赖属性又会恢复初始值,所以还要给这个动画订阅一个 Completed 事件,在事件响应方法中为 CurrentVerticalOffset 给定目标值,也就是 _totalVerticalOffset 。

  最后还有一个冲突问题,当手动拖动滑块或者当用上下文菜单改变滚动条位置时是不能用动画的,因为这时候没有触发 OnMouseWheel ,没关系,这正是我们想要的,但是如果再次触发 OnMouseWheel 就有问题了,因为手动触发滚动的时候我们没有给 CurrentVerticalOffset 和 _totalVerticalOffset 赋值( CurrentVerticalOffset 和 _totalVerticalOffset 只在 OnMouseWheel 中赋值),所以在用动画执行滚动操作前要先判断一下是否需要先更新一下它们俩,如何判断?我们可以用一个私有字段 _isRunning 来维护状态,每当动画开始就给它赋值true,结束则赋值false。这样一来,当 _isRunning = false 时,说明在调用 OnMouseWheel 前,动画已经结束,用户可能已经手动改变了滚动条位置(也可能没有,但这并不影响),所以就要给之前俩兄弟更新一下值了。

  因为常见的惯性滚动以垂直方向居多,所以我没有写水平方向的逻辑,但也很容易扩展,有兴趣的博友可以下载源代码自己研究。

三、源码

  本文所讨论的控件源码已经在github开源:https://github.com/NaBian/HandyControl

原文地址:https://www.cnblogs.com/lsgsanxiao/p/10801623.html

时间: 2024-10-06 08:27:22

WPF 控件库——带有惯性的ScrollViewer*(转)的相关文章

WPF控件库之Menu控件

WPF控件库之Menu(1) Menu 是一个控件,使用该控件可以对那些与命令或事件处理程序相关联的元素以分层方式进行组织.每个 Menu 可以包含多个 MenuItem 控件.每个 MenuItem 都可调用命令或调用 Click 事件处理程序.MenuItem 也可以有多个 MenuItem 元素作为子项,从而构成子菜单. Menu 是一个控件,使用该控件可以对那些与命令或事件处理程序相关联的元素以分层方式进行组织.每个 Menu 可以包含多个 MenuItem 控件.每个 MenuItem

WPF 控件库——可拖动选项卡的TabControl

原文:WPF 控件库--可拖动选项卡的TabControl 一.先看看效果 二.原理 1.选项卡大小和位置 这次给大家介绍的控件是比较常用的TabControl,网上常见的TabControl样式有很多,其中一部分也支持拖动选项卡,但是带动画效果的很少见.这也是有原因的,因为想要做一个不失原有功能,还需要添加动画效果的控件可不是一行代码的事.要做成上图中的效果,我们不能一蹴而就,最忌讳的是一上来就想实现所有效果. 一开始,我们最好先用Blend看看原生的TabControl样式模板部分是如何实现

《Dotnet9》系列-开源C# WPF控件库强力推荐

本系列已介绍三款开源C# WPF控件库,其中一款国外的,另两款是国内的,大家如有比较好的开源C# WPF控件库,欢迎向Dotnet9推荐,您可在本文下方留言,谢谢您对dotnet的关注和支持,让我们期待dotnet更好的明天,以下是Dotnet9已完成的3篇开源C# WPF控件库推荐文章: 1.<Dotnet9>系列-开源C# WPF控件库1<MaterialDesignInXAML>强力推荐. 2.<Dotnet9>系列-开源C# WPF控件库2<Panuon.

(四)开源C# WPF控件库《AduSkin – UI》

微信公众号:[Dotnet9的博客],网站:[Dotnet9],问题或建议:[请网站留言], 如果对您有所帮助:[欢迎赞赏]. (四)开源C# WPF控件库<AduSkin> 追求极致,永臻完美 A Beautiful WPF Control UI 一款简单漂亮的WPF UI,融合部分开源框架的组件,为个人定制的UI,可供学者参考. 阅读导航 关于<AduSkin> 1.1 控件库全貌 1.2 动态修改主题色 1.3 技术交流 基于<AduSkin>控件库衍生的Case

[WPF]是时候将WPF控件库从.Net Framework升级到.NET Core 3.1

1. 升级到Core的好处 去年中我曾考虑将我的控件库项目Kino.Toolkit.Wpf升级到.NET Core,不过很快放弃了,因为当时.NET Core是预览版,编译WPF还需要使用最新的Visual Studio 2019,这样作为一个教学项目不够友好.到了今天.NET Core 3.1都出来了,已经正式支持WPF和Winform,Visual Studio 2019也已经普及,我觉得应该是时候将我的控件库升级到.NET Core.那么现在是WPF正式迁移到.NET Core的好时机吗?

WPF 控件库——仿制Chrome的ColorPicker

一.观察 项目中的一个新需求,需要往控件库中添加颜色拾取器控件,因为公司暂时还没有UI设计大佬入住,所以就从网上开始找各种模样的ColorPicker,找来找去我就看上了谷歌浏览器自带的,它长这个样: 看上去不错,可以搞!搞之前得观察一下这里面可能的一些坑.对WPF而言,圆角阴影等效果都是基本操作,这里就不说了. 首先我们注意到上图中有两个拖动条,一个背景是可见光谱,另一个背景是颜色渐变和方块平铺的叠加.因为需求里没有屏幕取色的功能,所以在拖动条左侧的拾取图标可以去掉,只保留当前颜色预览,这样会

WPF控件库:图片按钮的封装

需求:很多时候界面上的按钮都需要被贴上图片,一般来说: 1.按钮处于正常状态,按钮具有背景图A 2.鼠标移至按钮上方状态,按钮具有背景图B 3.鼠标点击按钮状态,按钮具有背景图C 4.按钮处于不可用状态,按钮具有背景图D 实现起来,毫无疑问,没什么难度.但是过程还是比较繁琐.这里我将这个过程封装为新的控件类:ImageButton ImageButton中有四个属性(支持绑定),分别对应上面A.B.C.D四个背景图的路径. #region 属性 /// <summary> /// 按钮处于正常

WPF控件库:文字按钮的封装

需求:封装按钮,按钮上面只显示文字.在鼠标移上去.鼠标点击按钮.以及将按钮设为不可用时按钮的背景色和前景色需要发生变化 实现:继承Button类,封装如下6个属性: #region 依赖属性 /// <summary> /// 当鼠标移到按钮上时,按钮的前景色(这是依赖属性) /// </summary> public static readonly DependencyProperty MouserOverForegroundProperty = DependencyProper

WPF 精修篇 Winform 嵌入WPF控件

原文:WPF 精修篇 Winform 嵌入WPF控件 首先 创建WPF控件库 这样就有了一个WPF界面 在wpf中增加界面等 在winform中增加WPFDLL 重新生成解决方案 在左侧工具栏 出现WPF 控件 拖到窗体 效果 原文地址:https://www.cnblogs.com/lonelyxmas/p/12075801.html