WPF实现ScrollViewer滚动到指定控件处
在前端 UI 开发中,有时,我们会遇到这样的需求:在一个 ScrollViewer 中有很多内容,而我们需要实现在执行某个操作后能够定位到其中指定的控件处;这很像在 HTML 页面中点击一个链接后定位到当前网页上的某个 anchor。
要实现它,首先我们需要看 ScrollViewer 为我们提供的 API,其中并没有类似于 ScrollToControl 这样的方法;在它的几个以 ScrollTo 开头的方法中,最合适的就是 ScrollToVerticalOffset 这个方法了,这个方法接受一个参数,即纵向的偏移位置。那么,很重要的问题:我们怎么能得到要定位的那个控件在 ScrollViewer 中的位置呢?
在我之前写的这篇文章中:XAML: 获取元素的位置,有如何获到元素相对位置的介绍,建议大家先了解一下,其中使用了 Visual.TransformToVisual 方法等。当你理解了这篇文章后,再回过头来看本文后面的内容,就很容易了。
接下来,我们使用以下代码,即可实现上述需求:
1
2
3
4
5
6
7
|
// 获取要定位之前 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 作进一步了解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
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); } } } |
其使用方法如下:
1
2
3
4
5
6
7
|
<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,我们以非常灵活的方式实现了本文所提出的需求。
WPF实现ScrollViewer滚动到指定控件处的更多相关文章
- WPF: 实现 ScrollViewer 滚动到指定控件处
在前端 UI 开发中,有时,我们会遇到这样的需求:在一个 ScrollViewer 中有很多内容,而我们需要实现在执行某个操作后能够定位到其中指定的控件处:这很像在 HTML 页面中点击一个链接后定位 ...
- WPF布局之让你的控件随着窗口等比放大缩小,适应多分辨率满屏填充应用
一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小怎么变,都不会改变,这样的设计对于一般的应用程序来说是没有问题的,但是对于一些比较特殊的应用,比如有背景图片的,需要铺面整个 ...
- WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单M ...
- WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...
- WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案
首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如 WPF中不规则窗体与WebBrowser控件的兼 ...
- WPF笔记(1.9 样式和控件模板)——Hello,WPF!
原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window > <Window.Resources> <St ...
- WPF自定义控件(三)の扩展控件
扩展控件,顾名思义就是对已有的控件进行扩展,一般继承于已有的原生控件,不排除继承于自定义的控件,不过这样做意义不大,因为既然都自定义了,为什么不一步到位呢,有些不同的需求也可以通过此来完成,不过类似于 ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- WPf 带滚动条WrapPanel 自动换行 和控件右键菜单
原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> < ...
随机推荐
- 【转载】51CTO-Android设置模拟器屏幕大小
在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文. ...
- AC日记——营业额统计 1296 codevs
1296 营业额统计 2002年 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Description Tiger ...
- 2017 ACM-ICPC EC-Final 记录
北京赛区结束后就以为自己的赛季结束了……但是还是保持着做题量 那天突然接到通知,去打EC-Final 但是这是一个临时组起来的队伍,另外两位队友原来一起组的比较熟,我就需要适应一下. 于是我们临时训练 ...
- window下Apache-http-server(httpd-2.4.12)安装与配置
由于Apache官网改变策略(2015年1月左右),官网不再提供Apache-http-server的windows的编译版本,但是提供了几个第三方的版本 http://httpd.apache.or ...
- 某考试 T1 monopoly
可以很容易的发现,如果选了最高的房子,那么就不能再选了:否则在左边选一坨合法的,在右边选一坨合法的,拼起来还是合法的. 所以我们可以处理出,每个数的控制区间[L,R] (保证这个区间是其他数都小于它的 ...
- Codeforces 869 C The Intriguing Obsession
题目描述 — This is not playing but duty as allies of justice, Nii-chan! — Not allies but justice itself, ...
- JSP介绍与语法-java之JSP学习第一天(非原创)
文章大纲 一.JSP 简介二.JSP 生命周期三.JSP 语法四.学习资料下载五.参考文章 一.JSP 简介 1. 什么是Java Server Pages? JSP全称Java Server P ...
- NOIP2016模拟赛三 Problem B: 神奇的树
题面 Description 有一棵神奇的树.这棵树有N个节点,在每个节点上都有宝藏,每个宝藏价值V[i]金币:对于每条边,每经过一次都要花费C[i]金币. 值得注意的是,每个宝藏只能领取一次(也可以 ...
- Jenkins集成java非maven/ant项目的打包思路
打包的思路如下: 1.使用javac命令对代码进行编译,比如递归编译整个项目的java代码.(注意:需要一一对应引用的jar包) 2.输出并整理war包的文件夹结构目录,参考:http://www.c ...
- Java中的JAR/EAR/WAR包的文件夹结构说明(转)
JAR包:打成JAR包的代码,一般作为工具类,在项目中,会应用到N多JAR工具包. WAR包:JAVA WEB工程,都是打成WAR包,进行发布,如果我们的服务器选择TOMCAT等轻量级服务器,一般就打 ...