CodeWF.Markdown / 文档 / 02 排版主题与资源 Key
02 排版主题与资源 Key
这份文件用于确认排版主题切换方式是否正确。MarkdownThemes 可以统一设置默认排版主题与尺寸,MarkdownViewer 也可以单独设置 TypographyTheme 和 TypographySize,适合同一个项目里多处预览区使用不同阅读密度。主题包统一使用固定资源 Key,例如 ButtonSolidPrimaryBackground、BorderCardBackground、CodeWFMarkdownParagraphLineHeight。切换排版主题时,应先移除上一套 Markdown 排版资源,再加入目标资源字典。
观察点
- 切换上方“排版主题”组合框时,链接、标题边线、引用背景、表格表头、行高应立即变化。
- 切换上方“应用主题”组合框时,同一排版主题的 Light/Dark 资源应正确切换。
- 多次切换主题后,不应叠加旧主题颜色,也不应需要重新创建
MarkdownViewer。
推荐用法
应用启动时可以指定全局默认排版主题;不填写时默认是 Basic + Normal:
xml
<Application.Styles>
<FluentTheme />
<markdownThemes:MarkdownThemes />
</Application.Styles>需要统一切换项目默认样式时,也可以在 MarkdownThemes 上设置 TypographyTheme 和 TypographySize。
单个预览区可以覆盖为自己的排版主题和尺寸:
xml
<md:MarkdownViewer
Markdown="{Binding Markdown}"
TypographyTheme="OrangeHeart"
TypographySize="Small" />运行时可以把排版资源覆盖到应用级资源,也可以只覆盖到某个控件或窗口:
csharp
MarkdownThemes.OverrideTypographyResources(app, MarkdownTypographyThemes.BlueGlow, MarkdownTypographySizes.Small);
MarkdownThemes.OverrideTypographyResources(owner, customTypographyResources);
markdownViewer.TypographyTheme = MarkdownTypographyThemes.Simple;
markdownViewer.TypographySize = MarkdownTypographySizes.Small;自定义主题只需要覆盖固定 Key:
xml
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonSolidPrimaryBackground" Color="#0F766E" />
<SolidColorBrush x:Key="BorderCardBackground" Color="#ECFDF5" />
<x:Double x:Key="CodeWFMarkdownParagraphLineHeight">31</x:Double>
</ResourceDictionary>主题对比表
| 主题 | 适合场景 | 视觉检查 |
|---|---|---|
| 科技蓝 | 技术产品文档 | 冷色强调、表头清晰 |
| 前端之峰 | 前端资讯文章 | 明亮、醒目 |
| 极客黑 | 深色技术内容 | 高对比、代码区稳定 |
| 简洁 | 内部文档 | 克制、耐看 |
| 示例:青墨绿 | 自定义资源字典 | 绿色强调、较大行高 |
长段落排版
这一段文字用于观察不同排版主题下的阅读密度。段落应保持稳定的左对齐和自然换行,行高变化应只影响阅读节奏,不应造成文字重叠、按钮挤压、表格边框错位或预览区域横向溢出。
引用块使用
BorderCardBackground和ButtonSolidPrimaryBackground。如果主题资源切换正确,这里的背景色和左侧边线会一起变化。
嵌套内容
- 一级条目
- 子项一:说明文字可以换行,并保持缩进。
- 子项二:包含
inline code和 强调文本。
- 第二个条目
- 主题资源已加载
- 等待接入更多自定义资源