让 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。
让 ScrollViewer 的滚动带上动画的更多相关文章
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【WPF】ScrollViewer无法滚动的问题
还需要给ScrollViewer注册一个鼠标滚轮事件! XAML: <ScrollViewer x:Name="scrollViewer" Width="950&q ...
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡...)
众所周知,想要让ImageView旋转的话,可以用setRotation()让其围绕中心点旋转,但这个旋转是不带动画的,也就是旋转屏幕时图片噌的一下就转过去了,看不到旋转的过程,此UI体验不大好,为此 ...
- Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...
- 【HDU 4940】Destroy Transportation system(无源无汇带上下界可行流)
Description Tom is a commander, his task is destroying his enemy’s transportation system. Let’s repr ...
随机推荐
- SVM(三)线性支持向量机
本文是在微信公众号发表的原创~ 额,图片粘不过来~就把链接给你们吧 http://mp.weixin.qq.com/s?__biz=MjM5MzM5NDAzMg==&mid=400740076 ...
- PHP数据库链接类(PDO+Access)
PHP PDO Access链接 class DbHelpClass { private $conn; private $qxId; private $ret; function __construc ...
- POJ3768 Katu Puzzle
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- sublime的一些插件
新安装的sublime缺少一些插件… 1.文件路径没有提示 ctrl+shift+p → install → autofilename 2..html后缀的文件中,使用快捷键!不能自动出现内容 ctr ...
- mongodb安装、运行
1.下载安装: 切换到:/usr/local/ mkdir -p mongodb groupadd -g 800 mongodb useradd -u 801 -g mongodb mongodb c ...
- Kotlin------函数和代码注释
定义函数 Kotlin定义一个函数的风格大致如下 访问控制符 fun 方法名(参数,参数,参数) : 返回值类型{ ... ... } 访问控制符:与Java有点差异,Kotlin的访问范围从大到小分 ...
- IOS UI-自定义UIColectionView布局
ViewController.m // // ViewController.m // IOS_0226_自定义UIColectionView布局 // // Created by ma c on 16 ...
- 【Error】:10061由于目标计算机积极拒绝,无法连接
之前Windows上连接mongodb的时候首先用mongod.exe启动程序之后,用mongo.exe来连接数据库.但是在连接的时候,出现如下错误: error:10061 由于目标计算机积极拒绝, ...
- ansible入门三(Ansible的基础元素和YAML介绍)
Ansible的基础元素和YAML介绍 本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...
- 身份证真实性校验js、mini ui身份证长度正则验证
身份证号码真实性校验 <input type="text" value="请输入身份证号" id="cards" ><bu ...