Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions winui/MarkdownViewer/Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,24 @@ documentation: ug

# Customization in WinUI Markdown Viewer

The `SfMarkdownViewer` control in WinUI provides a flexible styling system through its `Settings` property. This allows developers to customize the appearance of Markdown elements such as headings, paragraphs, lists, and more to match application themes and branding.
The [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control in WinUI provides a flexible styling system through its [Settings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Settings) property. This allows developers to customize the appearance of Markdown elements such as headings, paragraphs, lists, and more to match application themes and branding.

## Style settings for MarkdownViewer

The `MarkdownStyleSettings` class provides style customization for different Markdown elements through the following properties:
The [MarkdownStyleSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html) class provides style customization for different Markdown elements through the following properties:

- `ParagraphStyle` – Defines the style for paragraph text.
- `H1Style` to `H6Style` – Defines styles for heading levels.
- `ListStyle` – Applies to ordered and unordered lists.
- `TableStyle` – Applies to tables, including headers and rows.
- `BlockQuoteStyle` – Used for block-level quotes.
- `InlineQuoteStyle` – Used for inline quoted text.
- `ThematicStyle` – Used for horizontal rules.
- `LinkStyle` – Defines hyperlink appearance.
- `CodeBlockStyle` – Applies to code blocks.
- `MermaidStyle` – Applies to Mermaid diagram rendering.
- [ParagraphStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_ParagraphStyle) – Defines the style for paragraph text.
- [H1Style](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_H1Style) to [H6Style](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_H6Style) – Defines styles for heading levels.
- [ListStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_ListStyle) – Applies to ordered and unordered lists.
- [TableStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_TableStyle) – Applies to tables, including headers and rows.
- [BlockQuoteStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_BlockQuoteStyle) – Used for block-level quotes.
- [InlineQuoteStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_InlineQuoteStyle) – Used for inline quoted text.
- [ThematicStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_ThematicStyle) – Used for horizontal rules.
- [LinkStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_LinkStyle) – Defines hyperlink appearance.
- [CodeBlockStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_CodeBlockStyle) – Applies to code blocks.
- [MermaidStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html#Syncfusion_UI_Xaml_Markdown_MarkdownStyleSettings_MermaidStyle) – Applies to Mermaid diagram rendering.

You can apply these custom styles by assigning a `MarkdownStyleSettings` instance to the `Settings` property of `SfMarkdownViewer`, as shown in the following code example.
You can apply these custom styles by assigning a [MarkdownStyleSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownStyleSettings.html) instance to the [Settings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Settings) property of [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html), as shown in the following code example.

{% tabs %}
{% highlight xaml %}
Expand Down
8 changes: 4 additions & 4 deletions winui/MarkdownViewer/Events.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ documentation: ug

# Event in WinUI Markdown Viewer (SfMarkdownViewer)

This section describes how to manage hyperlink interactions in the SfMarkdownViewer using the HyperlinkClicked event.
The HyperlinkClicked event is raised when a user clicks a hyperlink within the Markdown content. It provides access to the selected URL and enables you to handle the interaction or override the default navigation behavior if needed.
This section describes how to manage hyperlink interactions in the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) using the [HyperlinkClicked](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event.
The [HyperlinkClicked](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event is raised when a user clicks a hyperlink within the Markdown content. It provides access to the selected URL and enables you to handle the interaction or override the default navigation behavior if needed.

## HyperlinkClicked Event

The HyperlinkClicked event supplies information about the selected hyperlink through the MarkdownHyperlinkClickedEventArgs class.
The [HyperlinkClicked](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event supplies information about the selected hyperlink through the [MarkdownHyperlinkClickedEventArgs](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownHyperlinkClickedEventArgs.html) class.

This event argument includes the following properties:

Expand All @@ -23,7 +23,7 @@ This event argument includes the following properties:

## Disable hyperlink navigation

You can prevent hyperlink navigation by setting the Cancel property of the MarkdownHyperlinkClickedEventArgs to true within the HyperlinkClicked event handler.
You can prevent hyperlink navigation by setting the Cancel property of the [MarkdownHyperlinkClickedEventArgs](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.MarkdownHyperlinkClickedEventArgs.html) to true within the [HyperlinkClicked](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_HyperlinkClicked) event handler.

{% highlight c# %}

Expand Down
8 changes: 4 additions & 4 deletions winui/MarkdownViewer/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ keywords: WinUI markdownviewer, syncfusion markdownviewer WinUI, markdown viewer

# Getting Started with WinUI Markdown Viewer (SfMarkdownViewer)

This section outlines a step‑by‑step guide for integrating and using the `SfMarkdownViewer` control in your WinUI applications.
This section outlines a step‑by‑step guide for integrating and using the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control in your WinUI applications.

## Creating an application with SfMarkdownViewer (WinUI)

Expand All @@ -20,9 +20,9 @@ This section outlines a step‑by‑step guide for integrating and using the `Sf
- Syncfusion.MarkdownViewer.WinUI

3. Import the following namespace in XAML or C# code:
- Syncfusion.UI.Xaml.Markdown
- `Syncfusion.UI.Xaml.Markdown`

4. Initialize an instance of the `SfMarkdownViewer` control.
4. Initialize an instance of the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control.

You can initialize the control in both XAML and C# as shown below:

Expand Down Expand Up @@ -66,7 +66,7 @@ namespace MarkdownViewerGettingStarted

## Populating Source to the SfMarkdownViewer

The `Source` property is used to supply Markdown content to the control. It supports raw Markdown text, file paths, and HTTP/HTTPS URLs.
The [Source](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Source) property is used to supply Markdown content to the control. It supports raw Markdown text, file paths, and HTTP/HTTPS URLs.

{% tabs %}
{% highlight xaml %}
Expand Down
8 changes: 4 additions & 4 deletions winui/MarkdownViewer/Loading-Content.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

# Loading Markdown Content in WinUI Markdown Viewer

The SfMarkdownViewer control offers versatile options for loading Markdown content from various sources. Its `Source` property automatically identifies the input type and manages content loading seamlessly, supporting raw Markdown text, local file paths, as well as HTTP/HTTPS URLs.
The [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control offers versatile options for loading Markdown content from various sources. Its [Source](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Source) property automatically identifies the input type and manages content loading seamlessly, supporting raw Markdown text, local file paths, as well as HTTP/HTTPS URLs.

## Loading from Raw Markdown String

Assign a Markdown-formatted string to the Source property of the SfMarkdownViewer control to display Markdown content directly within your application.
Assign a Markdown-formatted string to the Source property of the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control to display Markdown content directly within your application.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -85,7 +85,7 @@ Used to define major sections within your Markdown content.

## Loading from Local File

To load Markdown content from a local file, simply set the file path as the value of the Source property. The control automatically recognizes valid file paths and reads the file content accordingly.
To load Markdown content from a local file, simply set the file path as the value of the [Source](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Source) property. The control automatically recognizes valid file paths and reads the file content accordingly.

**C#**

Expand All @@ -108,7 +108,7 @@ public partial class MainWindow : Window

## Loading from URL

The SfMarkdownViewer control is capable of loading Markdown content directly from publicly accessible URLs. This feature is especially useful for presenting remote documentation, release notes, or any Markdown content hosted online.
The [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control is capable of loading Markdown content directly from publicly accessible URLs. This feature is especially useful for presenting remote documentation, release notes, or any Markdown content hosted online.

{% tabs %}
{% highlight xaml %}
Expand Down
4 changes: 2 additions & 2 deletions winui/MarkdownViewer/Mermaid-Diagrams.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: ug

# Mermaid Diagram Support in WinUI Markdown Viewer

The `SfMarkdownViewer` control supports embedding Mermaid diagrams directly in Markdown content using simple text syntax. Mermaid code blocks defined in the `Source` property are automatically interpreted and rendered as visual diagrams.
The [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control supports embedding Mermaid diagrams directly in Markdown content using simple text syntax. Mermaid code blocks defined in the [Source](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Source) property are automatically interpreted and rendered as visual diagrams.

## Rendering Mermaid Diagrams

Mermaid diagrams are created using fenced code blocks marked with the `mermaid` language inside Markdown content. When the viewer encounters these blocks, it converts the diagram definition into a graphical representation.

The following XAML and C# examples demonstrate how to assign Markdown content containing Mermaid syntax to the `SfMarkdownViewer` control using the `Source` property
The following XAML and C# examples demonstrate how to assign Markdown content containing Mermaid syntax to the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control using the [Source](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_Source) property

{% tabs %}
{% highlight xaml %}
Expand Down
4 changes: 2 additions & 2 deletions winui/MarkdownViewer/Overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Overview of WinUI Markdown Viewer

The WinUI MarkdownViewer control is a UI component that renders Markdown text as visually formatted content without requiring external tools or manual styling. It provides a convenient way to display rich Markdown content within WinUI applications, making it ideal for scenarios such as documentation, release notes, help content, and more.
The WinUI [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control is a UI component that renders Markdown text as visually formatted content without requiring external tools or manual styling. It provides a convenient way to display rich Markdown content within WinUI applications, making it ideal for scenarios such as documentation, release notes, help content, and more.

## Key Features

Expand All @@ -21,6 +21,6 @@ The WinUI MarkdownViewer control is a UI component that renders Markdown text as

- **Content customization** – Provides styling options to customize fonts, colors, and text appearance.

The following image shows the rendered output of Markdown content in the `SfMarkdownViewer` control:
The following image shows the rendered output of Markdown content in the [SfMarkdownViewer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control:

![SfMarkdownViewer Overview](Images/WinUI-markdown-viewer-overview.WEBP)