[WPF]有滑动效果的进度条_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > [WPF]有滑动效果的进度条

[WPF]有滑动效果的进度条

 2014/4/8 19:28:21  东邪独孤  博客园  我要评论(0)
  • 摘要:先给各位看看效果,可能不太完美,人过效果还是可行的。我觉得,可能直接放个GIF图片上去会更好。我这个不是用图片,而是用DrawingBrush画出来的。接着重做ProgressBar控件的模板,把一个矩形放进名为PART_Indicator的可视化元素中,该命名无素用来指示进度条的当前进度。1、放一个ScrollViewer,把水平和垂直的滚动条都隐藏。2、ScrollViewer里面放Rectangle,把矩形的宽度设置为其容器宽度的N倍,这样在动画中对矩形平移时,就不会出现空白区域
  • 标签:进度条 滑动

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

我觉得,可能直接放个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

 

发表评论
用户名: 匿名