从零搭建灌装监控系统（十八）：自定义控件，三色灯与状态指示

自定义控件三色灯与状态指示这是「从零搭建灌装监控系统」系列第18篇。界面上的红绿圆点、状态标签、液位指示一开始都是复制粘贴出来的。这篇把它们做成可复用的自定义控件用依赖属性和值转换器驱动并讲清一个特别容易踩的 WPF 规则本地值为什么会盖掉触发器。改一次配色翻了十四个文件界面做到第八个页面的时候我决定把状态灯的绿色调深一点——现在这个绿在车间的强光下有点发白。结果我改了十四处。每个页面都有一份自己的Ellipse FillGreen/有的用#2ECC71有的用#27AE60还有两处是Lime。改完之后我甚至不确定有没有漏。这已经不是审美问题了。状态灯是语义元素——绿灯代表正常、红灯代表故障这个语义必须在整个软件里一致。散落在各个页面的硬编码颜色迟早会出现“这个页面的绿灯跟那个页面的绿灯不是一个绿”的情况。所以要把它们收成控件。先定义状态再定义外观第一步不是写 XAML是把“灯有几种状态”这件事固化成枚举publicenumLightState{Off0,Green1,Yellow2,Red3}四个状态对应工业现场的四种语义熄灭未启用、绿正常、黄警告、红故障。枚举用颜色名还是语义名这是个值得想一秒的问题。用Green/Red的坏处是以后想把“正常”从绿色改成蓝色枚举就得跟着改所有绑定点全废。用Normal/Fault就没这个问题。这个项目选了颜色名因为它就是给三色灯用的物理灯珠的颜色是固定的语义和颜色一一对应不会变。但如果是一个通用的状态指示器我会用语义名。判断依据是颜色本身是不是业务的一部分。三色灯是通用指示器不是。依赖属性控件的对外接口控件要能被绑定就得用依赖属性publicpartialclassStatusLight:UserControl{publicLightStateState{get{return(LightState)GetValue(StateProperty);}set{SetValue(StateProperty,value);}}publicstaticreadonlyDependencyPropertyStatePropertyDependencyProperty.Register(nameof(State),typeof(LightState),typeof(StatusLight),newPropertyMetadata(LightState.Off));publicStatusLight(){InitializeComponent();}}PropertyMetadata(LightState.Off)是默认值——没绑定时灯是熄灭的而不是某种未定义状态。注册依赖属性时把类型写成typeof(LightState)而不是typeof(int)WPF 才能在 XAML 里做类型检查和设计器提示。调用方用起来就很干净uc:StatusLightState{Binding PlcState}/值转换器一个枚举三种灯珠三色灯有三个灯珠每个灯珠只在对应状态下亮。同一个State属性要驱动三个不同的画刷怎么区分用ConverterParameterpublicclassLightStateToBrushConverter:IValueConverter{publicobjectConvert(objectvalue,TypetargetType,objectparameter,CultureInfoculture){if(valueisnotLightStatestate)returnBrushes.DimGray;vartargetparameterasstring;// 只点亮与目标灯位匹配的那一颗returnstate.ToString()target?GetLitBrush(target):GetDimBrush(target);}publicobjectConvertBack(objectvalue,TypetargetType,objectparameter,CultureInfoculture)thrownewNotSupportedException();}XAML 里三个灯珠各自传不同的参数cv:LightStateToBrushConverterx:KeyLightStateToBrushConverter/!-- 绿灯 --Ellipsex:NameGreenEllipseStroke#111StrokeThickness1.5Ellipse.FillLinearGradientBrushStartPoint0.2,0EndPoint0.8,1GradientStopColorWhiteOffset0/GradientStopColor{Binding State, RelativeSource{RelativeSource AncestorTypeUserControl}, Converter{StaticResource LightStateToBrushConverter}, ConverterParameterGreen}Offset0.4/GradientStopColor#88000000Offset1//LinearGradientBrush/Ellipse.Fill/EllipseRelativeSource AncestorTypeUserControl是关键——灯珠在控件模板内部要往外找到宿主控件的State属性。这是自定义控件里绑定自己属性的标准写法。灯珠的视觉三层叠加工业界面的灯珠如果只是一个纯色圆看起来像贴纸。稍微加三层就有质感!-- 第一层外圈高光径向渐变 --EllipseEllipse.FillRadialGradientBrushGradientStopColor#00000000Offset0/GradientStopColor#22000000Offset1//RadialGradientBrush/Ellipse.Fill/Ellipse!-- 第二层灯珠本体线性渐变 模糊光晕 --Ellipsex:NameGreenEllipseStroke#111StrokeThickness1.5Ellipse.EffectBlurEffectRadius2KernelTypeGaussian//Ellipse.Effect/Ellipse!-- 外层灯座深色圆角矩形 投影 --BorderCornerRadius10Background#222BorderBrush#111BorderThickness2Border.EffectDropShadowEffectShadowDepth3BlurRadius8Opacity0.3//Border.Effect/Border线性渐变里的三个GradientStop分工明确White在左上角做高光中间 40% 位置是实际灯色#88000000在右下角压暗做体积感。BlurEffect让亮起的灯珠有轻微光晕DropShadowEffect让整个灯座有立体感。这些都是纯视觉的但工业界面恰恰需要这个——操作员在几米外扫一眼有光晕的灯比纯色圆更容易被注意到。数据流绑定 StateConverterParameterGreenConverterParameterYellowConverterParameterRedViewModel 状态StatusLight 依赖属性值转换器绿灯画刷黄灯画刷红灯画刷灯珠渐变 光晕StatusIndicator多属性组合的状态指示三色灯是纯视觉的但界面上还需要“在线/离线 状态文字”这种组合指示。做法一样只是属性多了几个publicpartialclassStatusIndicator:UserControl{publicboolIsOnline{get(bool)GetValue(IsOnlineProperty);setSetValue(IsOnlineProperty,value);}publicboolIsWarning{get(bool)GetValue(IsWarningProperty);setSetValue(IsWarningProperty,value);}publicstringStatusText{get(string)GetValue(StatusTextProperty);setSetValue(StatusTextProperty,value);}publicstaticreadonlyDependencyPropertyIsOnlinePropertyDependencyProperty.Register(nameof(IsOnline),typeof(bool),typeof(StatusIndicator),newPropertyMetadata(false));publicstaticreadonlyDependencyPropertyIsWarningPropertyDependencyProperty.Register(nameof(IsWarning),typeof(bool),typeof(StatusIndicator),newPropertyMetadata(false));publicstaticreadonlyDependencyPropertyStatusTextPropertyDependencyProperty.Register(nameof(StatusText),typeof(string),typeof(StatusIndicator),newPropertyMetadata(string.Empty));}为什么拆成IsOnlineIsWarning两个布尔而不是一个三态枚举因为这两个维度是独立的设备可能在线但处于警告状态温度偏高也可能离线此时警告与否没意义。用两个布尔组合语义更清楚。那个特别容易踩的坑本地值压过触发器这个坑我在别处栽过一次值得单独说。在StatusLight里我想让红灯亮的时候有一个呼吸动画就写了DataTrigger。但怎么都不生效——灯色变了动画不动。原因是 WPF 的属性值优先级本地值Local Value 触发器Trigger 样式 SetterStyle Setter 默认值如果我在元素上直接写了Opacity1.0这是本地值优先级最高。之后不管DataTrigger怎么设置都改不动它。正确做法是把默认值写进Style的SetterEllipsex:NameValueEllipseWidth10Height10Ellipse.StyleStyleTargetTypeEllipse!-- 默认值写在 Setter 里而不是元素属性上 -- Setter PropertyFillValue{StaticResource AppTextMuted}/ Setter PropertyOpacityValue1.0/ Style.Triggers DataTrigger Binding{Binding ValueOpen}ValueTrue Setter PropertyFillValue{StaticResource AppSuccess}/ DataTrigger.EnterActions BeginStoryboard Storyboard RepeatBehaviorForeverAutoReverseTrue DoubleAnimation Storyboard.TargetPropertyOpacityFrom1.0To0.3Duration0:0:1/ /Storyboard /BeginStoryboard /DataTrigger.EnterActions /DataTrigger /Style.Triggers/Style/Ellipse.Style/Ellipse现在Opacity的初始值是Style Setter优先级低触发器就能盖过它动画生效。记法只要你想让某个属性被触发器或动画改变它的初始值就不能写成元素上的属性必须写进Style的Setter。控件里不要塞业务做自定义控件时有个诱惑既然控件要显示“PLC 在线状态”干脆在里面直接调PlcService好了。不要这么做。UserControl应该是纯展示的——数据从DataContext或依赖属性进来控件自己不知道数据从哪来。理由很实际控件能在设计器里预览没有服务也能渲染控件能被单元测试同一个控件能在不同数据源下复用这个项目里 HMI 那套控件就是这么约束的——控件内不允许引用任何 Service。约束看起来麻烦但它让控件的复用边界非常清晰。踩坑记录本地值让触发器失效元素上写死的属性优先级最高DataTrigger和动画都盖不过。默认值必须写进Style的Setter。在控件内部直接改依赖属性用SetValue覆盖绑定值会让外部的绑定失效。控件内部只读不写自己的依赖属性。控件里引用 Service设计器打不开、测试写不了、复用不了。数据一律从属性进。枚举用颜色名还是语义名没想清楚三色灯可以用颜色名通用指示器应该用语义名。判断标准是颜色本身是不是业务的一部分。本篇小结目标做法状态语义统一LightState枚举集中定义可绑定依赖属性 PropertyMetadata默认值一个状态驱动多个视觉ConverterParameter区分灯位控件内绑定自身属性RelativeSource AncestorTypeUserControl触发器生效默认值写Style Setter不写元素属性控件可复用纯展示不引用 Service到这里界面部分基本成型了。但每次改完代码我都得手动跑一遍软件、点几个按钮、扫一次条码才能确认没改坏。下一步该让机器替我干这件事了。下期预告第19篇单元测试实战xUnit 内存SQLite 反射测试私有方法下一篇搭起测试工程用临时 SQLite 文件做数据隔离再用反射把私有方法拉出来测——包括一个方法名拼错的真实案例。