diff --git a/wpf/MarkdownViewer/Events.md b/wpf/MarkdownViewer/Events.md index b279f2ae95..5d177d6287 100644 --- a/wpf/MarkdownViewer/Events.md +++ b/wpf/MarkdownViewer/Events.md @@ -9,7 +9,9 @@ documentation: ug # Event in WPF Markdown Viewer (SfMarkdownViewer) -## HyperlinkClicked Event +HyperlinkClicked is triggered when a Markdown link is clicked, providing the URL via MarkdownHyperlinkClickedEventArgs and allowing navigation to be canceled. + +## HyperlinkClicked 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: @@ -17,7 +19,7 @@ The URL link and its details are passed through the MarkdownHyperlinkClickedEven **URL** : Gets the URL of the clicked hyperlink. **Cancel** : Gets or sets whether to cancel the default navigation behavior. -## How to disable hyperlink navigation in Markdown viewer control +## Disable hyperlink navigation 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. @@ -35,8 +37,7 @@ private void MarkdownViewer_HyperlinkClicked(object? sender, MarkdownHyperlinkCl {% endhighlight %} - -## How to retrieve the clicked URI from Markdown viewer +## Retrieve the clicked URI 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. diff --git a/wpf/MarkdownViewer/Getting-Started.md b/wpf/MarkdownViewer/Getting-Started.md index 48f8c3e44e..71846d57a2 100644 --- a/wpf/MarkdownViewer/Getting-Started.md +++ b/wpf/MarkdownViewer/Getting-Started.md @@ -18,18 +18,30 @@ 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` 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 + +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. + +![WPF SfMarkdownViewer](Images/wpf-markdown-viewer-designer.png) + ## Adding WPF SfMarkdownViewer via XAML To add the `SfMarkdownViewer` manually in XAML, follow these steps: 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..52d8535d83 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..3529f02b50 100644 --- a/wpf/MarkdownViewer/Mermaid-Diagrams.md +++ b/wpf/MarkdownViewer/Mermaid-Diagrams.md @@ -7,7 +7,7 @@ control: SfMarkdownViewer documentation: ug --- -# Mermaid Support in WPF Markdown Viewer +# Mermaid Diagram Support 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. @@ -18,29 +18,29 @@ The [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml {% tabs %} {% highlight xaml %} - - - - - - + + + + + + - - - - + + + B[MarkdownViewer Loads] B --> C{Contains Mermaid?} @@ -48,12 +48,11 @@ flowchart TD C -->|No| E[Render Plain Markdown] D --> F[Display Enhanced Output] E --> F - ]]> - - - - - + ]]> + + + + {% endhighlight %}