发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
先给各位看看效果,可能不太完美,不过效果还是可行的。
我觉得,可能直接放个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
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
Silverlight:使用 XAML 和 Expression Blend 创建动画
Silverlight:使用 XAML 和 Expression Blend 创建动画使用 XAML 和 Expression Blend 创建动画Lawrence Moroney.确定对其应用动画效果...
WPF的动画开发
WPF的动画开发WPF的动画开发-动画类型 由于动画生成属性值,因此对于不同的属性类型,会有不同的动画类型。这些动画称为“From/To/By”...
代码创建 WPF 旋转、翻转动画(汇总)
Storyboard storyboard = new Storyboard();Triggers> <Grid> <Button Content="旋转" x:Name="DesignerHead" Height="40" Width="60" RenderTra...
[WPF 学习] 13.DataTrigger之EnterAction和ExitAction
[WPF 学习] 13.DataTrigger之EnterAction和ExitAction.TargetProperty="(Button.RenderTransform).(ScaleTransform.ScaleX)" From="0.5" To="1" RepeatBehavior="F...
Silverlight动画效果之渐变风格方式动画
Silverlight动画效果之渐变风格方式动画按照动画的形成方式,Silverlight 动画可以分为两种:Canvas.</Ellipse>复制代码* 创建一个EventTrigger. EventTrigger 响应事件的一组触发器。<Can...
【WPF学习】第五十章 故事板
其他触发器集合(Style.Triggers、DataTemplate.Triggers与ControlTemplate.Triggers)的功能更强大,他们支持三种基本类型的WPF触发器:...
WPF Transform变换
WPF 动画实战 点击时显示圆圈淡出效果
WPF 动画实战 点击时显示圆圈淡出效果。var storyboard = new Storyboard();Storyboard.设置完成之后通过 Storyboard.SetTargetProperty 这个静态方法,将 Animation 和对应的元素的属性路径关联起来,...
.NET CORE(C#) WPF 值得推荐的动画菜单设计
TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetNam...
微信扫码,在手机上查看选中内容