前言
在工业控制领域，WPF 以其丰富灵活的控件样式设计，成为工控组态软件开发中的首选。相较于传统的WinForm，WPF提供更强大的图形处理能力和更加灵活的UI设计方式。
本文将通过两个简单的例子——表示水流的管道和转动的冷却风扇，介绍如何使用WPF进行工控组态软件的设计与开发。
设计知识点
本示例中涉及了多个重要的WPF设计知识点，包括自定义用户控件、WPF形状与动画的应用、依赖属性等。通过这些知识点的应用，可以实现高度定制化的控件，并且能够很好地与业务逻辑解耦。
自定义用户控件
用户可以根据业务需要自定义控件，将普通的控件进行组合，封装，以满足特定的功能，并达到复用的目的。
WPF 形状与动画
可以通过选择，移动，变形等相关功能，改变控件的呈现形状。
依赖属性
WPF可以通过依赖属性进行数据的绑定，实现UI与业务逻辑的解耦。
效果预览
示例主要实现了管道，和冷却扇，然后通过不同的旋转，移动并加以组合，如下所示：
管道Pipeline
1、控件布局
管道采用Border控件，并设置渐变背景色，模拟出管道的外观效果。
水流则使用Line控件，通过虚线形式表现水流的效果。
以下是相关代码片段：
<Border CornerRadius="{Binding CapRadius, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FFCBCBCB" Offset="0.1"></GradientStop>
<GradientStop Color="White" Offset="0.5"></GradientStop>
<GradientStop Color="#FFCBCBCB" Offset="0.8"></GradientStop>
</LinearGradientBrush>
</Border.Background>
<!-- 其他代码 -->
</Border>
2、状态管理
管道控件支持两种流向状态：东西流向（WEFlowState）和西东流向（EWFlowState）。
通过VisualStateManager来管理这两种状态，实现动态效果。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WEFlowState">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0" To="-5" Storyboard.TargetName="liquidline" Storyboard.TargetProperty="StrokeDashOffset">
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="EWFlowState">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" From="0" To="5" Storyboard.TargetName="liquidline" Storyboard.TargetProperty="StrokeDashOffset">
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
3、依赖属性
流向方向和水流颜色被设定为依赖属性，允许用户根据需要进行绑定设置。
namespace WpfControl.UserControls
{
/// <summary>
/// Pipeline.xaml 的交互逻辑
/// </summary>
publicpartialclassPipeline : UserControl
{
/// <summary>
/// 流水方向
/// </summary>
public WaterDirection Direction
{
get { return (WaterDirection)GetValue(DirectionProperty); }
set { SetValue(DirectionProperty, value); }
}
// Using a DependencyProperty as the backing store for Direction. This enables animation, styling, binding, etc...
publicstaticreadonly DependencyProperty DirectionProperty =
DependencyProperty.Register("Direction", typeof(WaterDirection), typeof(Pipeline), new PropertyMetadata(default(WaterDirection),new PropertyChangedCallback(OnDirectionChanged)));
private static void OnDirectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
WaterDirection value =(WaterDirection) e.NewValue;
VisualStateManager.GoToState(d as Pipeline, value == WaterDirection.WE ? "WEFlowState" : "EWFlowState", false);
}
/// <summary>
/// 颜色
/// </summary>
public Brush LiquidColor
{
get { return (Brush)GetValue(LiquidColorProperty); }
set { SetValue(LiquidColorProperty, value); }
}
// Using a DependencyProperty as the backing store for LiquidColor. This enables animation, styling, binding, etc...
publicstaticreadonly DependencyProperty LiquidColorProperty =
DependencyProperty.Register("LiquidColor", typeof(Brush), typeof(Pipeline), new PropertyMetadata(Brushes.Orange));
publicint CapRadius
{
get { return (int)GetValue(CapRadiusProperty); }
set { SetValue(CapRadiusProperty, value); }
}
// Using a DependencyProperty as the backing store for CapRadius. This enables animation, styling, binding, etc...
publicstaticreadonly DependencyProperty CapRadiusProperty =
DependencyProperty.Register("CapRadius", typeof(int), typeof(Pipeline), new PropertyMetadata(0));
public Pipeline()
{
InitializeComponent();
}
}
}
冷却风扇
1、风扇布局
风扇是通过Path控件绘制而成，利用iconfont网站获取的形状数据。
风扇的旋转动画通过Loaded事件触发，实现持续旋转的效果。
<Border>
<Path Stretch="Fill" Fill="Goldenrod" Data="M261.851429 528.822857c-43.885714-24.868571-84.845714-23.405714-121.417143 5.851429-35.108571 26.331429-49.737143 62.902857-43.885715 106.788571 5.851429 38.034286 19.017143 74.605714 40.96 108.251429 21.942857 35.108571 46.811429 59.977143 76.068572 74.605714 78.994286 40.96 147.748571 29.257143 207.725714-35.108571 19.017143-20.48 33.645714-43.885714 46.811429-73.142858 14.628571-32.182857 23.405714-61.44 24.868571-90.697142 0-14.628571 7.314286-21.942857 19.017143-21.942858s19.017143 5.851429 24.868571 16.091429c17.554286 51.2 14.628571 99.474286-10.24 143.36-24.868571 43.885714-21.942857 84.845714 4.388572 119.954286 26.331429 35.108571 62.902857 49.737143 106.788571 42.422857 38.034286-5.851429 74.605714-19.017143 108.251429-40.96 35.108571-21.942857 59.977143-46.811429 74.605714-76.068572 40.96-78.994286 29.257143-147.748571-36.571428-206.262857-20.48-19.017143-43.885714-35.108571-73.142858-48.274285-32.182857-14.628571-61.44-23.405714-90.697142-24.868572-14.628571 0-21.942857-7.314286-21.942858-19.017143s5.851429-20.48 17.554286-23.405714c20.48-7.314286 40.96-11.702857 62.902857-11.702857 27.794286 0 54.125714 7.314286 78.994286 20.48 43.885714 24.868571 84.845714 23.405714 121.417143-4.388572 35.108571-26.331429 49.737143-62.902857 43.885714-106.788571-5.851429-38.034286-19.017143-74.605714-40.96-108.251429-21.942857-35.108571-46.811429-59.977143-76.068571-74.605714-78.994286-40.96-147.748571-29.257143-207.725715 35.108572-19.017143 20.48-33.645714 45.348571-46.811428 73.142857-14.628571 32.182857-23.405714 62.902857-24.868572 90.697143 0 13.165714-7.314286 20.48-19.017142 21.942857s-20.48-5.851429-24.868572-16.091429c-7.314286-20.48-10.24-40.96-10.24-64.365714 0-27.794286 7.314286-54.125714 20.48-78.994286 24.868571-43.885714 21.942857-84.845714-4.388571-119.954286-26.331429-35.108571-61.44-49.737143-105.325715-43.885714-38.034286 5.851429-74.605714 19.017143-108.251428 40.96-35.108571 21.942857-59.977143 46.811429-76.068572 76.068572-40.96 78.994286-29.257143 147.748571 36.571429 207.725714 20.48 19.017143 45.348571 35.108571 73.142857 48.274286 32.182857 14.628571 61.44 21.942857 90.697143 23.405714 14.628571 0 21.942857 7.314286 21.942857 19.017143s-5.851429 20.48-17.554286 24.868571c-49.737143 17.554286-98.011429 14.628571-141.897142-10.24m279.405714-46.811428c8.777143 8.777143 11.702857 17.554286 11.702857 29.257142s-4.388571 21.942857-11.702857 30.72c-8.777143 7.314286-17.554286 11.702857-29.257143 11.702858s-21.942857-4.388571-30.72-11.702858c-8.777143-8.777143-11.702857-19.017143-11.702857-30.72s4.388571-21.942857 11.702857-29.257142c8.777143-8.777143 19.017143-13.165714 30.72-13.165715 11.702857 1.462857 20.48 4.388571 29.257143 13.165715z">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" CenterX="{Binding CenterX, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" CenterY="{Binding CenterY, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"></RotateTransform>
</TransformGroup>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="UserControl.Loaded">
<BeginStoryboard>
<Storyboard Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
<DoubleAnimation Duration="0:0:2" From="0" To="360" BeginTime="0:0:0" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Border>
2、依赖属性
风扇旋转中心点也被设定为依赖属性，方便在使用时进行调整。
namespace WpfControl.UserControls
{
/// <summary>
/// CoolingPie.xaml 的交互逻辑
/// </summary>
publicpartialclassCoolingPie : UserControl
{
publicint CenterX
{
get { return (int)GetValue(CenterXProperty); }
set { SetValue(CenterXProperty, value); }
}
// Using a DependencyProperty as the backing store for CWidth. This enables animation, styling, binding, etc...
publicstaticreadonly DependencyProperty CenterXProperty =
DependencyProperty.Register("CenterX", typeof(int), typeof(CoolingPie), new PropertyMetadata(0));
publicint CenterY
{
get { return (int)GetValue(CenterYProperty); }
set { SetValue(CenterYProperty, value); }
}
// Using a DependencyProperty as the backing store for CHeight. This enables animation, styling, binding, etc...
publicstaticreadonly DependencyProperty CenterYProperty =
DependencyProperty.Register("CenterY", typeof(int), typeof(CoolingPie), new PropertyMetadata(0));
public CoolingPie()
{
InitializeComponent();
}
}
}
整体布局
在控件定义好后，就是将控件拼接组合，以达到预期的效果，如下所示：
<Grid>
<ScrollViewer Margin="10" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<Canvas Margin="10">
<uctrl:Pipeline x:Name="top" Panel.ZIndex="4" Canvas.Top="-10" Canvas.Left="0" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualWidth}" Direction="WE" LiquidColor="Red" Height="30" CapRadius="20"></uctrl:Pipeline>
<uctrl:Pipeline x:Name="right" Panel.ZIndex="3" Margin="0" Canvas.Right="-10" Canvas.Top="10" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" Direction="WE" LiquidColor="Red" Height="30" CapRadius="20">
<uctrl:Pipeline.RenderTransform>
<TransformGroup>
<TranslateTransform X="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" Y="0"></TranslateTransform>
<RotateTransform Angle="90" CenterX="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" CenterY="0"></RotateTransform>
</TransformGroup>
</uctrl:Pipeline.RenderTransform>
</uctrl:Pipeline>
<uctrl:Pipeline x:Name="bottom" Panel.ZIndex="2" Canvas.Bottom="-15" Canvas.Right="0" Direction="EW" LiquidColor="Red" Height="30" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualWidth}" CapRadius="20"></uctrl:Pipeline>
<uctrl:Pipeline x:Name="left" Panel.ZIndex="1" Canvas.Left="15" Canvas.Top="0" Direction="EW" LiquidColor="Red" Height="30" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" CapRadius="20">
<uctrl:Pipeline.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90" ></RotateTransform>
</TransformGroup>
</uctrl:Pipeline.RenderTransform>
</uctrl:Pipeline>
<uctrl:Pipeline x:Name="middle" Panel.ZIndex="1" Canvas.Left="360" Canvas.Top="0" Direction="EW" LiquidColor="Red" Height="30" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" CapRadius="20">
<uctrl:Pipeline.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90" ></RotateTransform>
</TransformGroup>
</uctrl:Pipeline.RenderTransform>
</uctrl:Pipeline>
<uctrl:CoolingPie Canvas.Right="-10" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
<uctrl:CoolingPie Canvas.Right="-10" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
<uctrl:CoolingPie Canvas.Left="-10" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
<uctrl:CoolingPie Canvas.Left="-10" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
<uctrl:CoolingPie Canvas.Left="325" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
<uctrl:CoolingPie Canvas.Left="325" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
</Canvas>
</ScrollViewer>
</Grid>
上述内容详细介绍了如何利用WPF的强大功能创建工控组态软件中的关键组件，如管道和冷却风扇。这些组件不仅具有美观的界面设计，还具备良好的交互性和扩展性，非常适合用于实际项目中。
总结
通过本文的例子可以看出，WPF为开发提供一种高效且灵活的方式来进行工控组态软件的设计。
不管是复杂的动画效果还是精细的数据绑定，WPF都能轻松应对。希望本文能给大家带来一些启发，帮助大家更好地理解和应用WPF技术。
关键词
#WPF、#自定义用户控件、#形状与动画、#依赖属性、#工控组态、#管道、#冷却风扇
最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。
也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！
优秀是一种习惯，欢迎大家留言学习！
作者：老马识途
出处：cnblogs.com/hsiang/p/16790188.html
声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！
