WPF开发温度计工业组态

最新推荐文章于 2025-09-23 16:27:29 发布

原创

最新推荐文章于 2025-09-23 16:27:29 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #C#上位机 #工业组态

本文详细介绍了工控温度计组件的视觉设计与后台逻辑，包括温度计边框绘制、水平柱、水银珠动画、刻度初始化、依赖属性与回调函数，以及通过Modbus从站获取实时温度的编程实例。

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