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

wpf/MarkdownViewer/Events.md

@@ -9,15 +9,17 @@ 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:
 
 **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.

wpf/MarkdownViewer/Getting-Started.md

@@ -18,18 +18,32 @@ 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` 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:

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,42 +18,41 @@ The [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
 {% 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
+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 %}
 

wpf/MarkdownViewer/Overview.md

@@ -11,6 +11,8 @@ documentation: ug
 
 The [WPF Markdown Viewer](https://www.syncfusion.com/wpf-controls) 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.
 
+![Syncfusion WPF Markdown Viewer](Images/wpf-markdown-viewer-img-overview.png)
+
 ## Key Features
 
 * **Markdown rendering** – Converts Markdown syntax such as headings, lists, links, images, tables, code blocks, block quotes, and more into styled, readable content.