syncfusion-wpf-markdown-viewer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF SfMarkdownViewer

实现WPF SfMarkdownViewer

The

SfMarkdownViewer

renders Markdown content — headings, lists, links, images, tables, code blocks, and block quotes — into a styled WPF visual. Use it to display documentation, release notes, help content, README files, or any Markdown-based content without external rendering engines.

SfMarkdownViewer

可将Markdown内容（包括标题、列表、链接、图片、表格、代码块和块引用）渲染为样式化的WPF可视化元素。无需借助外部渲染引擎，你就可以用它来显示文档、发布说明、帮助内容、README文件或任何基于Markdown的内容。

When to Use This Skill

何时使用该组件

User needs to render or preview Markdown content in a WPF app
Loading Markdown from a string, local file, or remote URL
Displaying documentation, changelogs, help text, or README files
Intercepting or disabling hyperlink navigation from Markdown
Rendering Mermaid flowchart diagrams embedded in Markdown

需要在WPF应用中渲染或预览Markdown内容时
从字符串、本地文件或远程URL加载Markdown时
显示文档、更新日志、帮助文本或README文件时
拦截或禁用Markdown中的超链接导航时
渲染Markdown中嵌入的Mermaid流程图时

Quick Start

快速开始

xaml

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:markdown="clr-namespace:Syncfusion.UI.Xaml.Markdown;assembly=Syncfusion.SfMarkdownViewer.WPF"
    xmlns:system="clr-namespace:System;assembly=mscorlib">
    <Grid>
        <markdown:SfMarkdownViewer Source="# Hello World&#10;&#10;This is **bold** and *italic* text." />
    </Grid>
</Window>

csharp

using Syncfusion.UI.Xaml.Markdown;

SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
markdownViewer.Source = "# Hello World\n\nThis is **bold** and *italic* text.";
this.Content = markdownViewer;

xaml

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:markdown="clr-namespace:Syncfusion.UI.Xaml.Markdown;assembly=Syncfusion.SfMarkdownViewer.WPF"
    xmlns:system="clr-namespace:System;assembly=mscorlib">
    <Grid>
        <markdown:SfMarkdownViewer Source="# Hello World&#10;&#10;This is **bold** and *italic* text." />
    </Grid>
</Window>

csharp

using Syncfusion.UI.Xaml.Markdown;

SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
markdownViewer.Source = "# Hello World\n\nThis is **bold** and *italic* text.";
this.Content = markdownViewer;

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet package installation (Syncfusion.SfMarkdownViewer.Wpf)
Required assembly references (3 assemblies)
XAML namespace import
Adding control via XAML and C#
Inline Markdown string via Source property
SfSkinManager theme support

📄 阅读： references/getting-started.md

NuGet包安装（Syncfusion.SfMarkdownViewer.Wpf）
所需的程序集引用（3个程序集）
XAML命名空间导入
通过XAML和C#添加控件
通过Source属性设置内嵌Markdown字符串
SfSkinManager主题支持

Loading Content

加载内容

📄 Read: references/loading-content.md

Loading from raw Markdown string
Loading from a local file path
Loading from a remote HTTP/HTTPS URL
XAML CDATA string source pattern
Decision guide: which source type to use

📄 阅读： references/loading-content.md

从原始Markdown字符串加载
从本地文件路径加载
从远程HTTP/HTTPS URL加载
XAML CDATA字符串源模式
决策指南：选择哪种源类型

Events

事件

📄 Read: references/events.md

HyperlinkClicked event
MarkdownHyperlinkClickedEventArgs (Url, Cancel)
Disabling hyperlink navigation (Cancel = true)
Retrieving the clicked URL for in-app routing

📄 阅读： references/events.md

HyperlinkClicked事件
MarkdownHyperlinkClickedEventArgs（Url、Cancel）
禁用超链接导航（Cancel = true）
获取点击的URL以进行应用内路由

Mermaid Diagrams

Mermaid图表

📄 Read: references/mermaid-diagrams.md

MermaidBlockTemplate property
Embedding SfDiagram in a DataTemplate
FlowchartLayout configuration
LoadDiagramFromMermaid() usage
Required dependencies for Mermaid support

📄 阅读： references/mermaid-diagrams.md

MermaidBlockTemplate属性
在DataTemplate中嵌入SfDiagram
FlowchartLayout配置
LoadDiagramFromMermaid()的使用
Mermaid支持所需的依赖项

Key Properties

关键属性

Property	Type	Purpose
`Source`	`string`	Raw Markdown string, file path, or HTTP/HTTPS URL
`MermaidBlockTemplate`	`DataTemplate`	Custom template for rendering mermaid code blocks

属性	类型	用途
`Source`	`string`	原始Markdown字符串、文件路径或HTTP/HTTPS URL
`MermaidBlockTemplate`	`DataTemplate`	用于渲染Mermaid代码块的自定义模板

Key Events

关键事件

Event	Args	Purpose
`HyperlinkClicked`	`MarkdownHyperlinkClickedEventArgs`	Fires when user clicks a hyperlink in rendered Markdown

事件	参数	用途
`HyperlinkClicked`	`MarkdownHyperlinkClickedEventArgs`	当用户点击渲染后的Markdown中的超链接时触发

Common Use Cases

常见使用场景

In-app documentation: Bind
```
Source
```
to a URL pointing to a GitHub raw README
Release notes panel: Load a local
```
.md
```
file and assign its text to
```
Source
```
Help viewer: Render contextual Markdown help strings alongside your UI
Diagram viewer: Use
```
MermaidBlockTemplate
```
with
```
SfDiagram
```
to render flowcharts
Controlled navigation: Handle
```
HyperlinkClicked
```
to open links in an embedded browser or custom dialog

应用内文档： 将
```
Source
```
绑定到指向GitHub原始README文件的URL
发布说明面板： 加载本地
```
.md
```
文件并将其文本赋值给
```
Source
```
帮助查看器： 在UI旁渲染上下文相关的Markdown帮助字符串
图表查看器： 将
```
MermaidBlockTemplate
```
与
```
SfDiagram
```
结合使用以渲染流程图
受控导航： 处理
```
HyperlinkClicked
```
事件，在嵌入式浏览器或自定义对话框中打开链接