让 ScrollViewer 的滚动带上动画
WPF 的 ScrollViewer
没有水平滚动和垂直滚动的属性 HorizontalScrollOffset
VerticalScrollOffset
,只有水平滚动和垂直滚动的方法 ScrollToHorizontalOffset
ScrollToVerticalOffset
,那么怎么给滚动过程加上动画呢?
既然没有属性,那我们加个属性好了,反正附加属性就是用来干这个事儿的。
namespace Walterlv
{public static class ScrollViewerBehavior{public static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.RegisterAttached("HorizontalOffset", typeof(double), typeof(ScrollViewerBehavior), new UIPropertyMetadata(0.0, OnHorizontalOffsetChanged));public static void SetHorizontalOffset(FrameworkElement target, double value) => target.SetValue(HorizontalOffsetProperty, value);public static double GetHorizontalOffset(FrameworkElement target) => (double)target.GetValue(HorizontalOffsetProperty);private static void OnHorizontalOffsetChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) => (target as ScrollViewer)?.ScrollToHorizontalOffset((double)e.NewValue);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);}
}
我们在属性的变更通知中调用了 ScrollToHorizontalOffset
和 ScrollToVerticalOffset
方法。这样,便能够通过动画改变属性的方式来调用这两个方法。
那么现在我们就加上动画:
<Storyboard x:Key="ScrollStoryboard"><DoubleAnimation Storyboard.TargetName="ScrollViewer" Storyboard.TargetProperty="(walterlv:ScrollViewerBehavior.HorizontalOffset)"From="0" To="500" Duration="0:0:0.6"><DoubleAnimation.EasingFunction><CircleEase EasingMode="EaseOut"/></DoubleAnimation.EasingFunction></DoubleAnimation>
</Storyboard>
添加一些用于测试的按钮和 ScrollViewer
:
<ScrollViewer Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="3" x:Name="ScrollViewer"HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"><Image Source="https://walterlv.github.io/static/posts/2017-12-09-21-19-50.png" Width="1000"/>
</ScrollViewer><Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" x:Name="ConnectionDestination"VerticalAlignment="Bottom" Height="50" Content="动画目标" Panel.ZIndex="1"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource ScrollStoryboard}"/></EventTrigger></Button.Triggers>
</Button>
现在,我们点击按钮,就可以看到 ScrollViewer
的滚动动画生效了,如下:
额外的,如果希望这个附加属性能够附加到 ListView
或者 ListBox
中,则需要修改 ScrollViewerBehavior
类,然后在 OnHorizontalOffsetChanged
和 OnVerticalOffsetChanged
方法中判断 ListView
和 ListBox
,然后在其中寻找可视元素子级 ScrollViewer
。
转载于:https://www.cnblogs.com/lonelyxmas/p/9688694.html
让 ScrollViewer 的滚动带上动画相关推荐
- HTML5期末考核大作业:美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制 ...
- HTML5期末考核大作业:美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript (1)
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制 ...
- Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...
- android gridview隐藏滚动条,如何禁用GridView中的ScrollViewer的滚动
如何禁用GridView中的ScrollViewer的滚动 10/20/2013 2 minutes to read In this article 这篇文章所讨论的问题似乎有些基础,因为Scroll ...
- 利用css实现太极图的制作(带旋转动画) (课程实践教学项目)
利用css实现太极图的制作(带旋转动画) (课程实践教学项目) 简要说明 第一步:太极图的绘制(1) 相关知识: 实现步骤: 代码: 效果: 第二步:太极图的绘制(2) 相关知识: 实现步骤: 代码: ...
- 带计算机的笔记本图片,带上这些高性能的轻薄笔记本 出差旅行再也不用怕
[PConline 海选导购]传统笔记本往往十分笨重,这对于我们出差旅行而言,是个不小的负担,因此我们通常也不会带上笔记本出远门.但随着轻薄本的面世,很好地解决了携带不便这个问题,而以往有很多轻薄型的 ...
- HTML5期末大作业:绿色环境保护网站设计(10页) 带flash动画带背景音HTML+CSS+JavaScript
HTML5期末大作业:绿色环境保护网站设计(10页) 带flash动画带背景音HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计源码HT ...
- Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
- js实现图片时钟--带翻转动画
js实现图片时钟–带反转动画 首先上图,先看效果 1. 需求 根据当前系统时间来更改这个时钟,更改时间时,数字向上翻动,转成下一个数字. 2. 编程思路 如果只是根据系统时间来更改图片的话,其实很简单 ...
最新文章
- Spring Boot轻松理解动态注入,删除bean
- gitter 卸载_最佳Gitter频道:VR和AR
- Linux学习笔记之文件管理和目录管理类命令
- DbgPrint 函数流程分析
- python界面设计实例-【Python】Tkinter图形界面设计(GUI)
- python软件安装步骤-初学者python详细安装步骤_编程工具
- SpringBoot中访问静态资源
- 2016年春季计算机应用基础,东北师范2016年春季《计算机应用基础》期末考核
- 今天开始学OpenWRT - 21/03/8
- c语言不用第三变量,C语言中几种不用第三变量交换两值的方法
- figure服务器无法显示,求大神帮帮忙,看一下为什么第二个figure出不来,只能显示第一个...
- windows xp 下使用 windows 2003的远程桌面
- 滑雪(信息学奥赛一本通-T1280)
- 自动化运维脚本语言之expect实践学习(1)
- SIMD 编程的优势与SIMD指令:SSE/AVX 与编程demo
- GPU Architect Functional Verification
- 华为最强AI芯片麒麟980发布:全球首款7nm手机芯片,双核NPU,6项世界第一
- 【ACL2020】tBERT: 结合主题模型和BERT实现语义相似度分析
- 窗口函数 OVER(PARTITION BY ...)
- 【数据架构系列-02】从《数据中台能力成熟度模型》的发布,聊聊火了的中台
热门文章
- azkaban工作流调度器及相关工具对比
- 基于MD5的增强型摘要算法
- sql查询每个学生的最高成绩mysql语句
- MyISAM存储引擎
- iOS完全自学手册——[三]Objective-C语言速成,利用Objective-C创建自己的对象...
- 解决VS2008 开发Windows Mobile 项目生成速度慢的问题
- asp.net 2.0 简单实现url重写
- C++面试题--(五)
- 三通道阈值化最好不要使用img_h<0>0.15img_v>0.25的写法~
- MxGraph从入门到精通之4:布局