WPF工控组态软件之管道和冷却风扇开发

惊雷无声  金牌会员 | 2022-10-15 12:30:57 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 899|帖子 899|积分 2697

WPF以其丰富灵活的控件样式设计，相较于WinForm而言，一直是工控组态软件的宠儿，本文以两个简单的小例子，简述如何通过WPF设计出表示水流的管道，和转动的冷却风扇。仅供学习分享使用，如有不足之处，还请指正。

设计知识点

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

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

本示例主要实现了管道，和冷却扇，然后通过不同的旋转，移动并加以组合，如下所示：

管道Pipeline

在本示例中，管道和冷却扇均是用户控件，方便复用。管道开发步骤如下所示：
1. 控件布局

管道采用Border控件，并设置渐变的背景色，水流采用Line控件，样式采用虚线StrokeDashArray，看起来就会是一节一节的。让中间的Line动起来，就像是水在流动一样，这样就可以实现管道中水流的效果。源码如下所示：
  1. 1 <Border CornerRadius="{Binding CapRadius, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}">
  2. 2     <Border.Background>
  3. 3         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  4. 4             <GradientStop Color="#FFCBCBCB" Offset="0.1"></GradientStop>
  5. 5             <GradientStop Color="White" Offset="0.5"></GradientStop>
  6. 6             <GradientStop Color="#FFCBCBCB" Offset="0.8"></GradientStop>
  7. 7         </LinearGradientBrush>
  8. 8     </Border.Background>
  9. 9     <Border x:Name="border" Margin="10,2" >
  10. 10         <Line x:Name="liquidline"
  11. 11               X1="0" Y1="0"
  12. 12               X2="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth}"
  13. 13               Y2="0"
  14. 14               Stroke="{Binding LiquidColor, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
  15. 15               StrokeThickness="10"
  16. 16               VerticalAlignment="Center"
  17. 17               StrokeDashArray="2,3"
  18. 18               StrokeDashCap="Round"
  19. 19               StrokeStartLineCap="Round"
  20. 20               StrokeEndLineCap="Round"
  21. 21               Opacity="0.5"
  22. 22               Stretch="Fill">
  23. 23         </Line>
  24. 24     </Border>
  25. 25 </Border>
复制代码
2. 状态管理

在管道控件中，有两种状态，可以控制水流的方向【东西流向，还是西东流向】，如下所示：
  1. 1 <VisualStateManager.VisualStateGroups>
  2. 2     <VisualStateGroup>
  3. 3         <VisualState x:Name="WEFlowState">
  4. 4             <Storyboard RepeatBehavior="Forever">
  5. 5                 <DoubleAnimation Duration="0:0:1" From="0" To="-5" Storyboard.TargetName="liquidline" Storyboard.TargetProperty="StrokeDashOffset">
  6. 6                     
  7. 7                 </DoubleAnimation>
  8. 8             </Storyboard>
  9. 9         </VisualState>
  10. 10         <VisualState x:Name="EWFlowState">
  11. 11             <Storyboard RepeatBehavior="Forever">
  12. 12                 <DoubleAnimation Duration="0:0:1" From="0" To="5" Storyboard.TargetName="liquidline" Storyboard.TargetProperty="StrokeDashOffset">
  13. 13
  14. 14                 </DoubleAnimation>
  15. 15             </Storyboard>
  16. 16         </VisualState>
  17. 17     </VisualStateGroup>
  18. 18 </VisualStateManager.VisualStateGroups>  
复制代码
 
3. 依赖属性

在管道示例中，流向可以作为依赖属性，在使用时进行绑定设置，还有水流的颜色，也可以由用户设置。如下所示：
  1. 1 namespace WpfControl.UserControls
  2. 2 {
  3. 3     /// <summary>
  4. 4     /// Pipeline.xaml 的交互逻辑
  5. 5     /// </summary>
  6. 6     public partial class Pipeline : UserControl
  7. 7     {
  8. 8
  9. 9         /// <summary>
  10. 10         /// 流水方向
  11. 11         /// </summary>
  12. 12         public WaterDirection Direction
  13. 13         {
  14. 14             get { return (WaterDirection)GetValue(DirectionProperty); }
  15. 15             set { SetValue(DirectionProperty, value); }
  16. 16         }
  17. 17
  18. 18         // Using a DependencyProperty as the backing store for Direction.  This enables animation, styling, binding, etc...
  19. 19         public static readonly DependencyProperty DirectionProperty =
  20. 20             DependencyProperty.Register("Direction", typeof(WaterDirection), typeof(Pipeline), new PropertyMetadata(default(WaterDirection),new PropertyChangedCallback(OnDirectionChanged)));
  21. 21
  22. 22         private static void OnDirectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  23. 23         {
  24. 24             WaterDirection value =(WaterDirection) e.NewValue;
  25. 25             VisualStateManager.GoToState(d as Pipeline, value == WaterDirection.WE ? "WEFlowState" : "EWFlowState", false);
  26. 26         }
  27. 27
  28. 28
  29. 29         /// <summary>
  30. 30         /// 颜色
  31. 31         /// </summary>
  32. 32         public Brush LiquidColor
  33. 33         {
  34. 34             get { return (Brush)GetValue(LiquidColorProperty); }
  35. 35             set { SetValue(LiquidColorProperty, value); }
  36. 36         }
  37. 37
  38. 38         // Using a DependencyProperty as the backing store for LiquidColor.  This enables animation, styling, binding, etc...
  39. 39         public static readonly DependencyProperty LiquidColorProperty =
  40. 40             DependencyProperty.Register("LiquidColor", typeof(Brush), typeof(Pipeline), new PropertyMetadata(Brushes.Orange));
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45         public int CapRadius
  46. 46         {
  47. 47             get { return (int)GetValue(CapRadiusProperty); }
  48. 48             set { SetValue(CapRadiusProperty, value); }
  49. 49         }
  50. 50
  51. 51         // Using a DependencyProperty as the backing store for CapRadius.  This enables animation, styling, binding, etc...
  52. 52         public static readonly DependencyProperty CapRadiusProperty =
  53. 53             DependencyProperty.Register("CapRadius", typeof(int), typeof(Pipeline), new PropertyMetadata(0));
  54. 54
  55. 55
  56. 56
  57. 57         public Pipeline()
  58. 58         {
  59. 59             InitializeComponent();
  60. 60         }
  61. 61     }
  62. 62 }
复制代码
冷却风扇

1. 风扇布局

在本示例中，冷却风扇是一个简单的风扇，因为风扇是自定义形状，所以需要才用Path控件，至于风扇的形状数据，可以通过iconfont网站进行获取。且风扇是一直转动的，所以可以通过Loaded事件进行触发。当然也可以通过其他事件进行触发，如单击等。如下所示：
  1. 1 <Border>
  2. 2     <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">
  3. 3         <Path.RenderTransform>
  4. 4             <TransformGroup>
  5. 5                 <RotateTransform Angle="0" CenterX="{Binding CenterX, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" CenterY="{Binding CenterY, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"></RotateTransform>
  6. 6             </TransformGroup>
  7. 7         </Path.RenderTransform>
  8. 8         <Path.Triggers>
  9. 9             <EventTrigger RoutedEvent="UserControl.Loaded">
  10. 10                 <BeginStoryboard>
  11. 11                     <Storyboard Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
  12. 12                         <DoubleAnimation Duration="0:0:2" From="0" To="360" BeginTime="0:0:0" ></DoubleAnimation>
  13. 13                     </Storyboard>
  14. 14                 </BeginStoryboard>
  15. 15             </EventTrigger>
  16. 16         </Path.Triggers>
  17. 17     </Path>
  18. 18 </Border>
复制代码
 
2. 依赖属性

风扇旋转的中心点，设置成依赖属性，可以空格使用时进行设置
  1. 1 namespace WpfControl.UserControls
  2. 2 {
  3. 3     /// <summary>
  4. 4     /// CoolingPie.xaml 的交互逻辑
  5. 5     /// </summary>
  6. 6     public partial class CoolingPie : UserControl
  7. 7     {
  8. 8
  9. 9         public int CenterX
  10. 10         {
  11. 11             get { return (int)GetValue(CenterXProperty); }
  12. 12             set { SetValue(CenterXProperty, value); }
  13. 13         }
  14. 14
  15. 15         // Using a DependencyProperty as the backing store for CWidth.  This enables animation, styling, binding, etc...
  16. 16         public static readonly DependencyProperty CenterXProperty =
  17. 17             DependencyProperty.Register("CenterX", typeof(int), typeof(CoolingPie), new PropertyMetadata(0));
  18. 18
  19. 19
  20. 20         public int CenterY
  21. 21         {
  22. 22             get { return (int)GetValue(CenterYProperty); }
  23. 23             set { SetValue(CenterYProperty, value); }
  24. 24         }
  25. 25
  26. 26         // Using a DependencyProperty as the backing store for CHeight.  This enables animation, styling, binding, etc...
  27. 27         public static readonly DependencyProperty CenterYProperty =
  28. 28             DependencyProperty.Register("CenterY", typeof(int), typeof(CoolingPie), new PropertyMetadata(0));
  29. 29
  30. 30
  31. 31         public CoolingPie()
  32. 32         {
  33. 33             InitializeComponent();
  34. 34         }
  35. 35     }
  36. 36 }
复制代码
整体布局

在控件定义好后，就是将控件拼接组合，以达到预期的效果，如下所示：
  1. 1 <Grid>
  2. 2     <ScrollViewer Margin="10" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
  3. 3         <Canvas Margin="10">
  4. 4             <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>
  5. 5             <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">
  6. 6                 <uctrl:Pipeline.RenderTransform>
  7. 7                     <TransformGroup>
  8. 8                         <TranslateTransform X="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" Y="0"></TranslateTransform>
  9. 9                         <RotateTransform Angle="90" CenterX="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}, Path=ActualHeight}" CenterY="0"></RotateTransform>
  10. 10                     </TransformGroup>
  11. 11                 </uctrl:Pipeline.RenderTransform>
  12. 12             </uctrl:Pipeline>
  13. 13             <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>
  14. 14             <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">
  15. 15                 <uctrl:Pipeline.RenderTransform>
  16. 16                     <TransformGroup>
  17. 17                         <RotateTransform Angle="90" ></RotateTransform>
  18. 18                     </TransformGroup>
  19. 19                 </uctrl:Pipeline.RenderTransform>
  20. 20             </uctrl:Pipeline>
  21. 21             <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">
  22. 22                 <uctrl:Pipeline.RenderTransform>
  23. 23                     <TransformGroup>
  24. 24                         <RotateTransform Angle="90" ></RotateTransform>
  25. 25                     </TransformGroup>
  26. 26                 </uctrl:Pipeline.RenderTransform>
  27. 27             </uctrl:Pipeline>
  28. 28             <uctrl:CoolingPie Canvas.Right="-10" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  29. 29             <uctrl:CoolingPie Canvas.Right="-10" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  30. 30             <uctrl:CoolingPie Canvas.Left="-10" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  31. 31             <uctrl:CoolingPie Canvas.Left="-10" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  32. 32             <uctrl:CoolingPie Canvas.Left="325" Canvas.Top="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  33. 33             <uctrl:CoolingPie Canvas.Left="325" Canvas.Bottom="-10" Panel.ZIndex="5" Width="40" Height="40" CenterX="20" CenterY="20"></uctrl:CoolingPie>
  34. 34         </Canvas>
  35. 35     </ScrollViewer>
  36. 36 </Grid>
复制代码
备注

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊雷无声

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表