WPF开发温度计工业组态

Posted 2022-05-23 inet_ygssoftware

1、工控温度计组件效果演示

工控上位机温度计组件设计与开发

2、画温度计边框

<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>

3、画水平柱

<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>

4、画水银珠

<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>

5、后台温度计初始化刻度

/// <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;// 在这个区间内多少个间隔
    double 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;
        
    

6、定义温度控件依赖属性和回调函数

public int Minmum

    get  return (int)GetValue(MinmumProperty); 
    set  SetValue(MinmumProperty, value); 


// Using a DependencyProperty as the backing store for Minmum.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty MinmumProperty =
    DependencyProperty.Register("Minmum", typeof(int), typeof(Thermometer), new PropertyMetadata(0, new PropertyChangedCallback(OnPropertyValueChanged)));



public int Maxmum

    get  return (int)GetValue(MaxmumProperty); 
    set  SetValue(MaxmumProperty, value); 


// Using a DependencyProperty as the backing store for Maxmum.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty MaxmumProperty =
    DependencyProperty.Register("Maxmum", typeof(int), typeof(Thermometer), new PropertyMetadata(100, new PropertyChangedCallback(OnPropertyValueChanged)));



public double Value

    get  return (double)GetValue(ValueProperty); 
    set  SetValue(ValueProperty, value); 


// Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
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();

7、限定温度范围值并添加动画

// 限定值的变化范围 
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);

8、通过Modbus连接从站读取温度值

8.1 编程逻辑

public class Thememeter : INotifyPropertyChanged

    public event PropertyChangedEventHandler? PropertyChanged;
    private int thValue;

    public int ThValue
    
        get  return thValue; 
        set  thValue = value; OnPropertyChanged("ThValue"); 
    

    public void OnPropertyChanged(string propertyName)
    
        if (PropertyChanged != null)
        
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        
    

Thememeter th = new Thememeter();
public MainWindow()


    InitializeComponent();
    this.DataContext = th;
    ReadSlaveValue();


/// <summary>
/// 读取从站数据
/// </summary>
/// <exception cref="NotImplementedException"></exception>
private void ReadSlaveValue()

    // 创建一个串口对象
    var serialPort = new SerialPort("COM2", 9600, Parity.None, 8, StopBits.One);
    var master = ModbusSerialMaster.CreateRtu(serialPort);
    if (!serialPort.IsOpen)
    
        serialPort.Open();
    
    Task.Run(() =>
             
                 // 延迟加载
                 Task.Delay(1000).Wait();
                 while (true)
                 
                     var uValue = master.ReadHoldingRegisters((byte)1, (ushort)0, (ushort)1);
                     th.ThValue = uValue[0];
                 
             );

8.2 窗体数据绑定

<TextBox Text="Binding ThValue,UpdateSourceTrigger=PropertyChanged" VerticalAlignment="Bottom" FontSize="20" Name="ThermometerValue" />