WPF实现一个简单自定义管道

先看效果

 xaml代码

<UserControl x:Class="WPF控件测试.Control.Pipeline"
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:WPF控件测试.Control"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="800">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WELow">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0" To="5"
Storyboard.TargetName="flow" Storyboard.TargetProperty="StrokeDashOffset"/>
</Storyboard>
</VisualState>
<VisualState x:Name="EELow">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0" To="-5"
Storyboard.TargetName="flow" Storyboard.TargetProperty="StrokeDashOffset"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#ffcbcbcb" Offset="0.9"/>
<GradientStop Color="#ffffffff" Offset="0.5"/>
<GradientStop Color="#ffcbcbcb" Offset="0.1"/>
</LinearGradientBrush>
</Border.Background>
<Border Margin="2" Name="bord">
<Line X1="0" Y1="0" X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Y2="0" Stroke="#CD5555" StrokeThickness="{Binding ElementName=bord,Path=ActualHeight}"
VerticalAlignment="Center" StrokeDashArray="5" Stretch="UniformToFill" StrokeDashCap="Round" StrokeStartLineCap="Round"
Opacity="0.7" Name="flow"/>
</Border>
</Border>
</Grid>
</UserControl>

cs代码

public partial class Pipeline : UserControl
{
public Pipeline()
{
InitializeComponent();
}

public int Direction
{
get { return (int)GetValue(DirectionProperty); }
set { SetValue(DirectionProperty, value); }
}

// Using a DependencyProperty as the backing store for Direction. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DirectionProperty =
DependencyProperty.Register("Direction", typeof(int), typeof(Pipeline), new PropertyMetadata(default(int),new PropertyChangedCallback(OnDirectionChanged)));

private static void OnDirectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// VisualStateManager.GoToState(d as Pipeline, int.Parse(e.NewValue.ToString()!)==1? "WELow" : "EELow", false);
VisualStateManager.GoToState(d as Pipeline,int.Parse(e.NewValue.ToString()!) == 1 ? "WELow" : "EELow", false);
}
}