Task(1023601):Need to correct the Mark down Viewer UG document content for WPF platform.#2209
Task(1023601):Need to correct the Mark down Viewer UG document content for WPF platform.#2209Tamilselvan-spartan wants to merge 16 commits into
Conversation
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
Tamilselvan-spartan
changed the title
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
…-content/wpf-docs into MarkdownViewer-content-change
…ncfusion-content/wpf-docs into MarkdownViewer-content-change
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
|
||
| The SfMarkdownViewer control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assemblies will be added automatically. | ||
|
|
||
|  |
There was a problem hiding this comment.
@Tamilselvan-spartan Change the image as we discussed.
|
|
||
| # Event in WPF Markdown Viewer (SfMarkdownViewer) | ||
|
|
||
| ## HyperlinkClicked Event |
There was a problem hiding this comment.
Events in WPF Markdown Viewer (SfMarkdownViewer)
This section explains how to handle hyperlink interactions in the SfMarkdownViewer using the HyperlinkClicked event.
The HyperlinkClicked event is triggered when a hyperlink in the Markdown content is clicked. It provides access to the clicked URL and allows you to control or cancel the default navigation behavior.
| ## HyperlinkClicked Event | ||
| HyperlinkClicked is triggered when a Markdown link is clicked, providing the URL via MarkdownHyperlinkClickedEventArgs and allowing navigation to be canceled. | ||
|
|
||
| ## HyperlinkClicked |
There was a problem hiding this comment.
HyperlinkClicked Event
The HyperlinkClicked event provides details about the clicked hyperlink through the MarkdownHyperlinkClickedEventArgs.
This event argument exposes the following properties:
- Url – Gets the URL of the clicked hyperlink
- Cancel – Gets or sets a value indicating whether to cancel the default navigation behavior
| **Cancel** : Gets or sets whether to cancel the default navigation behavior. | ||
|
|
||
| ## How to disable hyperlink navigation in Markdown viewer control | ||
| ## Disable hyperlink navigation |
There was a problem hiding this comment.
Disable Hyperlink Navigation
You can disable hyperlink navigation by setting the Cancel property of the MarkdownHyperlinkClickedEventArgs to true in the HyperlinkClicked event handler.
|
|
||
|
|
||
| ## How to retrieve the clicked URI from Markdown viewer | ||
| ## Retrieve the clicked URI |
There was a problem hiding this comment.
Retrieve the Clicked URL
You can retrieve the URL of the clicked hyperlink by accessing the Url property of the event arguments.
| --- | ||
|
|
||
| # Mermaid Support in WPF Markdown Viewer | ||
| # Mermaid Diagram Support |
There was a problem hiding this comment.
Mermaid Diagram Support in WPF Markdown Viewer
The SfMarkdownViewer control provides built-in support for rendering Mermaid diagrams and flowcharts within Markdown content.
Mermaid is a text-based diagramming tool that allows you to define diagrams using simple syntax. The viewer parses Mermaid code blocks and renders them as visual diagrams directly within the Markdown content.
There was a problem hiding this comment.
Rendering Mermaid Diagrams
The MermaidBlockTemplate property allows you to define how Mermaid code blocks are rendered. It accepts a DataTemplate that replaces the default rendering for code blocks with the mermaid language identifier.
When a Markdown code block marked as mermaid is encountered, the specified template is used to render the diagram.
Example:
The following example demonstrates how to render Mermaid flowcharts using SfDiagram within the MermaidBlockTemplate.
|
|
||
| # Mermaid Flowchart | ||
|
|
||
| Mermaid flowcharts let you describe processes and decision trees in plain text, and the viewer renders them into clear, interactive diagrams. This makes it simple to illustrate workflows, logic paths, or system flows directly inside Markdown without external tools. |
There was a problem hiding this comment.
Mermaid Flowchart
Mermaid flowcharts let you describe processes and decision trees in plain text. The viewer renders them into clear, interactive diagrams.
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
3 participants
Markdown Viewer UG Documentation Description
The WPF Markdown Viewer is a UI control that converts Markdown input into a fully formatted visual representation without requiring external rendering engines or manual formatting. It provides a flexible way to display rich Markdown content within WPF applications, making it ideal for presenting documentation, release notes, help content, and other Markdown‑based information, and for the user to understand the control and how to implement the markdown viewer control in the application.
AI Usage
Code Studio used in this PR?
Yes
No
Purpose
To provide a UI control that converts Markdown input into a fully formatted visual display within WPF applications.
To enable clear presentation of documentation, release notes, help content, and other Markdown‑based information without external rendering engines.
To help users easily understand and effectively use the Markdown Viewer control through rich, structured content display.
Key Features
Markdown rendering – Converts Markdown syntax such as headings, lists, links, images, tables, code blocks, block quotes, and more into styled, readable content.
Multiple content sources – Supports loading Markdown from a string, file, or URL.
Hyperlink navigation – Supports clickable links that open external URLs or trigger in-app navigation.
Is this a breaking change?
No
Task
https://dev.azure.com/EssentialStudio/Mobile%20and%20Desktop/_workitems/edit/1023601