先给各位看看效果,可能不太完美,不过效果还是可行的。

我觉得,可能直接放个GIF图片上去会更好。

我这个不是用图片,而是用DrawingBrush画出来的。接着重做ProgressBar控件的模板,把一个矩形放进名为PART_Indicator的可视化元素中,该命名元素用来指示进度条的当前进度。

1、放一个ScrollViewer,把水平和垂直的滚动条都隐藏。

2、ScrollViewer里面放Rectangle,把矩形的宽度设置为其容器宽度的N倍,这样在动画中对矩形平移时,就不会出现空白区域。试了许久,我还是把矩形放在ScrollViewer中,如果不这样做,在用动画对矩形实行平移后,矩形在界面以外的部分会被截去,导致产生空白区域。使用ScrollViewer正是防止这种情况出现。

3、应用动画。

<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="Indicator" ClipToBounds="False">
<Rectangle x:Name="rect" Width="{Binding ElementName=Indicator,Path=ActualWidth,Converter={StaticResource acthCvt},ConverterParameter=5}" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Stretch">
<Rectangle.RenderTransform>
<TranslateTransform X="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<ScrollViewer.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded" >
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="0" To="{Binding ElementName=Indicator,Path=ActualWidth,Converter={StaticResource ttCvt}}" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ScrollViewer.Triggers>
</ScrollViewer>

EventTrigger可以通过路由事件来触发动画,Loaded事件是在对应元素装入内存后引发,这时候可以启动动画。

好了,原理其实就是自行绘制画刷 + 动画平移来实现的。代码我会上传,大家参考一下即可。

下载地址:http://files.cnblogs.com/tcjiaan/%E6%BB%91%E5%8A%A8%E8%BF%9B%E5%BA%A6%E6%9D%A1.zip

[WPF]有滑动效果的进度条的更多相关文章

  1. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  2. C# WPF 解压缩7zip文件 带进度条 sevenzipsharp

      vs2013附件 :http://download.csdn.net/detail/u012663700/7427461 C# WPF 解压缩7zip文件 带进度条 sevenzipsharp W ...

  3. CSS3 中的按钮效果与进度条

    效果如图

  4. ReactJS尝鲜:实现tab页切换和菜单栏切换和手风琴切换效果,进度条效果

    前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  5. Android 三种方式实现自定义圆形页面加载中效果的进度条

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...

  6. 有3D效果的进度条

    // The Unofficial Newsletter of Delphi Users - Issue #12 - February 23rd, 1996 unit Percnt3d; (* TPe ...

  7. WPF 下载网络文件 带进度条

      附件:http://files.cnblogs.com/xe2011/WpfApplication3_downloadFile.rar 使用         private void Button ...

  8. WPF 简单的绕圈进度条(无cs代码)

    方案: 图标位置不变化的情况下设置透明度实现 代码: <Window x:Class="WpfApp1.MainWindow" xmlns="http://sche ...

  9. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

随机推荐

  1. Sql server中访问Excel---select from Excel

    本文介绍在MSSMS中通过SQL语句查询Excel的方法. 访问Excel主要是通过Office提供的ACE数据源来完成这个操作,使用opendatasource来实现访问Excel.即在MSSMS中 ...

  2. android TCP 客户端(仅接收数据)

    配合log4net使用,用来接收调试信息.因此,此客户端只管通过TCP接收字符串数据,然后显示在界面上. 接收TCP数据 try { Socket s = new Socket("192.1 ...

  3. JAVA设计模式--工厂方法模式

    工厂方法设计模式 抽象工厂角色: 这是工厂方法模式的核心,它与应用程序无关.是具体工厂角色必须实现的接口或者必须继承的父类.在java中它由抽象类或者接口来实现.具体工厂角色:它含有和具体业务逻辑有关 ...

  4. Go+sublime text3的环境搭建

    1.安装Go语言. .msi下载地址:http://download.csdn.net/detail/u014075041/9555543 根据提示安装成功! 在命令行中执行 go env   有提示 ...

  5. 从头安装及配置PL/SQL Developer

    原文地址:http://lightguide.blog.51cto.com/3121539/1140588 因为自己安装及配置中走了不少弯路,搜索网上的文档大部分没有包含oralce client的安 ...

  6. Java jstatd详解

    jstatd 命令全称: Virtual Machine jstat Daemon DESCRIPTION The  jstatd tool is an RMI server application ...

  7. xampp开启php-debug

    [XDebug]zend_extension = "C:\xampp\php\ext\php_xdebug.dll";xdebug.profiler_append = 0;xdeb ...

  8. React Native也正式发布了

    var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.create ...

  9. centos 安装ffmpeg

    wget http://www.ffmpeg.org/releases/ffmpeg-3.1.tar.gz tar -zxvf ffmpeg-3.1.tar.gz cd ffmpeg-3.1 ./co ...

  10. TypeScript之基本数据类型

    前言 最近项目很急,所以没有什么时间回答关于Xamarin.Android方面的问题,也有一段时间没有更新.主要是手头很缺人,如果有谁有兴趣加入我们的话,可以私聊我,这样我就能继续造福社区了,同时还有 ...