
UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载HandyControl 对 WPF 原生PasswordBox控件提供了一套分层样式体系核心文件为 src/Shared/HandyControl_Shared/Themes/Styles/PasswordBox.xaml 与 src/Shared/HandyControl_Shared/Themes/Styles/Base/PasswordBoxBaseStyle.xaml。本文围绕PasswordBoxBaseStyle、PasswordBoxExtendBaseStyle、PasswordBoxExtend三个关键样式展开说明如何使用附加属性为原生密码框添加标题Title与水印Placeholder并深入解读PasswordBoxAttach.PasswordLength的底层实现机制。读完本文你将能直接在项目中对原生PasswordBox应用 HandyControl 的默认样式、扩展样式及小尺寸变体并理解其模板触发器与附加属性的协作原理。一、样式层级总览三个关键 StyleHandyControl 为原生PasswordBox定义了三层递进关系全部基于BasedOn继承样式 Key继承关系用途PasswordBoxBaseStyle基于InputElementBaseStyle原生密码框默认样式不推荐直接使用仅作为其它样式的基类PasswordBoxExtendBaseStyleBasedOnPasswordBoxBaseStyle扩展默认样式同样不推荐直接使用只作为派生基类PasswordBoxExtendBasedOnPasswordBoxExtendBaseStyle对外可用的扩展样式借助附加属性实现标题、水印功能此外还有两个便捷变体PasswordBox.Small基于PasswordBoxBaseStyle设置MinHeight20、Padding6,0和PasswordBoxExtend.Small基于PasswordBoxExtend同时通过hc:InfoElement.MinContentHeight、hc:InfoElement.ContentHeight、hc:TitleElement.MarginOnTheLeft、hc:TitleElement.MarginOnTheTop调整紧凑布局定义见 PasswordBox.xaml。需要特别注意的是文档与源码都明确强调PasswordBoxBaseStyle和PasswordBoxExtendBaseStyle不应该被直接引用而应始终被其它样式以BasedOn的方式复用这与 HandyControl 整体基类样式 派生样式的设计约定一致。二、PasswordBoxBaseStyle原生密码框的基础外观PasswordBoxBaseStyle在 PasswordBoxBaseStyle.xaml 中定义它集中设置了一组输入控件通用属性PasswordChar默认值为●圆点KeyboardNavigation.TabNavigationNone避免 Tab 导航干扰HorizontalContentAlignmentLeftAllowDropTrue支持拖放ScrollViewer.PanningModeVerticalFirst、Stylus.IsFlicksEnabledFalse优化触摸与手写笔输入体验。其控件模板以hc:SimplePanel为根内部包含一个Border背景/边框容器和一个ScrollViewer名为PART_ContentHost即 WPF 密码框约定的内容宿主。模板触发器定义了三态边框反馈IsEnabledfalseborder透明度降为0.4IsMouseOvertrueBorderBrush切换为{DynamicResource SecondaryBorderBrush}IsFocusedtrueBorderBrush切换为主题色{DynamicResource PrimaryBrush}。Border的圆角通过hc:BorderElement.CornerRadius附加属性绑定因此你可以像下面这样让密码框直接具备圆角外观PasswordBox PasswordChar* VerticalAlignmentCenter Width120 /上面的示例未显式指定Style此时将命中 HandyControl 提供的无 Key 隐式样式Style BasedOn{StaticResource PasswordBoxBaseStyle} TargetTypePasswordBox/见 PasswordBox.xaml。这也是文档中给出的原生密码框默认样式用例。三、PasswordBoxExtend让原生密码框拥有标题与水印PasswordBoxExtendBaseStylePasswordBoxBaseStyle.xaml在PasswordBoxBaseStyle基础上进一步注入扩展能力hc:InfoElement.Symbol●默认标记符号hc:InfoElement.ContentHeight为NaN、hc:InfoElement.MinContentHeight取DefaultControlHeight默认控件高度控制内容区域高度hc:PasswordBoxAttach.IsMonitoringTrue默认开启密码长度监测详见下一节模板默认使用PasswordBoxExtendTopTemplate标题在上方当hc:InfoElement.TitlePlacement为Left时通过样式触发器切换到PasswordBoxExtendLeftTemplate标题在左侧并把Width设为Auto。PasswordBoxExtend是继承该基类、无额外设置的对外样式PasswordBox.xaml。文档给出的核心用法如下!--为使普通密码输入文本框显示水印,需要设定 PasswordBoxAttach.PasswordLength0-- PasswordBox Style{DynamicResource PasswordBoxExtend} PasswordChar* hc:PasswordBoxAttach.PasswordLength0 hc:InfoElement.Placeholder请输入密码 VerticalAlignmentCenter Width120/PasswordBox PasswordBox Style{DynamicResource PasswordBoxExtend} PasswordChar* hc:TitleElement.Title用户密码 hc:TitleElement.TitlePlacementTop VerticalAlignmentCenter Width120/PasswordBox第一个示例实现带水印的密码输入框第二个示例实现带标题的密码输入框。两者可以同时组合使用标题 水印 必填标记这在 demo 页面 NativePasswordBoxDemo.xaml 中有完整呈现。3.1 水印的显示原理PasswordBoxAttach.PasswordLength水印能正确显示的关键在于附加属性hc:PasswordBoxAttach.PasswordLength。在PasswordBoxExtendTopTemplate/PasswordBoxExtendLeftTemplate中模板内有一个名为placeholder的TextBlock默认VisibilityCollapsed其文本绑定hc:InfoElement.Placeholder模板触发器如下Trigger Propertyhc:PasswordBoxAttach.PasswordLength Value0 Setter PropertyVisibility TargetNameplaceholder ValueVisible/ /Trigger也就是说当密码长度为 0即尚未输入任何字符时水印可见一旦用户输入任意字符水印自动隐藏。这正是文档中注释为使普通密码输入文本框显示水印,需要设定PasswordBoxAttach.PasswordLength0的原因——必须把该附加属性显式设置为 0触发器才能命中并显示水印。该附加属性的实现位于 src/Shared/HandyControl_Shared/Controls/Attach/PasswordBoxAttach.csPasswordLengthPropertyint类型附加属性默认值ValueBoxes.Int0Box即 0通过SetPasswordLength/GetPasswordLength访问IsMonitoringPropertybool类型附加属性声明了FrameworkPropertyMetadataOptions.Inherits沿元素树向下继承默认false当IsMonitoring变为true时OnIsMonitoringChanged会为该PasswordBox挂接PasswordChanged事件事件处理器PasswordChanged会把当前Password.Length写回PasswordLength附加属性从而驱动模板触发器。PasswordBoxExtendBaseStyle将IsMonitoring默认为True因此只要应用扩展样式密码长度就会随输入实时更新水印的显隐也因此完全自动化。3.2 标题与水印来自哪InfoElement 与 TitleElement 附加属性水印文本通过hc:InfoElement.Placeholder设置其定义在 src/Shared/HandyControl_Shared/Controls/Attach/InfoElement.cs 中类型为string且同样带Inherits选项。InfoElement还提供了与表单输入密切相关的其它附加属性hc:InfoElement.Necessarybool是否必填为true时在标题右侧渲染红色必填标记hc:InfoElement.Symbolstring必填/标记符号扩展样式默认●hc:InfoElement.ContentHeight/MinContentHeight/MaxContentHeight内容区高度控制默认分别为28.0、28.0、∞hc:InfoElement.ShowClearButtonbool是否在悬停时显示一键清空按钮配合hc:PasswordBox扩展控件使用hc:InfoElement.RegexPattern、hc:InfoElement.IsReadOnly正则校验与只读相关。标题文本通过hc:TitleElement.Title设置。TitleElementsrc/Shared/HandyControl_Shared/Controls/Attach/TitleElement.cs还定义了布局相关的附加属性TitlePlacementTitlePlacementType标题位置默认Top上方可设为Left左侧TitleWidthGridLength标题列宽默认Auto左置标题时常用定值如 demo 中的140HorizontalAlignment/VerticalAlignment标题对齐方式MarginOnTheLeft/MarginOnTheTop左置 / 上置标题的边距Padding、MinHeight、MinWidth等辅助布局属性。这些属性在PasswordBoxExtendTopTemplate/PasswordBoxExtendLeftTemplate中通过RelativeSource{RelativeSource TemplatedParent}绑定到模板元素从而保证标题、标记、水印与输入框在同一个模板内协同工作。四、完整可运行示例标题、水印、必填、左置组合综合上述特性一个标题在上方 水印 必填标记的密码框可以写成PasswordBox Style{DynamicResource PasswordBoxExtend} PasswordChar* hc:PasswordBoxAttach.PasswordLength0 hc:InfoElement.Title登录密码 hc:InfoElement.Placeholder请输入密码 hc:InfoElement.NecessaryTrue VerticalAlignmentCenter Width240/若希望标题位于左侧并固定宽度则使用TitlePlacementLeft与TitleWidthPasswordBox Style{DynamicResource PasswordBoxExtend} PasswordChar* hc:PasswordBoxAttach.PasswordLength0 hc:InfoElement.Title用户密码 hc:InfoElement.TitlePlacementLeft hc:InfoElement.TitleWidth140 hc:InfoElement.Placeholder请输入密码 hc:InfoElement.NecessaryTrue VerticalAlignmentCenter Width380/这两个组合分别对应 demo 页面 NativePasswordBoxDemo.xaml 中的第二、第四组示例。标题在左侧时样式触发器会自动将模板切换为PasswordBoxExtendLeftTemplatePasswordBoxBaseStyle.xaml该模板用两列Grid划分标题区与输入区输入区列宽由TitleWidth决定。五、小尺寸变体与扩展控件说明5.1 紧凑布局PasswordBoxExtend.Small在工具栏、表格等需要紧凑排布的场景可使用PasswordBoxExtend.SmallPasswordBox Style{DynamicResource PasswordBoxExtend.Small} PasswordChar* hc:PasswordBoxAttach.PasswordLength0 hc:InfoElement.Title用户密码 hc:InfoElement.TitlePlacementLeft hc:InfoElement.TitleWidth140 hc:InfoElement.Placeholder请输入密码 hc:InfoElement.NecessaryTrue Width380/该样式在 PasswordBox.xaml 中定义额外设置MinHeight20、Padding6,0并把InfoElement.ContentHeight/MinContentHeight压缩到20同时调整了标题的左右/上下边距使整体高度明显小于默认控件。5.2 更强大的 hc:PasswordBox 扩展控件除本文所述的原生PasswordBox样式外HandyControl 还提供了独立的扩展控件hc:PasswordBox位于HandyControl.Controls命名空间其基类样式为PasswordBoxPlusBaseStyle。它额外支持ShowEyeButton显示眼睛切换按钮可在明文与密文间切换模板中由ToggleButtonIconSwitchElement实现hc:InfoElement.ShowClearButton悬停时显示清空按钮IsSafeEnabled是否启用安全模式demo 中通过绑定UnsafePassword演示明文回显。相关模板PasswordBoxPlusTopTemplate/PasswordBoxPlusLeftTemplate同样定义于 PasswordBoxBaseStyle.xaml完整用法可参考 PasswordBoxDemo.xaml。六、小结围绕原生密码框这一场景HandyControl 的解决方案可以归纳为一条清晰的主线基类样式PasswordBoxBaseStyle/PasswordBoxExtendBaseStyle负责统一外观与交互反馈并通过BasedOn逐层复用不直接对外使用对外样式PasswordBoxExtend借助InfoElement.Placeholder、TitleElement.Title等附加属性实现标题、水印、必填标记并通过PasswordBoxAttach.IsMonitoringPasswordChanged事件实时同步PasswordLength驱动模板触发器完成水印显隐模板双布局Top/Left由TitlePlacement一键切换配合TitleWidth、MarginOnTheLeft等属性即可适配表单与紧凑场景。掌握这套附加属性 模板触发器的组合模式后你不仅能直接复用PasswordBoxExtend还能参照 PasswordBoxBaseStyle.xaml 的写法为其它原生输入控件定制同样具备标题、水印能力的分层样式。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl DatePicker 日期选择器样式体系全解析从默认样式到标题、水印与必填扩展HandyControl DatePicker 日期选择器样式体系全解析从默认样式到标题、水印与必填扩展 本指南以 HandyControl 原生 WPF DUI组件桌面应用HandyControl 文本框TextBox样式体系实战指南标题、水印与必填标记的附加属性用法HandyControl 文本框TextBox样式体系实战指南标题、水印与必填标记的附加属性用法 本文以 HandyControl 原生文本框 TextBUI组件桌面应用HandyControl PasswordBox 密码框控件完全指南从基础用法到源码级原理剖析HandyControl PasswordBox 密码框控件完全指南从基础用法到源码级原理剖析 本文围绕 HandyControl 中的 PasswordBoUI组件桌面应用上一篇炉石传说HsMod插件终极游戏体验增强工具完整指南下一篇Redisson MapReduce终极指南如何在Redis上实现分布式计算的完整教程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考