diff --git a/wpf/MarkdownViewer/Events.md b/wpf/MarkdownViewer/Events.md index b279f2ae95..a7f8baaacd 100644 --- a/wpf/MarkdownViewer/Events.md +++ b/wpf/MarkdownViewer/Events.md @@ -7,21 +7,26 @@ control: SfMarkdownViewer documentation: ug --- -# Event in WPF Markdown Viewer (SfMarkdownViewer) +# Events in WPF Markdown Viewer (SfMarkdownViewer) + +This section explains how to handle hyperlink interactions in the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) using the [HyperlinkClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event. + +The [HyperlinkClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_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 -The HyperlinkClicked event is triggered whenever a hyperlink in the Markdown content is clicked. This event provides access to the URL being navigated to and allows developers to cancel the default navigation behavior. -The URL link and its details are passed through the MarkdownHyperlinkClickedEventArgs. This argument provides the following details: +The [HyperlinkClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event provides details about the clicked hyperlink through the [MarkdownHyperlinkClickedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.MarkdownHyperlinkClickedEventArgs.html). -**URL** : Gets the URL of the clicked hyperlink. -**Cancel** : Gets or sets whether to cancel the default navigation behavior. +This event argument exposes the following properties: -## How to disable hyperlink navigation in Markdown viewer control +- **Url**: Gets the URL of the clicked hyperlink. +- **Cancel**: Gets or sets a value indicating whether to cancel the default navigation behavior -You can disable the hyperlink navigation in Markdown viewer control by setting the value of `Cancel` in the `MarkdownHyperlinkClickedEventArgs` parameter as true in the `HyperlinkClicked` event. -Please refer to the following example for more details. +## Disable Hyperlink Navigation +You can disable hyperlink navigation by setting the Cancel property of the [MarkdownHyperlinkClickedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.MarkdownHyperlinkClickedEventArgs.html) to true in the [HyperlinkClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event handler. + +{% tabs %} {% highlight c# %} // Wires the event handler for `HyperlinkClicked` event. @@ -34,13 +39,13 @@ private void MarkdownViewer_HyperlinkClicked(object? sender, MarkdownHyperlinkCl } {% endhighlight %} +{% endtabs %} +## Retrieve the Clicked URL -## How to retrieve the clicked URI from Markdown viewer - -You can acquire the details of the hyperlink, which is clicked in the Markdown viewer control using the arguments of `HyperlinkClicked` event. -Please refer to the following example for more details. +You can retrieve the URL of the clicked hyperlink by accessing the Url property of the event arguments. +{% tabs %} {% highlight c# %} // Wires the event handler for `HyperlinkClicked` event. @@ -53,3 +58,4 @@ private void MarkdownViewer_HyperlinkClicked(object? sender, MarkdownHyperlinkCl } {% endhighlight %} +{% endtabs %} diff --git a/wpf/MarkdownViewer/Getting-Started.md b/wpf/MarkdownViewer/Getting-Started.md index 48f8c3e44e..cf32d9f585 100644 --- a/wpf/MarkdownViewer/Getting-Started.md +++ b/wpf/MarkdownViewer/Getting-Started.md @@ -18,21 +18,35 @@ Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-depe Refer to this [documentation](https://help.syncfusion.com/wpf/installation/install-nuget-packages) to find more details about installing nuget packages in a WPF application. -## Step 1: Create a New WPF Project +## Create a New WPF Project 1. Go to **File > New > Project** and choose the **WPF App** template. 2. Name the project and choose a location. Then click **Next**. 3. Select the .NET framework version and click **Create**. -## Step 2: Install the Syncfusion® WPF MarkdownViewer NuGet Package +## Install the Syncfusion® WPF MarkdownViewer NuGet Package 1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** 2. Search for [Syncfusion.SfMarkdownViewer.Wpf](https://help.syncfusion.com/cr/wpf/Syncfusion.SfMarkdownViewer.Wpf.html) and install the latest version. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. +## Adding WPF SfMarkdownViewer via Designer + +To add the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) manually in Designer, follow these steps: + +1. Create a new WPF project in Visual Studio. +2. Add the following required nuget package to the project: + * Syncfusion.SfMarkdownViewer.WPF + * Syncfusion.Markdown + * Syncfusion.Shared.WPF + +The SfMarkdownViewer control can be added to the application by dragging it from Toolbox and dropping it in designer. + +![WPF SfMarkdownViewer](Images/wpf-markdown-viewer-designer.png) + ## Adding WPF SfMarkdownViewer via XAML -To add the `SfMarkdownViewer` manually in XAML, follow these steps: +To add the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) manually in XAML, follow these steps: 1. Create a new WPF project in Visual Studio. @@ -65,7 +79,7 @@ To add the `SfMarkdownViewer` manually in XAML, follow these steps: ## Adding WPF SfMarkdownViewer via C# -To add the `SfMarkdownViewer` manually in C#, follow these steps: +To add the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) manually in C#, follow these steps: 1. Create a new WPF project in Visual Studio. @@ -75,7 +89,7 @@ To add the `SfMarkdownViewer` manually in C#, follow these steps: * Syncfusion.Markdown * Syncfusion.Shared.WPF -3. Import the control namespace `Syncfusion.UI.Xaml.Markdown` in C#, and add the `SfMarkdownViewer` in C# page. +3. Import the control namespace `Syncfusion.UI.Xaml.Markdown` in C#, and add the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) in C# page. {% tabs %} {% highlight C# %} diff --git a/wpf/MarkdownViewer/Images/wpf-markdown-viewer-designer.png b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-designer.png new file mode 100644 index 0000000000..9b6cdaff83 Binary files /dev/null and b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-designer.png differ diff --git a/wpf/MarkdownViewer/Mermaid-Diagrams.md b/wpf/MarkdownViewer/Mermaid-Diagrams.md index c1963b7d40..a0d7199d9b 100644 --- a/wpf/MarkdownViewer/Mermaid-Diagrams.md +++ b/wpf/MarkdownViewer/Mermaid-Diagrams.md @@ -7,40 +7,48 @@ control: SfMarkdownViewer documentation: ug --- -# Mermaid Support in WPF Markdown Viewer +# Mermaid Diagram Support in WPF Markdown Viewer -The [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.SfMarkdownViewer.Wpf.html) control provides built-in support for rendering Mermaid diagrams and flowcharts within Markdown content. Mermaid is a JavaScript-based diagramming and charting tool that uses text-based definitions to create and modify diagrams dynamically. +The [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) 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. -## MermaidBlockTemplate Property +## Rendering Mermaid Diagrams -The [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_MermaidBlockTemplate) property accepts a `DataTemplate` that defines how Mermaid code blocks should be rendered. When a code block with the language identifier `mermaid` is encountered, the control uses this template instead of the default code block rendering. +The [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_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](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Diagram.SfDiagram.html) within the [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_MermaidBlockTemplate). {% tabs %} {% highlight xaml %} - - - - - - + + + + + + - - - - + + + B[MarkdownViewer Loads] B --> C{Contains Mermaid?} @@ -48,12 +56,11 @@ flowchart TD C -->|No| E[Render Plain Markdown] D --> F[Display Enhanced Output] E --> F - ]]> - - - - - + ]]> + + + + {% endhighlight %} @@ -95,4 +102,6 @@ namespace MarkdownViewerGettingStarted {% endhighlight %} {% endtabs %} +**Output:** + ![Mermaid Diagrams in WPF Markdown Viewer](Images/wpf-markdown-mermaid-block.gif)