俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

WPF 控件库——带有惯性的ScrollViewer【俄罗斯贵宾会】

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

   一般来说,我们在任何文字相关软件上,比如记事本、网页等,只要鼠标左键按下拖动选中文本,如果鼠标超出文本框可显示范围,便会自动向鼠标所在方向滚动文本内容,以实现跨页选中的效果。但是与问题1一样,由于更改了ScrollViewer的Template,导致这个通用功能也需要自己实现了。

三、源码

  private void PART_ContentHost_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
  {
    ScrollViewer.ScrollToVerticalOffset(ScrollViewer.VerticalOffset

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

俄罗斯贵宾会 1俄罗斯贵宾会 2自定义ScrollViewer模版

俄罗斯贵宾会 3

  解决方法:

 

  寒假过完,在家真心什么都做不了,可能年龄大了,再想以前那样能专心坐下来已经不行了。回来第一件事就是改了项目的一个bug,最近又新增了一个新的功能,为程序添加了一个消息栏。消息栏有许多形式,要求是一个不需要历史记录,可以用鼠标选中消息内容的消息栏。我首先想到的就是TextBox,我个人比较喜欢美观的,有点强迫症,所以必须把TextBox中的ScrollViewer给改写了,好吧,开始。

二、原理

  二、改造ScrollViewer控件

俄罗斯贵宾会 4

俄罗斯贵宾会 5俄罗斯贵宾会 6消息框基础C#

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

俄罗斯贵宾会 7俄罗斯贵宾会 8滚动函数体

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

 1     /// <summary>
 2         /// 消息体滚动框
 3         /// </summary>
 4         public ScrollViewer ScrollViewer { get; set; }
 5     
 6     // 初始化滚动条
 7         private void PART_ContentHost_Initialized(object sender, EventArgs e)
 8         {
 9             this.ScrollViewer = sender as ScrollViewer;
10         }

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

  此时的效果如图所示:俄罗斯贵宾会 9  看起来还不错吧,右上角的关闭按钮由于截图原因不是很清晰,稍后我们可以看到完整版的要好一些。

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;
 1     // 坚向位移
 2         private double _ScrollY
 3         {
 4             get { return _scrollY; }
 5             set
 6             {
 7                 _scrollY = value;
 8                 // 开启滚动
 9                 if (_scrollY != 0 && (_ScrollYResult == null || _ScrollYResult.IsCompleted))
10                     _ScrollYResult = _ScrollYAction.BeginInvoke(null, null);
11             }
12         }
13         private double _scrollY;
14 
15         // 横向位移
16         private double _ScrollX
17         {
18             get { return _scrollX; }
19             set
20             {
21                 _scrollX = value;
22                 // 开启滚动
23                 if (_scrollX != 0 && (_ScrollXResult == null || _ScrollXResult.IsCompleted))
24                     _ScrollXResult = _ScrollXAction.BeginInvoke(null, null);
25             }
26         }
27         private double _scrollX;
28 
29     // 竖向滚动
30         private Action _ScrollYAction;
31         private IAsyncResult _ScrollYResult;
32     
33         // 横向滚动
34         private Action _ScrollXAction;
35         private IAsyncResult _ScrollXResult;

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

  首先,给前台的最上层元素TextBox添加SelectionChanged="TextBox_SelectionChanged"事件,以追踪选中时鼠标所在位置:

一、先看看效果

俄罗斯贵宾会 10俄罗斯贵宾会 11消息框基础XAML

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

 1         /// <summary>
 2         /// 滚动框背景
 3         /// </summary>
 4         public Brush ScrollViewerBackground
 5         {
 6             get { return (Brush)GetValue(ScrollViewerBackgroundProperty); }
 7             set { SetValue(ScrollViewerBackgroundProperty, value); }
 8         }
 9         public static readonly DependencyProperty ScrollViewerBackgroundProperty =
10             DependencyProperty.Register("ScrollViewerBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.LightBlue));
11 
12         /// <summary>
13         /// 滚动条前景
14         /// </summary>
15         public Brush ScrollBarForeground
16         {
17             get { return (Brush)GetValue(ScrollBarForegroundProperty); }
18             set { SetValue(ScrollBarForegroundProperty, value); }
19         }
20         public static readonly DependencyProperty ScrollBarForegroundProperty =
21             DependencyProperty.Register("ScrollBarForeground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.RoyalBlue));
22 
23         /// <summary>
24         /// 滚动条背景
25         /// </summary>
26         public Brush ScrollBarBackground
27         {
28             get { return (Brush)GetValue(ScrollBarBackgroundProperty); }
29             set { SetValue(ScrollBarBackgroundProperty, value); }
30         }
31         public static readonly DependencyProperty ScrollBarBackgroundProperty =
32             DependencyProperty.Register("ScrollBarBackground", typeof(Brush), typeof(MessageTextBox), new PropertyMetadata(Brushes.WhiteSmoke));

 

  当然不要忘记,把“_ScrollYAction = ScrollYMethod;”,“_ScrollXAction

ScrollXMethod;”这两条委托初始化语句放到PART_ContentHost_Initialized事件处理函数中去,不然就白写了。

  至此,问题2也修改完毕。

  问题3:自动滚动到底部

  实际上这不是问题,而是一个改善,因为一般的滚动条都没有这个功能。在实用中,假如消息是不停地填写到消息框中,理想中应该是当拖动滚动条时,不会自动把滚动条更新到最近的一条消息,而是锁定到拖动的位置(因为我想看的是拖动到的消息)。另外,如果想实时看新消息,就需要自动滚动到最底部。

  解决方法:

  当滚动条拖动到最底部时,就开启自动滚动,每来一条新消息都滚动一次到最底部。如果滚动条不在最底部就不用自动滚动。实现方法就是为TextBox添加TextChanged="TextBox_TextChanged"事件,以判断是否需要滚动:

1         private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
2         {
3             if (this.Text != "" && ScrollViewer != null)
4             {
5                 // 如果已经拖到最底端,则固定住
6                 if (ScrollViewer.ScrollableHeight == ScrollViewer.VerticalOffset)
7                     ScrollViewer.ScrollToBottom();
8             }
9         }

  终于码完字了,多想只贴代码啊。放个图,大家看看吧:

俄罗斯贵宾会 12

  请无视上面的那个蓝色横条,那是我另外一个程序中的GridSplitter。这个自定义控件除了支持TextBox的所有属性外,还可以改变配色(使用公开的属性),另外还有点击清空、关闭按钮的操作实现都不难,不贴了,感兴趣的下载源代码看看吧。

  源代码:ScrollTest.rar

  转载请注明原址:http://www.cnblogs.com/lekko/archive/2013/02/27/2935022.html 

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

  要进行改造的ScrollViewer控件就位于第一部分XAML代码中的省略部分,我现在只贴出这部分代码:

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

  问题1:鼠标中轮不能使ScrollViewer上下滚动

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

 1     // 竖向
 2     private void ScrollYMethod()
 3         {
 4             double endOffset = 0;
 5             if (_ScrollY < 0)       // 向上滚动
 6                 endOffset = 0;
 7             else                    // 向下滚动
 8                 ScrollViewer.Dispatcher.Invoke((Action)(() => endOffset = ScrollViewer.ScrollableHeight), null);
 9             // 初始位置
10             double offset = 0;
11             ScrollViewer.Dispatcher.Invoke((Action)(() => offset = ScrollViewer.VerticalOffset), null);
12             // 开始滚动
13             while (offset != endOffset && _ScrollY != 0)
14             {
15                 ScrollViewer.Dispatcher.Invoke((Action)(() =>
16                 {
17                     offset = ScrollViewer.VerticalOffset;
18                     ScrollViewer.ScrollToVerticalOffset(ScrollViewer.VerticalOffset + _ScrollY);
19                 }), null);
20                 Thread.Sleep(100);
21             }
22         }
23 
24     // 横向
25     private void ScrollXMethod()
26         {
27             double endOffset = 0;
28             if (_ScrollX < 0)       // 向左滚动
29                 endOffset = 0;
30             else                    // 向右滚动
31                 ScrollViewer.Dispatcher.Invoke((Action)(() => endOffset = ScrollViewer.ScrollableWidth), null);
32             // 初始位置
33             double offset = 0;
34             ScrollViewer.Dispatcher.Invoke((Action)(() => offset = ScrollViewer.HorizontalOffset), null);
35             // 开始滚动
36             while (offset != endOffset && _ScrollX != 0)
37             {
38                 ScrollViewer.Dispatcher.Invoke((Action)(() =>
39                 {
40                     offset = ScrollViewer.HorizontalOffset;
41                     ScrollViewer.ScrollToHorizontalOffset(ScrollViewer.HorizontalOffset + _ScrollX);
42                 }), null);
43                 Thread.Sleep(100);
44             }
45         }

 

  三、修正一些问题

 

  为什么把这做为单独的一环来讨论呢?因为前面的代码已经能够完成基本的工作了,而且出现的问题关系也并不是非常大。但是总会不爽,因为它就不那么完善,所以,Fix It!

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

  后台代码此时也非常简单,只是简单地继承了TextBox控件:

  • (e.Delta >> 2));
      }

  本博文分为三个部分,第一部分将描述如何改写TextBox的布局,第二部分则描述如何改写TextBox中的ScrollViewer样式,第三部分则是对自定义样式时产生的不明问题进行修补。

  下面介绍本文的核心,如何自定义ScrollViewer控件,当然,我们的目标也不是把它改成什么奇葩,只是想把滚动条变得漂亮一点而已。如果使用WPF比较多的朋友会知道,许多控件都是由很多层一层一层地叠加形成可视化树的,ScrollViewer也不例外,现在通过Template属性可以完全自己定义其结构。

 1         private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
 2         {
 3             if (ScrollViewer != null && this.SelectedText != "")
 4             {
 5                 var point = System.Windows.Input.Mouse.GetPosition(ScrollViewer);
 6                 // 纵向位移
 7                 double y = point.Y;
 8                 if (y > 0)
 9                 {
10                     y = y - ScrollViewer.ActualHeight;
11                     if (y < 0) y = 0;
12                 }
13                 _ScrollY = y;
14                 // 横向位移
15                 double x = point.X;
16                 if (x > 0)
17                 {
18                     x = x - ScrollViewer.ActualWidth;
19                     if (x < 0) x = 0;
20                 }
21                 _ScrollX = x;
22             }
23         }

俄罗斯贵宾会 13

  另外,如果不是把ScrollViewer的Name设置为“PART_ContentHost”,而是使用<TextBlock Text="{TemplateBinding Text}" TextWrapping="{TemplateBinding TextWrapping}" />放置到ScrollViewer体中,就可以正常滚动。不过这时会导致无法选中文本了,因为TextBlock中的文本是不支持选中的,特别注意到,这时的滚动效率非常低,滚动时画面有明显的迟钝现象。同样如果不把ScrollViewer的Name设置为“PART_ContentHost”,而用<Decorator Name="PART_ContentHost" />放置到ScrollViewer体中,虽然选中也能支持,但是依然不能滚动。

本文由俄罗斯贵宾会发布于编程,转载请注明出处:WPF 控件库——带有惯性的ScrollViewer【俄罗斯贵宾会】

您可能还会对下面的文章感兴趣: