BPASmartClient/BPASmartClient.CustomResource/UserControls/ConveyBelt2.xaml

<UserControl
    x:Class="BPASmartClient.CustomResource.UserControls.ConveyBelt2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:BPASmartClient.CustomResource.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Border x:Name="br">
        <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center">

            <Canvas
                Width="{Binding ElementName=br, Path=ActualWidth}"
                Height="{Binding ElementName=br, Path=ActualHeight}"
                Margin="5"
                Background="Transparent">

                <Rectangle
                    Canvas.Top="20"
                    Width="{Binding ElementName=br, Path=ActualWidth}"
                    Height="5"
                    HorizontalAlignment="Center"
                    RadiusX="1"
                    RadiusY="1">
                    <Rectangle.Fill>
                        <LinearGradientBrush>
                            <GradientStop Offset="0" Color="#00BEFA" />
                            <GradientStop Offset="0.3" Color="#ddd" />
                            <GradientStop Offset="0.7" Color="#ddd" />
                            <GradientStop Offset="1" Color="#00BEFA" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle
                    x:Name="recDown"
                    Width="{Binding ElementName=br, Path=ActualWidth}"
                    Height="5"
                    Margin="0,80,0,0"
                    HorizontalAlignment="Center"
                    RadiusX="1"
                    RadiusY="1">
                    <Rectangle.Fill>
                        <LinearGradientBrush>
                            <!--<GradientStop Offset="0" Color="LightGray" />
                            <GradientStop Offset="0.5" Color="White" />
                            <GradientStop Offset="1" Color="LightGray" />-->
                            <GradientStop Offset="0" Color="#00BEFA" />
                            <GradientStop Offset="0.3" Color="#ddd" />
                            <GradientStop Offset="0.7" Color="#ddd" />
                            <GradientStop Offset="1" Color="#00BEFA" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Path
                    x:Name="belt"
                    Canvas.Left="10"
                    Canvas.Top="20"
                    StrokeDashArray="2"
                    StrokeThickness="20">
                    <Path.Stroke>
                        <LinearGradientBrush>
                            <GradientStop Offset="0" Color="#00BEFA" />
                            <GradientStop Offset="0.3" Color="#ddd" />
                            <GradientStop Offset="0.7" Color="#ddd" />
                            <GradientStop Offset="1" Color="#00BEFA" />
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>

            </Canvas>
        </Viewbox>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="StockGroup">
                <VisualState Name="RunState">
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation
                            Storyboard.TargetName="belt"
                            Storyboard.TargetProperty="StrokeDashOffset"
                            From="0"
                            To="-100"
                            Duration="0:0:20" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="Stop" />
            </VisualStateGroup>
            <VisualStateGroup Name="DirectionGroup">
                <VisualState Name="LeftState">
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation
                            Storyboard.TargetName="belt"
                            Storyboard.TargetProperty="StrokeDashOffset"
                            From="0"
                            To="100"
                            Duration="0:0:20" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="RightState">
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation
                            Storyboard.TargetName="belt"
                            Storyboard.TargetProperty="StrokeDashOffset"
                            From="0"
                            To="-100"
                            Duration="0:0:20" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</UserControl>