WPF实现ScrollViewer滚动到指定控件处

 更新时间:2017年06月22日 13:46:43   作者:WPInfo  
这篇文章主要为大家详细介绍了WPF实现ScrollViewer滚动到指定控件处,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在前端 UI 开发中,有时,我们会遇到这样的需求:在一个 ScrollViewer 中有很多内容,而我们需要实现在执行某个操作后能够定位到其中指定的控件处;这很像在 HTML 页面中点击一个链接后定位到当前网页上的某个 anchor。

要实现它,首先我们需要看 ScrollViewer 为我们提供的 API,其中并没有类似于 ScrollToControl 这样的方法;在它的几个以 ScrollTo 开头的方法中,最合适的就是 ScrollToVerticalOffset 这个方法了,这个方法接受一个参数,即纵向的偏移位置。那么,很重要的问题:我们怎么能得到要定位的那个控件在 ScrollViewer 中的位置呢?

在我之前写的这篇文章中:XAML: 获取元素的位置,有如何获到元素相对位置的介绍,建议大家先了解一下,其中使用了 Visual.TransformToVisual 方法等。当你理解了这篇文章后,再回过头来看本文后面的内容,就很容易了。

接下来,我们使用以下代码,即可实现上述需求:

// 获取要定位之前 ScrollViewer 目前的滚动位置
 var currentScrollPosition = ScrollViewer.VerticalOffset;
 var point = new Point(0, currentScrollPosition);

 // 计算出目标位置并滚动
 var targetPosition = TargetControl.TransformToVisual(ScrollViewer).Transform(point);
 ScrollViewer.ScrollToVerticalOffset(targetPosition.Y);

另外,由于通常情况下,我们会采用 MVVM 模式,因此我们可以将上述代码封装成一个 Action,而避免在 Code-Behind 代码文件中添加上述代码。

新创建的名为 ScrollToControlAction 的 Action,在其中定义两个依赖属性 ScrollViewer 和 TargetControl,分别表示指定的要操作的 ScrollViewer 和要定位到的控件,然后将上述代码放到其 Invoke 方法中即可。由于 Action 并非本文主题,所以这里并不会展开太多的讲解,可以参考以下代码或本文后提供的 Demo 作进一步了解。

namespace ScrollTest
{
 /// <summary>
 /// 在 ScrollViewer 中定位到指定的控件
 /// 说明:目前支持的是垂直滚动
 /// </summary>
 public class ScrollToControlAction : TriggerAction<FrameworkElement>
 {
 public static readonly DependencyProperty ScrollViewerProperty =
 DependencyProperty.Register("ScrollViewer", typeof(ScrollViewer), typeof(ScrollToControlAction), new PropertyMetadata(null));

 public static readonly DependencyProperty TargetControlProperty =
 DependencyProperty.Register("TargetControl", typeof(FrameworkElement), typeof(ScrollToControlAction), new PropertyMetadata(null));

 /// <summary>
 /// 目标 ScrollViewer
 /// </summary>
 public ScrollViewer ScrollViewer
 {
 get { return (ScrollViewer)GetValue(ScrollViewerProperty); }
 set { SetValue(ScrollViewerProperty, value); }
 }

 /// <summary>
 /// 要定位的到的控件
 /// </summary>
 public FrameworkElement TargetControl
 {
 get { return (FrameworkElement)GetValue(TargetControlProperty); }
 set { SetValue(TargetControlProperty, value); }
 }

 protected override void Invoke(object parameter)
 {
 if (TargetControl == null || ScrollViewer == null)
 {
 throw new ArgumentNullException($"{ScrollViewer} or {TargetControl} cannot be null");
 }

 // 检查指定的控件是否在指定的 ScrollViewer 中
 // TODO: 这里只是指定离它最近的 ScrollViewer,并没有继续向上找
 var container = TargetControl.FindParent<ScrollViewer>();
 if (container == null || container != ScrollViewer)
 {
 throw new Exception("The TargetControl is not in the target ScrollViewer");
 }

 // 获取要定位之前 ScrollViewer 目前的滚动位置
 var currentScrollPosition = ScrollViewer.VerticalOffset;
 var point = new Point(0, currentScrollPosition);

 // 计算出目标位置并滚动
 var targetPosition = TargetControl.TransformToVisual(ScrollViewer).Transform(point);
 ScrollViewer.ScrollToVerticalOffset(targetPosition.Y);
 }
 }
}

其使用方法如下:

<Button>
 <i:Interaction.Triggers>
  <i:EventTrigger EventName="Click">
  <local:ScrollToControlAction ScrollViewer="{Binding ElementName=s}" TargetControl="{Binding ElementName=txtSectionC}" />
  </i:EventTrigger>
 </i:Interaction.Triggers>
</Button>

至此,结合 Action,我们以非常灵活的方式实现了本文所提出的需求。

 源码下载

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • .NET CPU爆高事故事故分析某供应链WEB网站

    .NET CPU爆高事故事故分析某供应链WEB网站

    这篇文章主要为大家介绍了.NET CPU爆高事故事故分析某供应链WEB网站,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Asp.net FCKEditor 2.6.3 上传文件没有权限解决方法

    Asp.net FCKEditor 2.6.3 上传文件没有权限解决方法

    到Fckeditor官方网站下载FredCK.FCKeditorV2.vs2005 (asp.net)
    2009-02-02
  • 用WPF实现屏幕文字提示的实现方法

    用WPF实现屏幕文字提示的实现方法

    本文介绍WPF应用程序实现在屏幕上显示一行或多行文字通知。它没有标题栏和最大化最小化等按钮,可以有半透明背景以使文字的显示更清晰,鼠标点击后提示消失。
    2013-07-07
  • asp.net(c#)下各种进制间的轻松转换(2进制、8进制、10进制、16进制)

    asp.net(c#)下各种进制间的轻松转换(2进制、8进制、10进制、16进制)

    在.NET Framework中,System.Convert类中提供了较为全面的各种类型、数值之间的转换功能。
    2010-10-10
  • asp.net使用JS+form表单Post和Get方式提交数据

    asp.net使用JS+form表单Post和Get方式提交数据

    今天小编就为大家分享一篇关于asp.net使用JS+form表单Post和Get方式提交数据,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vs2010显示代码行数的方法

    vs2010显示代码行数的方法

    这篇文章主要为大家详细介绍了如何在vs2010中显示代码的行数,仅要三步实现代码行数显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 浅谈ASP.NET MVC应用程序的安全性

    浅谈ASP.NET MVC应用程序的安全性

    web应用程序的安全性算是一个老生常谈的问题了,当然asp.net mvc也不例外,虽然他在设计之初就对此有了一些防范,但是还是要差很多,有很多地方需要我们程序猿们注意的地方,我们今天就来简单的探讨下
    2014-11-11
  • 详解ASP.NET页面生命周期

    详解ASP.NET页面生命周期

    这篇文章主要为大家介绍了ASP.NET页面生命周期,熟悉页面生命周期非常重要,这样我们才能在生命周期的合适阶段编写代码,需要的朋友可以参考下
    2015-12-12
  • ASP.NET使用ajax实现分页局部刷新页面功能

    ASP.NET使用ajax实现分页局部刷新页面功能

    使用ajax方法实现分页也很简单,主要是两个,ContentTemplate和Trigger。先把listView扔ContentTemplate里面。然后在Trigger里面加入asp:AsyncPostBackTrigger,将ID指向之前的分页控件DataPager控件。具体实现代码大家可以参考下本文
    2017-03-03
  • C# 事件的设计与使用深入理解

    C# 事件的设计与使用深入理解

    事件是用于通知其他对象发生了本对象发生了特定的事情的类型成员;事件是.NET类型成员中相对较为难以理解和实践的一个成员,因为事件的定义不是继承自基础的数据类型,而是对委托(delegate)的封装。所以,在了解事件之前,你需要先了解一点委托
    2012-12-12

最新评论