WPF以其丰富灵活的控件样式设计，相较于WinForm而言，一直是工控组态软件的宠儿。经过上一篇文章的学习，已经对WPF开发工控组态软件有了一个基本的了解，今天继续学习冷却塔和空气压缩机的开发，仅供学习分享使用，如有不足之处，还请指正。

设计知识点

关于本示例中，涉及的知识点，如下所示：

自定义用户控件，用户可以根据业务需要自定义控件，将普通的控件进行组合，封装，以满足特定的功能，并达到复用的目的。
WPF形状，动画，可以通过选择，移动，变形等相关功能，改变控件的呈现形状。
依赖属性，WPF可以通过依赖属性进行数据的绑定，实现UI与业务逻辑的解耦。

冷却塔CoolingTower

冷却塔组成拆解

关于冷却塔的组成部分，经过拆解如下所示：

顶部一个经过旋转和缩放的风扇（Path）
一个椭圆形（Ellipse）和一个路径形状（Path），使得椭圆看起来像立体一样
一个不规则形状多边形（Ploygon）
一个四边形（Border），两个圆形指示灯（Border），两个四边形底座（Border），表示前景和侧面。

经过以上分析，不难发现，复杂的图形均是由简单的图形组合起来的。

冷却塔示例截图

冷却塔正常运转时，绿灯亮且风扇转动，异常时红灯亮，且风扇停止。截图如下所示：

冷却塔源码

冷却塔源码分为三个组成部分，如下所示：

1. 控件布局

控件布局主要是排版布局形状等内容。如下所示：

<Viewbox HorizontalAlignment="Center" VerticalAlignment="Center"><Canvas Width="205" Height="245" Margin="5"><Polygon Points="0,65 40,10 205,10 180,65 " Fill="#EEE"></Polygon><Path Data="M0 0 A60 15 0 0 0 120 0 L120 25 A60 15 0 0 1 0 25" Canvas.Left="45" Canvas.Top="15"><Path.Fill><LinearGradientBrush EndPoint="1,0" StartPoint="0,0"><GradientStop Color="#FFD6D6D6" Offset="0"></GradientStop><GradientStop Color="White" Offset="0.52"></GradientStop><GradientStop Color="#FFD6D6D6" Offset="1"></GradientStop></LinearGradientBrush></Path.Fill></Path><Ellipse Width="120" Height="30" Fill="#CCC" Canvas.Left="45"></Ellipse><Border Canvas.Left="52" Canvas.Top="-38"><Viewbox Width="105" Height="105" RenderTransformOrigin="0.5,0.5"><Viewbox.RenderTransform><TransformGroup><RotateTransform Angle="20" x:Name="rt"></RotateTransform><ScaleTransform ScaleY="0.25"></ScaleTransform></TransformGroup></Viewbox.RenderTransform><Path Stretch="Fill" 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" Fill="#EEE"></Path></Viewbox></Border><Grid Width="180" Height="180" Canvas.Top="65" Background="#E0E0E0"><Border VerticalAlignment="Top" Height="140" BorderThickness="10"><Border.Background><DrawingBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="1,0,25,1"><DrawingBrush.Drawing><GeometryDrawing><GeometryDrawing.Pen><Pen Brush="#EEE"></Pen></GeometryDrawing.Pen><GeometryDrawing.Geometry><PathGeometry><PathFigure><LineSegment Point="10,0"></LineSegment><LineSegment Point="10,10"></LineSegment></PathFigure></PathGeometry></GeometryDrawing.Geometry></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Border.Background></Border><Grid Height="50" VerticalAlignment="Bottom"><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Border Background="DarkGray" Grid.Column="0" Margin="5,0"></Border><Border Background="DarkGray" Grid.Column="1" Margin="5,0"></Border></Grid></Grid><Grid Width="180" Height="180" Canvas.Top="65" Canvas.Left="180" Background="#E0E0E0"><Grid.RenderTransform><TransformGroup><ScaleTransform ScaleX="0.139"></ScaleTransform><SkewTransform AngleY="-65.5"></SkewTransform></TransformGroup></Grid.RenderTransform><Border VerticalAlignment="Top" Height="140" BorderThickness="10"><Border.Background><DrawingBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="1,0,25,1"><DrawingBrush.Drawing><GeometryDrawing><GeometryDrawing.Pen><Pen Brush="#EEE"></Pen></GeometryDrawing.Pen><GeometryDrawing.Geometry><PathGeometry><PathFigure><LineSegment Point="10,0"></LineSegment><LineSegment Point="10,10"></LineSegment></PathFigure></PathGeometry></GeometryDrawing.Geometry></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Border.Background></Border><Grid Height="50" VerticalAlignment="Bottom"><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Border Background="DarkGray" Grid.Column="0" Margin="5,0"></Border><Border Background="DarkGray" Grid.Column="1" Margin="5,0"></Border></Grid></Grid><Border Width="18" Height="18" CornerRadius="10" Canvas.Left="150" Canvas.Top="80"><Border.Background><RadialGradientBrush><GradientStop Color="Gray" Offset="0.6" x:Name="gsGreen"></GradientStop><GradientStop Color="White"></GradientStop></RadialGradientBrush></Border.Background></Border><Border Width="18" Height="18" CornerRadius="10" Canvas.Left="150" Canvas.Top="105"><Border.Background><RadialGradientBrush><GradientStop Color="Gray" Offset="0.6" x:Name="gsRed"></GradientStop><GradientStop Color="White"></GradientStop></RadialGradientBrush></Border.Background></Border></Canvas>
</Viewbox>

2. 状态管理

冷却塔有两个状态，正常运行状态和异常状态，分别对应不同的呈现。如下所示：

<VisualStateManager.VisualStateGroups><VisualStateGroup><VisualState x:Name="normalState"><Storyboard><DoubleAnimation Duration="0:0:0.5" From="0" To="-360" RepeatBehavior="Forever" Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"></DoubleAnimation><ColorAnimationUsingKeyFrames Storyboard.TargetName="gsGreen" Storyboard.TargetProperty="Color"><DiscreteColorKeyFrame Value="Green" KeyTime="0"></DiscreteColorKeyFrame></ColorAnimationUsingKeyFrames></Storyboard></VisualState><VisualState x:Name="errorState"><Storyboard><ColorAnimationUsingKeyFrames Storyboard.TargetName="gsRed" RepeatBehavior="Forever" Storyboard.TargetProperty="Color" Duration="0:0:1"><DiscreteColorKeyFrame Value="Red" KeyTime="0:0:0.5"></DiscreteColorKeyFrame><DiscreteColorKeyFrame Value="Gray" KeyTime="0:0:1"></DiscreteColorKeyFrame></ColorAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup>
</VisualStateManager.VisualStateGroups>

3. 依赖属性

在本示例中，依赖属性主要用于控制状态，如下所示：

namespace WpfControl.UserControls
{/// <summary>/// CoolingTower.xaml 的交互逻辑/// </summary>public partial class CoolingTower : UserControl{public RunningState RunningState{get { return (RunningState)GetValue(RunningStateProperty); }set { SetValue(RunningStateProperty, value); }}// Using a DependencyProperty as the backing store for RunningState.  This enables animation, styling, binding, etc...public static readonly DependencyProperty RunningStateProperty =DependencyProperty.Register("RunningState", typeof(RunningState), typeof(CoolingTower), new PropertyMetadata(default(RunningState), RunningStateChangedCallback));private static void RunningStateChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e){RunningState value = (RunningState)e.NewValue;VisualStateManager.GoToState(d as CoolingTower, value == RunningState.Normal ? "normalState" : "errorState", false);}public CoolingTower(){InitializeComponent();}}
}

4. 调用示例

组件写好后，调用非常简单，如下所示：

<Window x:Class="WpfControl.TestWindow2"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControl"xmlns:uctrl="clr-namespace:WpfControl.UserControls"mc:Ignorable="d"Title="冷却塔" Height="450" Width="800"><Grid><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><uctrl:CoolingTower Grid.Column="0" RunningState="Error" Width="100" Height="100"></uctrl:CoolingTower><uctrl:CoolingTower Grid.Column="1" RunningState="Normal" Width="100" Height="100"></uctrl:CoolingTower></Grid>
</Window>

空气压缩机AirCompresser

空气压缩机功能拆解

关于空气压缩式机的组成部分，经过拆解如下所示：

左侧一个四边形（Path）
顶部一个四边形（Path）
前景一个四边形（Path），两条线（Line）
两个小圆点（Ellipse）
底部一个四边形（Border）
右上角指示灯（Ellipse）

经过以上分析，不难发现，空气压缩机均是由简单的图形组合起来的。

空气压缩机示例截图

空气压缩式机同样包括两种状态，正常状态，绿灯亮和异常状态，红灯闪烁。示例截图如下所示：

空气压缩机源码

空气压缩机源码分为三个组成部分，如下所示：

1. 页面布局

页面布局主要进行控件的排版，如下所示：

<Viewbox Stretch="Fill"><Grid><Path x:Name="left" Data="M0,0,0,200,80,300,80,70" Fill="Gray"></Path><Path x:Name="top" Data="M0,0,80,70,400,60,320 -10" Fill="Gray"></Path><Path x:Name="front" Data="M80,300,80,70,400,60,400,280" Fill="LightGray"></Path><Line x:Name="l1" X1="180" X2="180" Y1="66" Y2="280" StrokeThickness="1" Stroke="Gray"></Line><Line x:Name="l2" X1="280" X2="280" Y1="66" Y2="280" StrokeThickness="1" Stroke="Gray"></Line><Ellipse x:Name="c1" Width="10" Height="10" Fill="DarkGray"></Ellipse><Ellipse x:Name="c2" Width="10" Height="10" Fill="DarkGray" Margin="0,3,80,0"></Ellipse><Border x:Name="bottom"  Height="22" Background="DarkGray" Margin="80,0,0,0" VerticalAlignment="Bottom"><Border.RenderTransform><SkewTransform AngleY="-4"></SkewTransform></Border.RenderTransform></Border><Ellipse x:Name="alarm"  Width="18" Height="18" Margin="0,80,10,0" HorizontalAlignment="Right" VerticalAlignment="Top"><Ellipse.Fill><SolidColorBrush Color="LightGray"></SolidColorBrush></Ellipse.Fill></Ellipse></Grid>
</Viewbox>

2. 状态管理

空气压缩机主要有两种状态，分别表示不同的运行情况，如下所示：

<VisualStateManager.VisualStateGroups><VisualStateGroup><VisualState x:Name="errorState"><Storyboard RepeatBehavior="Forever"><ColorAnimation Duration="0:0:0.5" From="White" To="Red" BeginTime="0:0:0"   Storyboard.TargetName="alarm" Storyboard.TargetProperty="Fill.Color"></ColorAnimation></Storyboard></VisualState><VisualState x:Name="normalSate"><Storyboard RepeatBehavior="Forever"><ColorAnimation Duration="0:0:0.1" From="LightGreen" To="LightGreen" BeginTime="0:0:0" Storyboard.TargetName="alarm" Storyboard.TargetProperty="Fill.Color"></ColorAnimation></Storyboard></VisualState></VisualStateGroup>
</VisualStateManager.VisualStateGroups>

3. 依赖属性

空气压缩机的依赖属性和冷却塔相似，如下所示：

namespace WpfControl.UserControls
{/// <summary>/// AirCompresser.xaml 的交互逻辑/// </summary>public partial class AirCompresser : UserControl{public RunningState RunningState{get { return (RunningState)GetValue(RunningStateProperty); }set { SetValue(RunningStateProperty, value); }}// Using a DependencyProperty as the backing store for RunningState.  This enables animation, styling, binding, etc...public static readonly DependencyProperty RunningStateProperty =DependencyProperty.Register("RunningState", typeof(RunningState), typeof(AirCompresser), new PropertyMetadata(default(RunningState),RunningStateChangedCallback));private static void RunningStateChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e){RunningState value = (RunningState)e.NewValue;VisualStateManager.GoToState(d as AirCompresser, value == RunningState.Error ? "errorState" : "normalSate", false);}public AirCompresser(){InitializeComponent();}}
}

4. 调用示例

调用空气压缩机示例，如下所示：

<Window x:Class="WpfControl.TestWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfControl"xmlns:uctrl="clr-namespace:WpfControl.UserControls"mc:Ignorable="d"Title="空气压缩机示例" Height="450" Width="800"><Grid><uctrl:AirCompresser Width="150" Height="100" RunningState="Error" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></uctrl:AirCompresser><uctrl:AirCompresser Width="150" Height="100" RunningState="Normal" Margin="50,200,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"></uctrl:AirCompresser><uctrl:AirCompresser Width="150" Height="100" RunningState="Normal" Margin="0,0,10,10" HorizontalAlignment="Right" VerticalAlignment="Bottom"></uctrl:AirCompresser><uctrl:AirCompresser Width="150" Height="100" RunningState="Error" Margin="0,0,50,200" HorizontalAlignment="Right" VerticalAlignment="Bottom"></uctrl:AirCompresser></Grid>
</Window>

备注

以上就是本篇文章的全部内容，旨在抛砖引玉，共同学习，一起进步。学习编程，从关注【老码识途】开始！！！

WPF工控组态软件之冷却塔和空气压缩机开发相关推荐

WPF工控组态软件之管道和冷却风扇开发
WPF以其丰富灵活的控件样式设计,相较于WinForm而言,一直是工控组态软件的宠儿,本文以两个简单的小例子,简述如何通过WPF设计出表示水流的管道,和转动的冷却风扇.仅供学习分享使用,如有不足之处, ...
WPF工控组态软件之温度计
WPF以其丰富灵活的控件样式设计,相较于WinForm而言,一直是工控组态软件的宠儿.经过前两文章的学习,已经对WPF开发工控组态软件有了一个基本的了解, 今天继续学习温度计的开发,仅供学习分享使用, ...
适应各种工控组态软件的图库，一款常用的工控图库，包括3D按钮、箭头、对角线、多边形、鼓风机、锅炉、工厂等多种图形
适应各种工控组态软件的图库,一款常用的工控图库,包括3D按钮 .箭头.对角线.多边形.鼓风机.锅炉.工厂等多种图形,有四千个图形,涵盖了所有行业的工控图形,种类丰富,可以满足您日常工控设计需求,支持e ...
工控组态王6.60 SP3软件7.5 SP4 授权软件狗 USB 硬件狗分享下载
工控组态王6.60 SP3软件授权软件狗 USB 硬件狗分享下载技术咨询QQ:3137723307 组态王6.60是一款非常好用的工业类自动化控制软件,此版本继承了前面几个版本的所有功能,可 ...
金百福系统一直显示连接服务器,三维力控组态软件V7.2/7.1/7.0 新版加密狗无限点全授权...
软件名称:三维力控组态软件V7.2/7.1/7.0 新版加密狗无限点全授权三维力控组态软件,USB加密狗,送教学! [V7.2 最新版]: 无限点,全功能, 支持WEB发布,含所有扩展组件温馨提醒 ...
力控批量添加变量_力控组态软件的变量操作函数1
力控组态软件ForceControl V7.0的变量操作函数1 DisableOperate 语法DisableOperate (flag) 说明禁止用户对变量的操作. 参数flag:禁止标志.取值含 ...
力控组态软件后台组件Ado组件的控件方法及常用命令
力控组态软件后台组件Ado组件的控件方法及常用命令先在SQL SERVER中建立一个表Table_1,包含3个字段: d_t 日期时间型 int_1 整数型 float_1 浮点型 1.在配置> ...
mysql关联力控_力控组态软件的专家报表的关系数据库函数
力控组态软件ForceControl V7.0的专家报表的关系数据库函数 ExecuteSQL 语法: #report.ExecuteSQL(nSheetIndex, strSQL); 说明: 执行标 ...
力控串口服务器虚拟串口,M4系列串口服务器与力控组态软件MODBUS TCP 协议通信...
软件需求:力控组态软件力控 ForceControl V7.0 . 优势:无需虚拟串口软件做转发 2:MODBUS RTU 产品采用温湿度传感器读取温湿度指令是 11 04 00 00 00 02 ...

WPF工控组态软件之冷却塔和空气压缩机开发

设计知识点

冷却塔CoolingTower

冷却塔组成拆解

冷却塔示例截图

冷却塔源码

1. 控件布局

2. 状态管理

3. 依赖属性

4. 调用示例

空气压缩机AirCompresser

空气压缩机功能拆解

空气压缩机示例截图

空气压缩机源码

1. 页面布局

2. 状态管理

3. 依赖属性

4. 调用示例

备注

WPF工控组态软件之冷却塔和空气压缩机开发相关推荐

最新文章

热门文章