Task(1023601):Need to correct the Mark down Viewer UG document content for WPF platform.

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 %}

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<sup>&reg;</sup> WPF MarkdownViewer NuGet Package
+## Install the Syncfusion<sup>&reg;</sup> 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# %}

wpf/MarkdownViewer/Mermaid-Diagrams.md

@@ -7,53 +7,60 @@ 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 %}
 
-    <Grid>
-        <syncfusion:SfMarkdownViewer>
-            <syncfusion:SfMarkdownViewer.MermaidBlockTemplate>
-                <DataTemplate x:Key="MermaidBlockTemplate">
-                    <diagram:SfDiagram x:Name="mermaidDiagram" Foreground="Black"
-                                 Height="600" Width="1000" Focusable="False"
-                                 HorizontalAlignment="Left" 
-                                 HorizontalContentAlignment="Left"
-                                 Loaded="mermaidDiagram_Loaded">
-                    </diagram:SfDiagram>
+<Grid>
+    <syncfusion:SfMarkdownViewer>
+        <syncfusion:SfMarkdownViewer.MermaidBlockTemplate>
+            <DataTemplate x:Key="MermaidBlockTemplate">
+                <diagram:SfDiagram x:Name="mermaidDiagram" Foreground="Black"
+                    Height="600" Width="1000" Focusable="False"
+                    HorizontalAlignment="Left" 
+                    HorizontalContentAlignment="Left"
+                    Loaded="mermaidDiagram_Loaded">
+                </diagram:SfDiagram>
             </DataTemplate>
-            </syncfusion:SfMarkdownViewer.MermaidBlockTemplate>
-            <syncfusion:SfMarkdownViewer.Source>
-                <system:String xml:space="preserve">
-                    <![CDATA[
+        </syncfusion:SfMarkdownViewer.MermaidBlockTemplate>
+        <syncfusion:SfMarkdownViewer.Source>
+            <system:String xml:space="preserve">
+                <![CDATA[
 
 # 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.  
+Mermaid flowcharts let you describe processes and decision trees in plain text. The viewer renders them into clear, interactive diagrams. 
 
 ---
 
-```mermaid
+```mermaid  
 flowchart TD
     A[User Opens App] --> B[MarkdownViewer Loads]
     B --> C{Contains Mermaid?}
     C -->|Yes| D[Render Diagram]
     C -->|No| E[Render Plain Markdown]
     D --> F[Display Enhanced Output]
     E --> F
-            ]]>
-                </system:String>
-            </syncfusion:SfMarkdownViewer.Source>
-        </syncfusion:SfMarkdownViewer>
-
-    </Grid>
+                ]]>
+            </system:String>
+        </syncfusion:SfMarkdownViewer.Source>
+    </syncfusion:SfMarkdownViewer>
+</Grid>
 
 {% endhighlight %}
 
@@ -95,4 +102,6 @@ namespace MarkdownViewerGettingStarted
 {% endhighlight %}
 {% endtabs %}
 
+**Output:**
+
 ![Mermaid Diagrams in WPF Markdown Viewer](Images/wpf-markdown-mermaid-block.gif)