尧图网页设计 
UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载TextBlock是 WPF 中使用频率最高的基础控件之一而 HandyControl 在native_controls原生控件分类下为其内置了一套完整、可复用的文本样式体系。本文围绕 HandyControl 仓库中 TextBlock 文本块文档 展开系统讲解TextBlockBaseStyle与TextBlockBoldBaseStyle两类基础样式的设计原则、全部预设样式的字号与配色映射以及如何基于它们用BasedOn快速派生业务自定义样式最终让你的文本在不同场景下保持统一的视觉层级与主题联动。样式体系概览与文件位置HandyControl 的 TextBlock 样式遵循“基础样式 派生样式”的两级结构集中定义在两个资源字典中基础样式TextBlockBaseStyle.xaml定义TextBlockBaseStyle、TextBlockBoldBaseStyle以及hc:HighlightTextBlock的HighlightTextBlockBaseStyle派生样式TextBlock.xaml基于上述基础样式定义全部预设的 TextBlock 样式。在合并后的主题文件 Theme.xaml约第 1343-3421 行中可以看到这些样式被整体内联合并而 Theme_40.txt 与 Theme_GE45.txt 则记录了样式文件的合并清单其中明确包含Styles\Base\TextBlockBaseStyle.xaml与Styles\TextBlock.xaml。也就是说无论你引用Theme.xaml还是按需引用单独的样式文件都能拿到同一套样式定义。基础样式TextBlockBaseStyle 与 TextBlockBoldBaseStyle官方文档明确提示这两个基础样式不推荐直接使用应当始终被其它样式以BasedOn的方式继承使用。之所以这样设计是因为基础样式承担了“统一默认值”的职责直接使用会让你的 XAML 失去派生扩展的余地也不利于主题统一。查看 TextBlockBaseStyle.xaml 的源码可以确认基础样式共设置了三个默认属性Style x:KeyTextBlockBaseStyle TargetTypeTextBlock Setter PropertyVerticalAlignment ValueCenter/ Setter PropertyHorizontalAlignment ValueCenter/ Setter PropertyForeground Value{DynamicResource PrimaryTextBrush}/ /Style Style x:KeyTextBlockBoldBaseStyle BasedOn{StaticResource TextBlockBaseStyle} TargetTypeTextBlock Setter PropertyFontWeight ValueBold/ /Style基础样式继承核心默认值TextBlockBaseStyle无顶层垂直/水平居中前景色为PrimaryTextBrush主题主文本色TextBlockBoldBaseStyleTextBlockBaseStyle在其基础上额外设置FontWeightBold这里的前景色使用了DynamicResource而非StaticResource意味着文本颜色会随 HandyControl 的皮肤如SkinDefault、SkinDark、SkinViolet见 Themes 目录动态切换这是整个样式体系与主题联动的关键机制。预设样式清单字号与配色映射基于两类基础样式TextBlock.xaml 一共派生出了 17 个预设样式可按用途分为三组标题层级组控制字号样式 Key继承自FontSize 资源实际字号TextBlockLargeBoldTextBlockBoldBaseStyleLargeFontSize24TextBlockLargeTextBlockBaseStyleLargeFontSize24TextBlockTitleBoldTextBlockBoldBaseStyleHeadFontSize20TextBlockTitleTextBlockBaseStyleHeadFontSize20TextBlockSubTitleBoldTextBlockBoldBaseStyleSubHeadFontSize16TextBlockSubTitleTextBlockBaseStyleSubHeadFontSize16TextBlockDefaultBoldTextBlockBoldBaseStyle—继承默认12语义配色组控制前景色样式 KeyForeground 资源语义TextBlockDefaultAccentAccentBrush强调/品牌色TextBlockDefaultPrimaryPrimaryBrush主操作色渐变TextBlockDefaultDangerDangerBrush危险/错误渐变TextBlockDefaultWarningWarningBrush警告渐变TextBlockDefaultInfoInfoBrush信息提示渐变TextBlockDefaultSuccessSuccessBrush成功渐变TextBlockDefaultSecLightSecondaryTextBrush次级文本TextBlockDefaultThiLightThirdlyTextBrush三级文本默认样式样式 Key说明TextBlockDefault纯继承TextBlockBaseStyle不做任何覆盖即标准正文样式以上字号资源统一定义在 Fonts.xamlsystem:Double x:KeyLargeFontSize24/system:Double system:Double x:KeyHeadFontSize20/system:Double system:Double x:KeySubHeadFontSize16/system:Double system:Double x:KeyTextFontSize12/system:Double而配色画刷定义在 Brushes.xaml其中PrimaryBrush、DangerBrush、WarningBrush、InfoBrush、SuccessBrush均为从左到右的LinearGradientBrush浅色 → 深色渐变PrimaryTextBrush、SecondaryTextBrush、ThirdlyTextBrush、AccentBrush为SolidColorBrush。理解了这两份资源定义你就知道为什么默认组的语义样式能呈现出比普通单色更丰富的视觉效果。案例完整可运行的样式演示官方文档给出了一个可以直接复制运行的演示案例把三组样式依次渲染在一列上非常适合用于快速目检每种样式效果。原文案例如下稍作整理StackPanel TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockLargeBold Style{StaticResource TextBlockLargeBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockLarge Style{StaticResource TextBlockLarge}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockHeaderBold Style{StaticResource TextBlockTitleBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockHeader Style{StaticResource TextBlockTitle}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockSubHeaderBold Style{StaticResource TextBlockSubTitleBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockSubHeader Style{StaticResource TextBlockSubTitle}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultBold Style{StaticResource TextBlockDefaultBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefault Style{StaticResource TextBlockDefault}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultAccent Style{StaticResource TextBlockDefaultAccent}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultSecLight Style{StaticResource TextBlockDefaultSecLight}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultThiLight Style{StaticResource TextBlockDefaultThiLight}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultPrimary Style{StaticResource TextBlockDefaultPrimary}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultDanger Style{StaticResource TextBlockDefaultDanger}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultWarning Style{StaticResource TextBlockDefaultWarning}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultInfo Style{StaticResource TextBlockDefaultInfo}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultSuccess Style{StaticResource TextBlockDefaultSuccess}/ /StackPanel注意案例中的Text只是展示用文本样式由Style{StaticResource ...}决定例如TextTextBlockHeader对应TextBlockTitle样式TextTextBlockSubHeaderBold对应TextBlockSubTitleBold。这个案例在仓库中也有对应的真实演示页面 TextBlockDemo.xaml它使用hc:UniformSpacingPanelOrientationVertical、Spacing5加hc:ScrollViewerIsInertiaEnabledTrue承载同样的样式列表放在TransitioningContentControl中用于演示切换动画可作为实际工程化写法的参考。基于 BasedOn 的扩展实践官方对基础样式的使用约束非常明确“始终被其它样式以BasedOn的方式使用”。这也是 HandyControl 整个主题体系的通用约定。在实际项目中你可以这样派生自己的业务样式Style x:KeyMyPageTitleStyle BasedOn{StaticResource TextBlockTitleBold} TargetTypeTextBlock Setter PropertyForeground Value{DynamicResource PrimaryBrush}/ /Style Style x:KeyMyMutedTextStyle BasedOn{StaticResource TextBlockDefault} TargetTypeTextBlock Setter PropertyForeground Value{DynamicResource ThirdlyTextBrush}/ Setter PropertyTextTrimming ValueCharacterEllipsis/ /Style这样做的好处是即使未来基础样式的默认值如前景色、对齐方式随主题升级而变化你的派生样式依然能自动继承最新默认值只覆盖自己关心的属性避免重复维护。相关延伸HighlightTextBlock 高亮文本块在 TextBlockBaseStyle.xaml 中还顺带定义了高亮文本块的基样式Style x:KeyHighlightTextBlockBaseStyle TargetTypehc:HighlightTextBlock Setter PropertyHighlightBrush Value{DynamicResource PrimaryBrush}/ Setter PropertyHighlightTextBrush Value{DynamicResource TextIconBrush}/ /Style随后在 TextBlock.xaml 末尾通过Style BasedOn{StaticResource HighlightTextBlockBaseStyle} TargetTypehc:HighlightTextBlock/将其注册为hc:HighlightTextBlock的类型默认样式即无需指定 Key 即可生效。这属于 TextBlock 样式体系的一部分扩展适合需要关键词高亮展示的场景。使用注意事项引用方式直接使用Style{StaticResource TextBlockTitle}即可若单独引入样式文件需保证 Fonts.xaml 与 Brushes.xaml 中的资源先被加载因为这些样式通过StaticResource/DynamicResource引用了字号与画刷资源。不要直接使用基础样式TextBlockBaseStyle与TextBlockBoldBaseStyle是设计给派生用的直接使用时既无法体现语义也会绕开主题统一管理。主题联动前景色统一使用DynamicResource切换 HandyControl 皮肤SkinDefault/SkinDark/SkinViolet时文本颜色会自动适配无需额外处理。动态资源与静态资源的选择派生样式中的Foreground建议同样使用DynamicResource以保持与主题的实时联动。掌握 HandyControl 的 TextBlock 样式体系后你可以在项目中快速建立一致的文本视觉层级用TextBlockTitle/TextBlockSubTitle区分标题用TextBlockDefault*系列表达语义状态再通过BasedOn扩展出自己的业务样式既省去了重复写Setter的样板代码又保证了与主题皮肤的无缝协同。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl WPF ButtonGroup 按钮组控件实战指南RadioGroupItem 样式体系与水平/垂直布局详解HandyControl WPF ButtonGroup 按钮组控件实战指南RadioGroupItem 样式体系与水平/垂直布局详解 导读 ButtonGrUI组件桌面应用Draft.js 富文本样式实战基于 RichUtils 实现粗体、斜体与块级样式控制Draft.js 富文本样式实战基于 RichUtils 实现粗体、斜体与块级样式控制 导读 本文以 Draft.js 官方快速上手文档 QuickStart前端UI组件Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展 Draft.js 编辑器在渲染时会给部前端UI组件上一篇免费清理 Windows 驱动存储库完整指南RAPR 一键挑出旧驱动轻松找回 10GB 空间下一篇Open-LLM-VTuber 本地部署全记录3 条命令跑通会语音对话的 Live2D 虚拟形象创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HandyControl 原生控件指南：TextBlock 文本块样式体系与 BasedOn 扩展实践
UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载TextBlock是 WPF 中使用频率最高的基础控件之一而 HandyControl 在native_controls原生控件分类下为其内置了一套完整、可复用的文本样式体系。本文围绕 HandyControl 仓库中 TextBlock 文本块文档 展开系统讲解TextBlockBaseStyle与TextBlockBoldBaseStyle两类基础样式的设计原则、全部预设样式的字号与配色映射以及如何基于它们用BasedOn快速派生业务自定义样式最终让你的文本在不同场景下保持统一的视觉层级与主题联动。样式体系概览与文件位置HandyControl 的 TextBlock 样式遵循“基础样式 派生样式”的两级结构集中定义在两个资源字典中基础样式TextBlockBaseStyle.xaml定义TextBlockBaseStyle、TextBlockBoldBaseStyle以及hc:HighlightTextBlock的HighlightTextBlockBaseStyle派生样式TextBlock.xaml基于上述基础样式定义全部预设的 TextBlock 样式。在合并后的主题文件 Theme.xaml约第 1343-3421 行中可以看到这些样式被整体内联合并而 Theme_40.txt 与 Theme_GE45.txt 则记录了样式文件的合并清单其中明确包含Styles\Base\TextBlockBaseStyle.xaml与Styles\TextBlock.xaml。也就是说无论你引用Theme.xaml还是按需引用单独的样式文件都能拿到同一套样式定义。基础样式TextBlockBaseStyle 与 TextBlockBoldBaseStyle官方文档明确提示这两个基础样式不推荐直接使用应当始终被其它样式以BasedOn的方式继承使用。之所以这样设计是因为基础样式承担了“统一默认值”的职责直接使用会让你的 XAML 失去派生扩展的余地也不利于主题统一。查看 TextBlockBaseStyle.xaml 的源码可以确认基础样式共设置了三个默认属性Style x:KeyTextBlockBaseStyle TargetTypeTextBlock Setter PropertyVerticalAlignment ValueCenter/ Setter PropertyHorizontalAlignment ValueCenter/ Setter PropertyForeground Value{DynamicResource PrimaryTextBrush}/ /Style Style x:KeyTextBlockBoldBaseStyle BasedOn{StaticResource TextBlockBaseStyle} TargetTypeTextBlock Setter PropertyFontWeight ValueBold/ /Style基础样式继承核心默认值TextBlockBaseStyle无顶层垂直/水平居中前景色为PrimaryTextBrush主题主文本色TextBlockBoldBaseStyleTextBlockBaseStyle在其基础上额外设置FontWeightBold这里的前景色使用了DynamicResource而非StaticResource意味着文本颜色会随 HandyControl 的皮肤如SkinDefault、SkinDark、SkinViolet见 Themes 目录动态切换这是整个样式体系与主题联动的关键机制。预设样式清单字号与配色映射基于两类基础样式TextBlock.xaml 一共派生出了 17 个预设样式可按用途分为三组标题层级组控制字号样式 Key继承自FontSize 资源实际字号TextBlockLargeBoldTextBlockBoldBaseStyleLargeFontSize24TextBlockLargeTextBlockBaseStyleLargeFontSize24TextBlockTitleBoldTextBlockBoldBaseStyleHeadFontSize20TextBlockTitleTextBlockBaseStyleHeadFontSize20TextBlockSubTitleBoldTextBlockBoldBaseStyleSubHeadFontSize16TextBlockSubTitleTextBlockBaseStyleSubHeadFontSize16TextBlockDefaultBoldTextBlockBoldBaseStyle—继承默认12语义配色组控制前景色样式 KeyForeground 资源语义TextBlockDefaultAccentAccentBrush强调/品牌色TextBlockDefaultPrimaryPrimaryBrush主操作色渐变TextBlockDefaultDangerDangerBrush危险/错误渐变TextBlockDefaultWarningWarningBrush警告渐变TextBlockDefaultInfoInfoBrush信息提示渐变TextBlockDefaultSuccessSuccessBrush成功渐变TextBlockDefaultSecLightSecondaryTextBrush次级文本TextBlockDefaultThiLightThirdlyTextBrush三级文本默认样式样式 Key说明TextBlockDefault纯继承TextBlockBaseStyle不做任何覆盖即标准正文样式以上字号资源统一定义在 Fonts.xamlsystem:Double x:KeyLargeFontSize24/system:Double system:Double x:KeyHeadFontSize20/system:Double system:Double x:KeySubHeadFontSize16/system:Double system:Double x:KeyTextFontSize12/system:Double而配色画刷定义在 Brushes.xaml其中PrimaryBrush、DangerBrush、WarningBrush、InfoBrush、SuccessBrush均为从左到右的LinearGradientBrush浅色 → 深色渐变PrimaryTextBrush、SecondaryTextBrush、ThirdlyTextBrush、AccentBrush为SolidColorBrush。理解了这两份资源定义你就知道为什么默认组的语义样式能呈现出比普通单色更丰富的视觉效果。案例完整可运行的样式演示官方文档给出了一个可以直接复制运行的演示案例把三组样式依次渲染在一列上非常适合用于快速目检每种样式效果。原文案例如下稍作整理StackPanel TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockLargeBold Style{StaticResource TextBlockLargeBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockLarge Style{StaticResource TextBlockLarge}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockHeaderBold Style{StaticResource TextBlockTitleBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockHeader Style{StaticResource TextBlockTitle}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockSubHeaderBold Style{StaticResource TextBlockSubTitleBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockSubHeader Style{StaticResource TextBlockSubTitle}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultBold Style{StaticResource TextBlockDefaultBold}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefault Style{StaticResource TextBlockDefault}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultAccent Style{StaticResource TextBlockDefaultAccent}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultSecLight Style{StaticResource TextBlockDefaultSecLight}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultThiLight Style{StaticResource TextBlockDefaultThiLight}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultPrimary Style{StaticResource TextBlockDefaultPrimary}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultDanger Style{StaticResource TextBlockDefaultDanger}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultWarning Style{StaticResource TextBlockDefaultWarning}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultInfo Style{StaticResource TextBlockDefaultInfo}/ TextBlock HorizontalAlignmentLeft Margin5 TextTextBlockDefaultSuccess Style{StaticResource TextBlockDefaultSuccess}/ /StackPanel注意案例中的Text只是展示用文本样式由Style{StaticResource ...}决定例如TextTextBlockHeader对应TextBlockTitle样式TextTextBlockSubHeaderBold对应TextBlockSubTitleBold。这个案例在仓库中也有对应的真实演示页面 TextBlockDemo.xaml它使用hc:UniformSpacingPanelOrientationVertical、Spacing5加hc:ScrollViewerIsInertiaEnabledTrue承载同样的样式列表放在TransitioningContentControl中用于演示切换动画可作为实际工程化写法的参考。基于 BasedOn 的扩展实践官方对基础样式的使用约束非常明确“始终被其它样式以BasedOn的方式使用”。这也是 HandyControl 整个主题体系的通用约定。在实际项目中你可以这样派生自己的业务样式Style x:KeyMyPageTitleStyle BasedOn{StaticResource TextBlockTitleBold} TargetTypeTextBlock Setter PropertyForeground Value{DynamicResource PrimaryBrush}/ /Style Style x:KeyMyMutedTextStyle BasedOn{StaticResource TextBlockDefault} TargetTypeTextBlock Setter PropertyForeground Value{DynamicResource ThirdlyTextBrush}/ Setter PropertyTextTrimming ValueCharacterEllipsis/ /Style这样做的好处是即使未来基础样式的默认值如前景色、对齐方式随主题升级而变化你的派生样式依然能自动继承最新默认值只覆盖自己关心的属性避免重复维护。相关延伸HighlightTextBlock 高亮文本块在 TextBlockBaseStyle.xaml 中还顺带定义了高亮文本块的基样式Style x:KeyHighlightTextBlockBaseStyle TargetTypehc:HighlightTextBlock Setter PropertyHighlightBrush Value{DynamicResource PrimaryBrush}/ Setter PropertyHighlightTextBrush Value{DynamicResource TextIconBrush}/ /Style随后在 TextBlock.xaml 末尾通过Style BasedOn{StaticResource HighlightTextBlockBaseStyle} TargetTypehc:HighlightTextBlock/将其注册为hc:HighlightTextBlock的类型默认样式即无需指定 Key 即可生效。这属于 TextBlock 样式体系的一部分扩展适合需要关键词高亮展示的场景。使用注意事项引用方式直接使用Style{StaticResource TextBlockTitle}即可若单独引入样式文件需保证 Fonts.xaml 与 Brushes.xaml 中的资源先被加载因为这些样式通过StaticResource/DynamicResource引用了字号与画刷资源。不要直接使用基础样式TextBlockBaseStyle与TextBlockBoldBaseStyle是设计给派生用的直接使用时既无法体现语义也会绕开主题统一管理。主题联动前景色统一使用DynamicResource切换 HandyControl 皮肤SkinDefault/SkinDark/SkinViolet时文本颜色会自动适配无需额外处理。动态资源与静态资源的选择派生样式中的Foreground建议同样使用DynamicResource以保持与主题的实时联动。掌握 HandyControl 的 TextBlock 样式体系后你可以在项目中快速建立一致的文本视觉层级用TextBlockTitle/TextBlockSubTitle区分标题用TextBlockDefault*系列表达语义状态再通过BasedOn扩展出自己的业务样式既省去了重复写Setter的样板代码又保证了与主题皮肤的无缝协同。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl WPF ButtonGroup 按钮组控件实战指南RadioGroupItem 样式体系与水平/垂直布局详解HandyControl WPF ButtonGroup 按钮组控件实战指南RadioGroupItem 样式体系与水平/垂直布局详解 导读 ButtonGrUI组件桌面应用Draft.js 富文本样式实战基于 RichUtils 实现粗体、斜体与块级样式控制Draft.js 富文本样式实战基于 RichUtils 实现粗体、斜体与块级样式控制 导读 本文以 Draft.js 官方快速上手文档 QuickStart前端UI组件Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展 Draft.js 编辑器在渲染时会给部前端UI组件上一篇免费清理 Windows 驱动存储库完整指南RAPR 一键挑出旧驱动轻松找回 10GB 空间下一篇Open-LLM-VTuber 本地部署全记录3 条命令跑通会语音对话的 Live2D 虚拟形象创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考