简介面向WPF开发者的垂直温度计效果实现资源专注进度条控件的高级定制与样式重绘。包内共41个文件包括C#源码、XAML界面布局、Visual Studio项目工程与可执行程序以及配置、资源、调试信息等辅助文件压缩包整体仅215KB。示例项目围绕垂直进度条展开详细演示了设置方向、自定义控件模板绘制温度计表管与刻度、通过缩放变换动态指示高度、使用动画平滑过渡以及将温度数值和单位绑定到界面等完整实现代码结构清晰可直接运行学习。压缩包中的工程文件同时展示了WPF控件封装与项目组织方式便于二次开发。已有758人学习下载适合初学WPF样式模板或需要制作仪表盘、温度计等自定义UI效果的开发者参考能够有效缩短功能开发与效果调试时间。1. 用 WPF 的 ProgressBar 做垂直温度计从一个反直觉的小改动开始先抛个结论WPF 里默认的 ProgressBar 就是个横条想把温度计竖起来不是改个Orientation属性就完事真正的活都在ControlTemplate里。我看到很多刚接触 WPF 的开发者卡在“为什么我设置了垂直方向进度条还是横的”这个问题上其实是因为没有理解 WPF 控件模板的分工逻辑。我们今天要拆的这份Temperature_Demo.rar就是用 WPF 的 ProgressBar 自绘一个垂直温度计效果核心思路是保留 ProgressBar 的Value和Maximum数据逻辑重写它的视觉树再配上动画和绑定让一个普通进度条变成能显示温度的 UI 元素。适合刚开始做自定义控件的人也适合想在工业软件、上位机界面里快速做出温度显示模块的开发者。我们会从布局原理讲到模板重写再讲数据绑定、动画和最容易翻车的几个坑。2. 从水平到垂直理解 ProgressBar 的布局约束与模板分工2.1 Orientation 属性的真实作用范围很多教程会把OrientationVertical当成实现垂直进度条的关键但实际上这个属性在 WPF 默认的 ProgressBar 模板里主要影响的是PART_Track的布局方向。很多人改了 Orientation 之后发现进度条确实从横向变纵向了但整个控件的宽度还是被拉伸得很难看温度计那种细长的形态根本出不来。这里需要先明确依赖属性Orientation确实存在它定义在ProgressBar类上默认值是Horizontal当设置为Vertical时ProgressBar内部的轨道会沿垂直方向填充。但这仅仅是一个方向信号真正决定进度条怎么布局的是控件的Template内部对PART_Track的处理方式。我一般会建议自己写一个ControlTemplate把Orientation的布局作用彻底接管。原因很直接默认模板里有大量系统样式你很难精确控制进度条的高度、宽度、圆角和背景渐变。与其和默认模板强扭不如直接从模板层面重新定义一个适合温度计的视觉树后面我们会在“模板重写”环节详述这个方案。2.2 温度计布局的两个关键参数Width 与 ViewboxWPF 温度计这类自定义控件最大的坑在于缩放。假设你直接用一个Border固定高度Height200宽度Width20放在窗口里确实像个温度计窗口一拉伸它就变形或变形得很难看。通常我会在控件根节点套一层Viewbox让内部温度计模型保持比例缩放。Viewbox StretchUniform StretchDirectionBoth Grid Width40 Height200 !-- 温度计主体在这里 -- /Grid /Viewbox逻辑说明Viewbox会把内部Grid当成一个逻辑画布固定好内部元素的相对尺寸当外层容器尺寸变化时内部整体等比缩放。这里的参数StretchUniform是最关键的它保证宽度和高度的缩放比例一致温度计不会变成“胖温度计”或“瘦温度计”。参数说明StretchUniform是默认行为它保证内部内容完整显示且不失真StretchDirectionBoth表示允许双向缩放如果你希望温度计在某个方向上不被拉伸可以改成DownOnly或UpOnly。用Viewbox的好处是后续加刻度、加单位标签都不用担心窗口缩放带来的错位。2.3 为什么 ScaleTransform 比直接改 Height 更合适很多第一次写垂直进度条的人会想到直接绑定Height到Value例如让温度柱的高度随数值变化。这种做法在纯静态场景下可行但一旦进入动画或需要平滑过渡的场景直接改高度会让布局频繁失效模板内部的刻度、边框、文字都会跟着跳动。更好的方案是使用ScaleTransform.ScaleY。思路是基于一个固定高度的温度柱模型然后通过纵向缩放来“填满”或“排空”温度柱。我提供的模板里温度柱的实际渲染高度是不变的变化的只是它的纵向缩放比例这样做的好处是布局稳定刻度、标签不会因为高度变化而重新排列动画只需要处理ScaleY的数值站点明确缩放不会触发Height重新计算性能上更优。Path x:NameFillPath DataM 0,0 L 20,0 L 20,180 L 0,180 Z Fill#E74C3C Path.RenderTransform ScaleTransform x:NameFillScale ScaleX1 ScaleY0.5 CenterY180/ /Path.RenderTransform /Path逻辑说明这里的Path数据定义了一个矩形温度柱高度是 180我们通过ScaleTransform在 Y 轴上进行缩放。CenterY180表示缩放的原点设置在矩形底部这样当ScaleY从 0 变到 1 时矩形是从底部向上生长的正好符合温度计液柱上升的效果。参数说明CenterY的值必须和温度柱底部坐标一致在这个例子里温度柱底部恰好是 Y180所以设置为 180 才能保证液柱“钉”在底部向上生长。如果你把CenterY设成 0缩放就会变成从顶部向下生长效果就完全错了。3. 重写 ControlTemplate温度计主体的 XAML 结构与细节3.1 温度计模板的骨架边框、玻璃管、液柱与球泡一个像样的 WPF 温度计至少要包含三部分外框玻璃管用 Border 模拟、液柱用 Path ScaleTransform 模拟、底部球泡用 Ellipse 模拟。这三层需要放到一个 StackPanel 或 Grid 里统一管理我习惯用 Grid 做绝对定位这样能精确控制每个元素的位置。ControlTemplate TargetType{x:Type ProgressBar} Grid !-- 外框玻璃管 -- Border x:NameTubeBorder Width40 Height220 BackgroundLightGray CornerRadius5 BorderBrushGray BorderThickness1 !-- 带刻度刻度的内部区域 -- Grid Margin5 !-- 刻度线 -- Grid x:NameScaleGrid !-- 这里后续放刻度线和标签 -- /Grid !-- 液柱容器 -- Grid ClipToBoundsTrue Border x:NameLiquidBar Height180 VerticalAlignmentBottom Background#4A90D9 CornerRadius3/ /Grid /Grid /Border !-- 底部球泡 -- Ellipse x:NameBulb Fill#4A90D9 Width40 Height20 VerticalAlignmentBottom Margin0,0,0,-5/ /Grid /ControlTemplate逻辑说明这里先用TubeBorder作为温度计外管CornerRadius5模拟玻璃管的圆角感。内部把刻度区域和液柱区域分开放方便后续单独控制。液柱用了一个Height180、VerticalAlignmentBottom的 Border这样它天然贴着温度计底部生长配合前面说的ScaleTransform就能做出液柱升降效果。参数说明ClipToBoundsTrue很重要它保证了液柱在缩放过程中不会溢出管道边界。如果你不设置这个属性当ScaleY超过 1 时液柱会从顶部冒出去。底部球泡直接和液柱用同一个颜色视觉上就像一根连通管。3.2 刻度与标签用 ItemsControl 绑定到集合温度计没有刻度是没有灵魂的但刻度在 XAML 里手动写死又很蠢。更好的方式是用ItemsControl绑一个刻度集合通过DataTemplate自动生成刻度和标签这样以后想改成华氏度或改刻度间隔只需要改集合数据就行。ItemsControl ItemsSource{Binding ScaleMarks} ItemsControl.ItemsPanel ItemsPanelTemplate Grid/ /ItemsPanelTemplate /ItemsControl.ItemsPanel ItemsControl.ItemTemplate DataTemplate Grid Rectangle Width4 Height2 FillBlack VerticalAlignmentCenter HorizontalAlignmentLeft/ TextBlock Text{Binding Label} FontSize10 Margin8,0,0,0/ /Grid /DataTemplate /ItemsControl.ItemTemplate /ItemsControl逻辑说明ScaleMarks是一个ObservableCollectionT每个刻度项包含Position顶部距离或底部距离和Label刻度显示值。我通常会把Position换算成Margin.Top绑定到Grid上让刻度线在竖直方向上按百分比分布。参数说明Rectangle的Width4 Height2决定了刻线的长度和粗细实际使用时要根据温度计宽度调整TextBlock的Margin8,0,0,0用来把标签放到刻度线的右侧防止文字与刻度线重叠。3.3 模板绑定让 Value 驱动液柱而不是让代码去改 UI很多开发者会在后台代码里直接写liquidBar.Height value * 2之类的语句这种做法在快速迭代 UI 时几乎必然失控。正确做法是让 UI 元素通过TemplateBinding或数据绑定直接响应 ProgressBar 的Value属性变化。Border x:NameLiquidBar VerticalAlignmentBottom Height180 Border.RenderTransform ScaleTransform x:NameLiquidScale ScaleY0 CenterY180/ /Border.RenderTransform /Border标记ScaleY不是直接通过TemplateBinding绑定的而是在ValueChanged事件里计算得出计算方式如下。为什么不全用绑定因为Value到ScaleY之间需要一次线性换算如果温度计高度180对应Maximum100那么ScaleY Value / Maximum这个计算用模板绑定表达式也能做但在 XAML 里直接写会比较别扭。我一般用后端处理逻辑更清楚。private void OnValueChanged(object sender, RoutedPropertyChangedEventArgsdouble e) { var progressBar (ProgressBar)sender; double ratio progressBar.Value / progressBar.Maximum; LiquidScale.ScaleY Math.Max(0, Math.Min(1, ratio)); }逻辑说明OnValueChanged是 ProgressBar 的Value变化事件只要进度条的值发生变化就会触发这个事件并重新计算ScaleY。计算的核心是ratio Value / Maximum把Value映射到 0 到 1 的区间然后直接赋值给ScaleY。参数说明Math.Max(0, Math.Min(1, ratio))做了上下限夹取防止Value超过Maximum时液柱跳出玻璃管。如果你希望温度计支持超出量程时液柱顶到上限但仍然显示数值可以不加这个夹取但视觉上就需要处理溢出。4. 让温度计“活”起来数据绑定、单位切换与动画过渡4.1 从控件进度到业务数据ViewModel 与 INotifyPropertyChanged温度计当然不只是用来显示进度它的业务场景是显示设备温度、水温、室温等实际值。这时就需要把 ProgressBar 的Value绑定到 ViewModel 里的数值属性而不是在后台直接赋值。public class TemperatureViewModel : INotifyPropertyChanged { private double _currentTemperature; public double CurrentTemperature { get _currentTemperature; set { _currentTemperature value; OnPropertyChanged(nameof(CurrentTemperature)); OnPropertyChanged(nameof(DisplayText)); } } public string DisplayText ${CurrentTemperature:F1}°C; public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }逻辑说明ViewModel 里定义CurrentTemperature属性当它变化时通知 UI 更新。DisplayText是只读属性它依赖CurrentTemperature所以在 setter 里同时触发OnPropertyChanged(nameof(DisplayText))这样温度文本标签也会自动刷新。参数说明F1是字符串格式化表示保留一位小数。如果你需要显示成整数温度改成F0就行。如果要显示华氏度可以增加一个IsCelsius开关在DisplayText里做换算后面会讲到。4.2 XAML 绑定把 ProgressBar 的 Value 和文本标签接到 ViewModel在 XAML 里把 ProgressBar 的Value绑定到CurrentTemperature同时把旁边的TextBlock绑定到DisplayText。需要注意的是ProgressBar的Maximum也要做绑定否则你换了一个温度量程代码逻辑又要改一遍。ProgressBar OrientationVertical Height220 Width40 Minimum0 Maximum120 Value{Binding CurrentTemperature, ModeTwoWay} Template{StaticResource TemperatureTemplate}/ TextBlock Text{Binding DisplayText} HorizontalAlignmentCenter FontSize14 Foreground#2C3E50/逻辑说明Value{Binding CurrentTemperature, ModeTwoWay}表示 ProgressBar 的显示值完全由 ViewModel 驱动反向绑定是指如果用户在界面上的某个操作改变了温度值比如拖拽滑块也会自动写回 ViewModel这个灵活性在后续扩展需求里会用到。参数说明Maximum120适合水银温度计测量水温的场景如果要换成体温计改成Maximum42即可。这里Template{StaticResource TemperatureTemplate}是我们第 3 章定义的模板资源模板里的ScaleY计算会通过绑定的Value触发。4.3 温度单位切换与量程联动做温度计不可能只做摄氏度面向实际使用时华氏度切换是高频需求。我会在 ViewModel 里增加一个UnitType枚举然后根据它来换算温度和量程。public enum TemperatureUnit { Celsius, Fahrenheit } public string DisplayText { get { if (UnitType TemperatureUnit.Celsius) return ${CurrentTemperature:F1} °C; var fahrenheit CurrentTemperature * 9 / 5 32; return ${fahrenheit:F1} °F; } }逻辑说明当用户切换单位时只需要修改UnitType的值DisplayText会自动完成换算温度计的液柱高度不需要变因为CurrentTemperature仍然是摄氏度数值ProgressBar 的值不依赖显示单位。这是一个容易被忽略的设计点显示的单位可以切换但底层数据保持统一避免重复换算造成的误差累积。参数说明摄氏转华氏公式是F C * 9 / 5 32这里用了CurrentTemperature * 9 / 5在 C# 里是整数运算优先但CurrentTemperature是 double所以天然是浮点运算。如果你要支持开尔文单位换算公式还要再扩展但不建议在 UI 层做太多科学运算。4.4 平滑过渡DoubleAnimation 与 EasingFunction直接绑定Value然后让ScaleY瞬间跳变会非常生硬。为了制造液柱平滑上升的效果我会在ValueChanged事件里加上DoubleAnimation只动画LiquidScale.ScaleY的数值。这样 UI 的过渡效果和 ViewModel 的数据更新完全解耦。private void AnimateScale(double newScale) { var animation new DoubleAnimation { To newScale, Duration TimeSpan.FromMilliseconds(500), EasingFunction new CubicEase { EasingMode EasingMode.EaseInOut } }; LiquidScale.BeginAnimation(ScaleTransform.ScaleYProperty, animation); }逻辑说明BeginAnimation是 WPF 动画的标准入口它会从一个值平滑过渡到To指定的目标值。使用CubicEase的EaseInOut模式让液柱启动时慢一点、中间加速、接近目标时再减速视觉上更接近真实液柱的物理感。参数说明Duration的单位是毫秒这里设置 500ms做温度计反馈时手感刚好。如果你要更快的响应改成 200ms如果要更柔和改成 800ms。注意动画会抢占ScaleY的属性值如果此时有另一个动画也在操作同一个属性后启动的动画会覆盖前一个动画的状态所以不要在代码里混用ScaleY xxx和BeginAnimation否则会出现抖动。5. 避坑与常见问题三处最容易翻车的位置5.1 模板绑定失效ScaleY 停在初始值不动现象液柱没有随Value变化始终停留在初始位置或者第一次启动时位置不对。原因很多人把ScaleY写在ControlTemplate的ScaleTransform里但使用TemplateBinding绑定到Value时WPF 的绑定上下文是模板内的控件而不是模板外的ProgressBar。TemplateBinding只能用于模板内部的属性对应关系不能直接做数值换算。ScaleY Value / Maximum这类计算在 XAML 里写不出来在代码里又经常忘了挂事件。解决在ProgressBar的Loaded事件里获取模板控件然后订阅ValueChanged事件。或者在Template里给LiquidScale命名然后在后台用GetTemplateChild获取并操作。private void OnLoaded(object sender, RoutedEventArgs e) { LiquidScale (ScaleTransform)GetTemplateChild(LiquidScale); var progressBar (ProgressBar)sender; progressBar.ValueChanged OnValueChanged; AnimateScale(progressBar.Value / progressBar.Maximum); }参数说明GetTemplateChild是FrameworkElement的方法只能访问当前控件模板里的命名元素。这里在Loaded事件里调用保证模板已经完成应用。5.2 VerticalAlignmentBottom 的液柱被外框裁切现象温度计液柱在温度很高时顶部被玻璃管边框截断或者液柱底部和球泡之间有一条难看的缝隙。原因液柱用BorderVerticalAlignmentBottom时它的实际高度是固定的低于温度计最高刻度时它和顶部之间是空白。当ScaleY接近 1 时液柱填满整个高度但默认模板里的Border高度和外框高度不一致比如外框高 220液柱高 180那 40 的差距就是裁切缝隙的来源。解决给液柱容器设置ClipToBoundsTrue同时确保液柱的Height加上底部球泡的高度等于外框高度或者在液柱底部直接画一个椭圆覆盖掉缝隙。我测试过多次最稳的做法是让液柱和外框容器完全等高然后用Margin控制外框内部预留的刻度空白区不要靠VerticalAlignment去凑视觉。5.3 动画闪烁或卡顿多次触发 ValueChanged现象温度值快速变化时液柱动画出现闪烁、卡顿甚至反向跳动。原因ValueChanged事件在Value每次变化时都会触发如果外部数据更新的频率高每次触发都会新开一个动画WPF 动画系统会不断中断当前动画去播放下一个造成液柱来回弹跳。解决引入一个简单的节流机制。我一般在 ViewModel 里做限流或者用一个布尔标志判断当前是否有动画正在执行。private bool _isAnimating; private void OnValueChanged(object sender, RoutedPropertyChangedEventArgsdouble e) { if (_isAnimating) return; _isAnimating true; AnimateScale(e.NewValue / ((ProgressBar)sender).Maximum); _isAnimating false; }说明这是一种很粗糙的防抖方式实际项目中我会用DispatcherTimer或者把Value更新聚合到固定频率比如 100ms 更新一次。特别注意_isAnimating的赋值必须在AnimateScale完成后立刻复位不要在动画的Completed事件里复位否则连续更新时事件还没完成新的动画就被拦截了。6. 进阶把温度计做成传感器监控面板的通用显示控件做到这里一个基础的温度计已经落地了。但如果你的目标是做传感器监控面板希望一个控件能适配多路温度、多路湿度还需要再做一层封装。我会把温度计的模板资源提取成一个自定义控件比如叫VerticalGauge然后对外暴露CurrentValue、MinimumValue、MaximumValue、UnitText四个依赖属性。这样在 XAML 里就可以像写普通控件一样controls:VerticalGauge CurrentValue{Binding CpuTemperature} MinimumValue0 MaximumValue100 UnitText°C GaugeColor#E67E22/内部实现和前面讲的逻辑完全一致只是将ValueChanged事件换成依赖属性回调再配合PropertyChangedCallback驱动动画和文本更新。依赖属性有FrameworkPropertyMetadataOptions.BindsTwoWayByDefault时数据双向绑定自动生效省去外部手动写ModeTwoWay。依赖属性回调里有个细节Value变化时记得同时处理TextBlock的颜色变化和单位文字的显隐。public static readonly DependencyProperty CurrentValueProperty DependencyProperty.Register(nameof(CurrentValue), typeof(double), typeof(VerticalGauge), new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnCurrentValueChanged)); private static void OnCurrentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var gauge (VerticalGauge)d; gauge.UpdateLiquidBar(); gauge.UpdateTextBlocks(); }逻辑说明依赖属性在这里的作用等同于把外部的Value变化自动转发给控件内部的液柱和文本。OnCurrentValueChanged在 UI 线程执行因此可以直接修改ScaleY或启动动画不需要额外调用Dispatcher。参数说明UpdateLiquidBar内部就是前面写的AnimateScale但把MaximumValue也一并代入计算。UpdateTextBlocks用来更新数值文本如果值超过量程还可以把文本颜色改成警示红这些都可以在回调里做。最后一件事记得把VerticalGauge的默认样式文件加进Generic.xaml并且在控件构造函数里加上一句DefaultStyleKeyProperty.OverrideMetadata否则你定义的模板永远不会被加载。static VerticalGauge() { DefaultStyleKeyProperty.OverrideMetadata( typeof(VerticalGauge), new FrameworkPropertyMetadata(typeof(VerticalGauge))); }希望帮到你这个温度计控件我已经在三个项目里复用过了每次别人看到堆叠了好几个温度计的监控面板都会问一句“这是怎么做的”其实底子就是 ProgressBar 加一个改写的模板剩下的都是细节打磨。从那以后我每次接这类自定义控件的需求都会先想清楚“哪些数据走绑定、哪些走事件”想清楚的方案基本不会返工没想清楚就硬写的通常都会回到模板里重新找问题。本文还有配套的精品资源点击获取
