Sic.Framework-Nanjing-Baishi/MECF.Framework.UI.Core/Control/FlowPipeV2.xaml

<UserControl
    x:Class="Aitex.Core.UI.Control.FlowPipeV2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctrl="clr-namespace:Aitex.Core.Util"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Name="flowPipeControl"
    Width="100"
    Height="8">
    <UserControl.RenderTransform>
        <RotateTransform x:Name="rotateTransform" Angle="0" />
    </UserControl.RenderTransform>
    <Canvas MinWidth="100" MinHeight="4">
        <Canvas.Resources>
            <Style x:Key="AnimatingFlow" TargetType="{x:Type Path}">
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Value="true">
                                <Condition.Binding>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <ctrl:FlowConverterForAllTrueMultiBinding />
                                        </MultiBinding.Converter>
                                        <MultiBinding.Bindings>
                                            <Binding ElementName="flowPipeControl" Path="IsFlowing" />
                                            <Binding ElementName="flowPipeControl" Path="IsSlowFlowing" />
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </Condition.Binding>
                            </Condition>
                            <Condition Binding="{Binding ElementName=flowPipeControl, Path=IsReverse}" Value="true" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard Name="FlowStoryboard">
                                <Storyboard RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
                                    <!--<Gas flows from right to left or bottom to top>-->
                                    <DoubleAnimation
                                        By="70"
                                        Storyboard.TargetProperty="StrokeDashOffset"
                                        Duration="0:0:10" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                        <MultiDataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset" Duration="0" />
                                </Storyboard>
                            </BeginStoryboard>
                            <StopStoryboard BeginStoryboardName="FlowStoryboard" />
                        </MultiDataTrigger.ExitActions>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Value="true">
                                <Condition.Binding>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <ctrl:FlowConverterForAllTrueMultiBinding />
                                        </MultiBinding.Converter>
                                        <MultiBinding.Bindings>
                                            <Binding ElementName="flowPipeControl" Path="IsFlowing" />
                                            <Binding ElementName="flowPipeControl" Path="IsSlowFlowing" />
                                        </MultiBinding.Bindings>
                                    </MultiBinding>
                                </Condition.Binding>
                            </Condition>
                            <Condition Binding="{Binding ElementName=flowPipeControl, Path=IsReverse}" Value="false" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard Name="ReverseFlowStoryboard">
                                <Storyboard RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
                                    <!--<Gas flows from left to right or top to bottom>-->
                                    <DoubleAnimation
                                        By="-70"
                                        Storyboard.TargetProperty="StrokeDashOffset"
                                        Duration="0:0:10" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                        <MultiDataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset" Duration="0" />
                                </Storyboard>
                            </BeginStoryboard>
                            <StopStoryboard BeginStoryboardName="ReverseFlowStoryboard" />
                        </MultiDataTrigger.ExitActions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </Canvas.Resources>
        <Path
            Name="path1"
            Width="{Binding ElementName=flowPipeControl, Path=Width}"
            Height="{Binding ElementName=flowPipeControl, Path=Height}"
            Fill="Red"
            Stretch="Fill"
            Stroke="Green"
            StrokeDashArray="1,3"
            StrokeDashCap="Round"
            StrokeThickness="5"
            Style="{StaticResource AnimatingFlow}">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure StartPoint="0,0">
                                <PathFigure.Segments>
                                    <LineSegment Point="80,0" />
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Border
            x:Name="border1"
            Width="{Binding ElementName=flowPipeControl, Path=Width}"
            Height="{Binding ElementName=flowPipeControl, Path=Height}"
            BorderBrush="Gray"
            BorderThickness="1"
            CornerRadius="1"
            Opacity="0.5">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
                    <GradientStop Offset="0" Color="Gray" />
                    <GradientStop Offset="0.5" Color="White" />
                    <GradientStop Offset="1" Color="Gray" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Canvas>
</UserControl>