CyberX8/CyberX8_Themes/UserControls/FlowPipe.xaml

<UserControl x:Class="CyberX8_Themes.UserControls.FlowPipe"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:CyberX8_Themes.Converters"
             Name="flowPipeControl" Width="100" Height="8" FlowDirection="{Binding ElementName=flowPipeControl,Path=IsReverse,Converter={StaticResource boolToDirection}}">
    
    <UserControl.Resources>
        <converters:BoolToReverse x:Key="boolToReverse"/>
        <converters:BoolToDoubleConverter x:Key="boolToDoubleConverter"/>
    </UserControl.Resources>
    <UserControl.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="{Binding ElementName=flowPipeControl,Path=RotateTransformValue}"/>
        </TransformGroup>
    </UserControl.RenderTransform>
    <Canvas MinHeight="4" MinWidth="100" >
        <Canvas.Resources>
            <Style x:Key="AnimatingFlow" TargetType="{x:Type Line}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=flowPipeControl,Path=IsFlowing}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="FlowStoryboard">
                                <Storyboard RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
                                    <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset" Duration="0:0:10" To="70"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="FlowStoryboard" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Resources>


        <Border   x:Name="border1"    CornerRadius="{Binding ElementName=flowPipeControl,Path=FCornerRadius}"  BorderBrush="Gray"  BorderThickness="0" 
                  Width="{Binding ElementName=flowPipeControl,Path=Width}" Height="{Binding ElementName=flowPipeControl,Path=Height}">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">

                    <!--<GradientStop Color="Gray" Offset="0"/>-->
                    <GradientStop Color="Gray" Offset="0"/>
                    <GradientStop Color="White"  Offset="0.5"/>
                    <GradientStop Color="Gray" Offset="1"/>
                    <!--<GradientStop Color="Gray" Offset="1"/>-->

                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Line Name="path1" 
              X1="0" Y1="0" X2="80" Y2="0"
              Opacity="{Binding ElementName=flowPipeControl,Path=IsFlowing,Converter={StaticResource boolToDoubleConverter}}" 
              Stretch="Fill" 
              Width="{Binding ElementName=flowPipeControl,Path=Width}" 
              Height="{Binding ElementName=flowPipeControl,Path=Height}" 
              Stroke="{Binding ElementName=flowPipeControl, Path=FlowColor}"  StrokeDashArray="1,3" StrokeDashCap="Round"
              StrokeThickness="{Binding ElementName=flowPipeControl,Path=Height}" 
              Style="{StaticResource AnimatingFlow}" >
        </Line>
    </Canvas>
</UserControl>