[WPF]有滑動效果的進度條

先給各位看看效果，可能不太完美，不過效果還是可行的。

我覺得，可能直接放個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