WPF工控组态软件之温度计

已于 2022-12-20 19:57:59 修改
阅读量1.7k 收藏 13
点赞数 1
分类专栏： .Net技术 文章标签： wpf microsoft 工控组态软件 温度计 管道
于 2022-12-20 13:01:02 首次发布
本文版权归作者和CSDN共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。
本文链接：https://blog.csdn.net/fengershishe/article/details/128379637
版权

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

415cb0a3ebba3a4230ab07c399d73653.png

涉及知识点

 在本示例中，主要知识点如下：

  • WPF阴影效果，线性渐变的设置，主要设置温度计的边框，填充等效果，形成一种金属质感。

  • WPF依赖属性设置，主要设置最大温度，最低温度，和当前温度值

  • WPF线条绘制，主要用于刻度

温度计截图

本示例主要实现功能为自定义刻度值，以及水银条随着当前温度值变化。具体如下所示：

023c88dc5785b26fe318013a94ddfe8c.png

温度计源码

示例源码分为以下2个部分：

1. Thermometer控件

Thermometer控件布局

<UserControl x:Class="WpfControl.UserControls.Thermometer"
             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:WpfControl.UserControls"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="150">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Rectangle StrokeThickness="7" RadiusX="40" RadiusY="15" Fill="White" />
        <Rectangle StrokeThickness="7" RadiusX="40" RadiusY="15">
            <Rectangle.Effect>
                <DropShadowEffect ShadowDepth="0" Direction="0" BlurRadius="7" />
            </Rectangle.Effect>
            <Rectangle.Stroke>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                    <LinearGradientBrush.RelativeTransform>
                        <RotateTransform Angle="40" CenterX="0.5" CenterY="0.5" />
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Black" />
                    <GradientStop Color="White" Offset="0.7" />
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>
        <TextBlock Text="℃" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" FontSize="20" Margin="0, 20" Foreground="#555"/>
        <Canvas Name="MainCanvas" Width="75" Margin="0,70" />
        <Border Width="10" RenderTransformOrigin="0.5,0.5" CornerRadius="5" Margin="0,50">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="0" Direction="0" Color="White" />
            </Border.Effect>
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="lightGray" Offset="0" />
                    <GradientStop Color="White" Offset="0.4" />
                    <GradientStop Color="lightGray" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <Border Height="75" VerticalAlignment="Bottom" Name="BorValue">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="#CD3333"  />
                        <GradientStop Color="#FFC0CB" Offset="0.4" />
                        <GradientStop Color="#CD3333" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </Border>
        <Border Height="25" Width="25" CornerRadius="15" VerticalAlignment="Bottom" Margin="0 0 0 30">
            <Border.Effect>
                <DropShadowEffect Direction="0" ShadowDepth="0" />
            </Border.Effect>
            <Border.Background>
                <RadialGradientBrush Center="0.3,0.2" GradientOrigin="0.4,0.4">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="#CD3333" Offset="1" />
                </RadialGradientBrush>
            </Border.Background>
        </Border>
        <TextBox Grid.Row="1" Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}" HorizontalContentAlignment="Center" BorderThickness="0" BorderBrush="AliceBlue" VerticalAlignment="Bottom" FontSize="20" Name="ThermometerValue" />
    </Grid>
</UserControl>

依赖属性设置及后台生成刻度源码，如下所示：

namespace WpfControl.UserControls
{
    /// <summary>
    /// Thermometer.xaml 的交互逻辑
    /// </summary>
    public partial class Thermometer : UserControl
    {
        public int Minmum
        {
            get { return (int)GetValue(MinmumProperty); }
            set { SetValue(MinmumProperty, value); }
        }

        public static readonly DependencyProperty MinmumProperty =
            DependencyProperty.Register("Minmum", typeof(int), typeof(Thermometer), new PropertyMetadata(1, new PropertyChangedCallback(OnPropertyValueChanged)));


        public int Maxmum
        {
            get { return (int)GetValue(MaxmumProperty); }
            set { SetValue(MaxmumProperty, value); }
        }

        public static readonly DependencyProperty MaxmumProperty =
            DependencyProperty.Register("Maxmum", typeof(int), typeof(Thermometer), new PropertyMetadata(10, new PropertyChangedCallback(OnPropertyValueChanged)));



        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value);}
        }

        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(double), typeof(Thermometer), new PropertyMetadata(0.0, new PropertyChangedCallback(OnPropertyValueChanged)));

        /// <summary>
        /// 当属性值发生变化的时候直接更新UI内容
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnPropertyValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as Thermometer)?.RefreshComponet();
        }

        private double step = 10;

        public Thermometer()
        {
            InitializeComponent();
            this.DataContext = this;
        }

        /// <summary>
        /// 刷新温度计上面的内容适应定义大小
        /// </summary>
        /// <exception cref="NotImplementedException"></exception>
        private void RefreshComponet()
        {
            // 两种方式触发：尺寸变化、区间变化
            var h = this.MainCanvas.ActualHeight;//通过这个判断界面元素是否加载
            if (h == 0) return;
            double w = 75;
            // 类型
            double stepCount = Maxmum - Minmum;// 在这个区间内多少个间隔
            step = h / (Maxmum - Minmum);// 每个间隔距离

            this.MainCanvas.Children.Clear();

            for (int i = 0; i <= stepCount; i++)
            {
                Line line = new Line();
                line.Y1 = i * step;
                line.Y2 = i * step;
                line.Stroke = Brushes.Black;
                line.StrokeThickness = 1;
                this.MainCanvas.Children.Add(line);

                if (i % 10 == 0)
                {
                    line.X1 = 15;
                    line.X2 = w - 15;

                    // 添加文字
                    TextBlock text = new TextBlock
                    {
                        Text = (Maxmum - i).ToString(),
                        Width = 20,
                        TextAlignment = TextAlignment.Center,
                        FontSize = 9,
                        Margin = new Thickness(0, -5, -4, 0)
                    };
                    Canvas.SetLeft(text, w - 15);
                    Canvas.SetTop(text, i * step);
                    this.MainCanvas.Children.Add(text);

                    // 添加文字
                    text = new TextBlock
                    {
                        Text = (Maxmum - i).ToString(),
                        Width = 20,
                        TextAlignment = TextAlignment.Center,
                        FontSize = 9,
                        Margin = new Thickness(-4, -5, 0, 0)
                    };
                    Canvas.SetLeft(text, 0);
                    Canvas.SetTop(text, i * step);
                    this.MainCanvas.Children.Add(text);
                }
                else if (i % 5 == 0)
                {
                    line.X1 = 20;
                    line.X2 = w - 20;
                }
                else
                {
                    line.X1 = 25;
                    line.X2 = w - 25;
                }
            }
            ValueChanged();
        }


        private void ValueChanged() {
            // 限定值的变化范围
            var value = this.Value;
            if (this.Value < this.Minmum)
                value = this.Minmum;
            if (this.Value > this.Maxmum)
                value = this.Maxmum;

            // 温度值与Border的高度的一个转换
            var newValue = value - this.Minmum;
            newValue *= step;
            newValue += 20;

            // 动画
            DoubleAnimation doubleAnimation = new DoubleAnimation(newValue, TimeSpan.FromMilliseconds(500));
            this.BorValue.BeginAnimation(HeightProperty, doubleAnimation);
        }

    }

}

2. 控件调用

用户控件不可以独立展示，需要以窗口为载体，作为窗口的一部分展示，页面调用如下所示：

<Window
        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:UserControls="clr-namespace:WpfControl.UserControls" x:Class="WpfControl.TestWindow3"
        mc:Ignorable="d"
        Title="工控组态软件--温度计" Height="450" Width="1000" Loaded="Window_Loaded">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <UserControls:Thermometer Grid.Column="0" Grid.Row="0" x:Name="t1" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="1" Grid.Row="0" x:Name="t2" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="2" Grid.Row="0" x:Name="t3" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="3" Grid.Row="0" x:Name="t4" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="4" Grid.Row="0" x:Name="t5" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="5" Grid.Row="0" x:Name="t6" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="6" Grid.Row="0" x:Name="t7" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <UserControls:Thermometer Grid.Column="7" Grid.Row="0" x:Name="t8" Width="100" Height="370" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
    </Grid>
</Window>

控件赋值，在窗口加载时，为控件赋初始值，如下所示：

namespace WpfControl
{
    /// <summary>
    /// TestWindow3.xaml 的交互逻辑
    /// </summary>
    public partial class TestWindow3 : Window
    {
        public TestWindow3()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var controls = new Thermometer[8] { t1, t2 , t3, t4 , t5, t6 , t7, t8 };
            for (int i = 0; i < 8; i++) {
                controls[i].Maxmum = 100;
                controls[i].Minmum = -20;
                controls[i].Value = 10*(i+1);
            }
        }
    }
}

注意：在实际业务中，可以通过对应的传输协议【如：Modbus等】从硬件获取，并实时的显示在页面中。

源码下载

b06858748d92ac850639b039db88d25b.jpeg

备注

以上就是本篇文章的全部内容，旨在抛砖引玉，共同学习，一起进步。

老码识途呀
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF温度计控件
12-09
WPF温度计tempretureDemo DEV控件
WPF 组态电表控件
11-24
WPF 组态电表控件
基于Visual Studio扩展的WPF工业组态UI控件-ConPipe
hurst2011的博客
03-30 7478
本文的组态控件是由这两篇文章中的方案升级而来的，升级控件依然继承了“程序员自己能干的事情绝不麻烦美工”的思想。最大的不同就是由ConPipe Studio工具直接升级到Visual Studio的扩展，也就是管道、皮带轮、链轮等支持拖拽改变布局的控件直接由VS扩展提供支持，不需要再将xaml代码复制到ConPipe Studio里进行布局调整，省得再来回倒腾xaml代码。此次升级的控件数量由之前的二十多个增加到四十多个，主要分组态控件和基础控件。
C#两套WPF，看板和WPF工业组件 WPF智慧工厂数据平台 1, 提供一个智慧工厂数据平台框
最新发布
JRvMwowb的博客
07-04 268
通过理解WPF的设计模式，学习如何绘制各种统计图，设计页面板块划分以及展现动画等技术，开发了一个功能完善且具有良好用户体验的工业数据管理系统。通过WPF工业组件的应用、工业MES基础开发、WPF与数据库的结合以及与PLC编程的交互，实现了对智慧工厂的全面管理和控制。通过理解WPF的设计模式，学习如何绘制各种统计图，设计页面板块划分以及展现动画等技术，实现了一个功能完善且具有良好用户体验的工业数据管理系统。我们使用了WPF提供的通信库，与PLC建立起稳定的连接，并实现了数据的传输和命令的下发。
WPF 实现温度计
dotNET跨平台
11-30 682
WPF开发者QQ群：340500857 | 微信群 -> 进入公众号主页加入组织 在WPF中没有现成的温度计控件，所以我们自己实现一个。 微信群人数太多入群请添加小编微信号...
温度计Demo.rar_DEMO_WPF_WPF 温度计_wpf 温度计_温度计wpf
07-14
利用wpf画的一个温度计的自定义控件，状态可以根据相应的赋值进行改变
WPF+工控组态软件实例+管道+冷却风尚+冷却塔+空气压缩机
12-20
这些控件可能被设计用于工控组态软件，比如模拟管道、冷却塔、温度计等工控元素的图形化表示。开发者可以学习和利用这些控件来快速构建工控系统的可视化界面。 总结，本资源集成了WPF技术在工控组态软件中的应用，...
WPF中使用ProgressBar实现垂直温度计效果
11-15
综上所述，实现WPF中的垂直温度计效果，需要结合ProgressBar的属性、自定义模板、动画以及与数据的绑定。在提供的Temperature_Demo项目中，你将找到具体的代码示例，展示如何将这些概念整合到实际应用中。通过学习和...
freescada开源wpf组态软件
04-02
FreeSCADA是一款基于WPF（Windows Presentation Foundation）技术的开源工业组态软件，它提供了全面的解决方案，使得用户能够快速构建自己的监控系统。这个软件包含了丰富的功能，如组态界面设计、内置脚本语言以及...
WPF,c# 自定义控件 温度计
09-11
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）和C#环境中创建一个自定义的温度计控件。WPF是.NET框架的一部分，它提供了丰富的用户界面（UI）功能，包括强大的图形渲染和自定义控件的能力...
组态工业控件
02-26
使用C#实现的一些用于组态软件的工业控件实例。使用C#实现的一些用于组态软件的工业控件实例。
_FreeScada开源wpf组态软件[已能运行by].rar
07-24
 FreeScada是一款开源、开放的平台软件，实现工业数据的采集与监控，可以广泛的应用于工业各个领域。该项目主要目的在于研究SCADA软件的技术应用，在原有项目的基础上进行升级扩展、功能定制，提高用户友好度，更适合用户的使用习惯。 原有的项目应用平台为linux，开发语言为C++，界面开发库为QT，目前只要工作为熟悉软件结构、掌握功能扩展。
Visual Studio 2017 C#WPF用MaterialDesign实现工控界面.rar
02-03
Visual Studio 2017 C#WPF用MaterialDesign实现工控界面
WPF工控源码分享.rar
11-03
一个很好的WPF入门程序，里面有MVVM模式和谷歌的MaterialDesign界面的使用。还有与西门子通讯，还有包括仪表库和hsl库以及Ado.net的使用。
wpf 使用Path绘制一个简单的温度计
qq_30975833的博客
02-11 2916
什么都不说,先look look 效果         研究这个主要的原因是一个好友给我出了一道题,就是做一个这样的温度计(当然实际的温度计下面应该是不会有变化的),当时只会一些简单的圆啊,线的绘制,不知道曲线是怎么画出来的,所以一开始只做一个上面温度计里面的进度条(方法就是下面一个圆,中间一条粗线,上面也是一个小圆,xml代码当然顺序要正确,中间的粗线要覆盖住底部大圆上面的一部分,并覆盖住
WPF 使用 DrawingContext 绘制温度计
dotNET跨平台
09-29 688
WPF 使用 DrawingContext 绘制温度计控件名：Thermometer作者： WPFDevelopersOrg原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40；Visual Studio 2022;项目使用 MIT 开源许可协议；定义Interval步长、MaxValue最大温度值、M...
WPF开发温度计工业组态
inet_ygssoftware的博客
05-20 999
1、工控温度计组件效果演示 工控上位机温度计组件设计与开发 2、画温度计边框 <Rectangle StrokeThickness="7" RadiusX="40" RadiusY="15" Fill="White" /> <Rectangle StrokeThickness="7" RadiusX="40" RadiusY="15"> <Rectangle.Effect> <DropShadowEffect ShadowDepth="0"
wpf工控软件自定义控件
09-05
WPF工控软件自定义控件是指在基于.NET6框架下使用WPF MVVM进行UI设计时，开发者可以自定义控件来满足特定的功能需求。这些自定义控件可以根据项目的需求进行设计和修改，以提供更好的用户体验和功能支持。 如果你对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老码识途呀

写作不易，多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值