CyberX8/CyberX8_Themes/UserControls/PrewetFLowControl.xaml

<UserControl x:Class="CyberX8_Themes.UserControls.PrewetFLowControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CyberX8_Themes.UserControls"
             xmlns:converters="clr-namespace:CyberX8_Themes.Converters"
             mc:Ignorable="d" Name="self"
             d:DesignHeight="100" d:DesignWidth="200">
    <UserControl.Resources>
        <converters:BoolToReverse x:Key="boolToReverse"/>
        <converters:BoolToDoubleConverter x:Key="boolToDoubleConverter"/>
    </UserControl.Resources>
    <Canvas MinHeight="100" MinWidth="100" Margin="0,0,0,31" >
        <Canvas.Resources>
            <Style x:Key="AnimatingFlow1" TargetType="{x:Type Line}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=self,Path=IsShow}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="FlowStoryboard1">
                                <Storyboard RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
                                    <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset" Duration="0:0:4" To="-70"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="FlowStoryboard1" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Resources>
        <Line Name="path1" 
          X1="0" Y1="0" X2="20" Y2="0"
          Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
          Stretch="Fill" 
          Width="40" 
          Height="5" 
          Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
          StrokeThickness="3" 
          Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="-23" Canvas.Top="36" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path2" 
      X1="0" Y1="0" X2="20" Y2="0"
      Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
      Stretch="Fill" 
      Width="40" 
      Height="5" 
      Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
      StrokeThickness="3" 
      Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="-6" Canvas.Top="35" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path3" 
  X1="0" Y1="0" X2="20" Y2="0"
  Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
  Stretch="Fill" 
  Width="40" 
  Height="5" 
  Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
  StrokeThickness="3" 
  Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="10" Canvas.Top="34" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path4" 
X1="0" Y1="0" X2="20" Y2="0"
Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
Stretch="Fill" 
Width="40" 
Height="5" 
Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
StrokeThickness="3" 
Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="26" Canvas.Top="35" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path5" 
          X1="0" Y1="0" X2="20" Y2="0"
          Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
          Stretch="Fill" 
          Width="40" 
          Height="5" 
          Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
          StrokeThickness="3" 
          Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="42" Canvas.Top="36" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path6" 
      X1="0" Y1="0" X2="20" Y2="0"
      Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
      Stretch="Fill" 
      Width="40" 
      Height="5" 
      Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
      StrokeThickness="3" 
      Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="58" Canvas.Top="35" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path7" 
  X1="0" Y1="0" X2="20" Y2="0"
  Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
  Stretch="Fill" 
  Width="40" 
  Height="5" 
  Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
  StrokeThickness="3" 
  Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="74" Canvas.Top="34" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
        <Line Name="path8" 
X1="0" Y1="0" X2="20" Y2="0"
Opacity="{Binding ElementName=self,Path=IsShow,Converter={StaticResource boolToDoubleConverter}}" 
Stretch="Fill" 
Width="40" 
Height="5" 
Stroke="{Binding ElementName=self,Path=Color}"  StrokeDashArray="2,3" StrokeDashCap="Round" 
StrokeThickness="3" 
Style="{StaticResource AnimatingFlow1}" RenderTransformOrigin="0.5,0.5" Canvas.Left="90" Canvas.Top="35" HorizontalAlignment="Center" VerticalAlignment="Top" >
            <Line.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90.64"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Line.RenderTransform>
        </Line>
    </Canvas>

</UserControl>