Class SfMarkdownViewer

A .NET MAUI control for rendering and displaying Markdown content with support for CSS-based styling, interactive hyperlinks, and Mermaid diagram visualization. The control offers fine-grained style customization through MarkdownStyleSettings, enabling precise control over the appearance of headings, body text, tables, and other markdown elements.

Inheritance

System.Object

SfView

SfMarkdownViewer

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.ArrangeContent(Rect)

SfView.ArrangeOverride(Rect)

SfView.Children

SfView.ClipToBounds

SfView.GetSemanticsNodesCore(Double, Double)

SfView.IDrawableLayout.DrawingOrder

SfView.IDrawableLayout.InvalidateDrawable()

SfView.MeasureOverride(Double, Double)

SfView.OnDraw(ICanvas, RectF)

SfView.OnHandlerChanged()

SfView.Padding

SfView.PaddingProperty

Namespace: Syncfusion.Maui.MarkdownViewer

Assembly: Syncfusion.Maui.MarkdownViewer.dll

Syntax

public class SfMarkdownViewer : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider

    <sync:SfMarkdownViewer Source="# Hello World">
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings 
                H1FontSize="32px"
                H1Color="#2C3E50"
                H2FontSize="24px"
                H2Color="#34495E"
                H3FontSize="18px"
                H3Color="#7F8C8D"
                BodyTextColor="#2C3E50"
                BodyFontSize="14px"
                TableHeaderFontSize="18px"
                TableHeaderTextColor="#2C3E50"
                TableDataFontSize="18px"
                TableDataTextColor="#2C3E50"
                TableBackground="#F8F9FA"
                CssStyleRules="body { line-height: 1.6; margin: 16px; }" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Source = "# Hello World";

    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H1FontSize = "32px",
        H1Color = "#2C3E50",
        H2FontSize = "24px",
        H2Color = "#34495E",
        H3FontSize = "18px",
        H3Color = "#7F8C8D",
        BodyTextColor = "#2C3E50",
        BodyFontSize = "14px",
        TableHeaderFontSize = "18px",
        TableHeaderTextColor = "#2C3E50",
        TableDataFontSize = "18px",
        TableDataTextColor = "#2C3E50",
        TableBackground = "#F8F9FA",
        CssStyleRules = "body { line-height: 1.6; margin: 16px; }"
    };

Constructors

SfMarkdownViewer()

Initializes a new instance of the SfMarkdownViewer class.

Declaration

public SfMarkdownViewer()

Fields

EnableAutoHeightProperty

Identifies the EnableAutoHeight bindable property.

Declaration

public static readonly BindableProperty EnableAutoHeightProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The EnableAutoHeight property determines whether the control automatically adjusts its height based on the rendered content. When enabled, the control measures the actual rendered height and updates itself accordingly.

IsStreamingEnabledProperty

Identifies the IsStreamingEnabled bindable property.

Declaration

public static readonly BindableProperty IsStreamingEnabledProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

When enabled, the control appends only new content to the existing DOM instead of performing a full HTML reload on every Source change. This enables smooth word-by-word rendering suitable for AI streaming responses.

SettingsProperty

Identifies the Settings bindable property.

Declaration

public static readonly BindableProperty SettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Settings property defines the markdown style settings to customize the appearance of markdown elements.

SourceProperty

Identifies the Source bindable property.

Declaration

public static readonly BindableProperty SourceProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Source property defines the the markdown content to be rendered.

Properties

EnableAutoHeight

Gets or sets a value indicating whether the control should automatically adjust its height based on the rendered content.

Declaration

public bool EnableAutoHeight { get; set; }

Property Value

Type
System.Boolean

IsStreamingEnabled

Gets or sets a value indicating whether content is rendered incrementally (word by word) as the Source property grows, instead of performing a full reload on every change. Ideal for AI streaming responses where Source is continuously appended.

Declaration

public bool IsStreamingEnabled { get; set; }

Property Value

Type
System.Boolean

Settings

Gets or sets the markdown style settings to customize the appearance of markdown elements.

Declaration

public MarkdownStyleSettings Settings { get; set; }

Property Value

Type	Description
MarkdownStyleSettings	This property takes Settings instance as value.

Examples

Xaml
C#

    <sync:SfMarkdownViewer Source="# Hello World">
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings 
                H1FontSize="32px"
                H1Color="#2C3E50"
                H2FontSize="24px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Source = "# Hello World";

    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H1FontSize = "32px",
        H1Color="#2C3E50",
        H2FontSize="24px",
    };

Source

Gets or sets the markdown content to be rendered.

Declaration

public string Source { get; set; }

Property Value

Type	Description
System.String	This property accepts a System.String value which can be: Direct markdown content as a string (e.g., "# Hello World") A URL pointing to a markdown file (e.g., "https://example.com/readme.md") A local file path to a markdown file (e.g., "file:///storage/emulated/0/docs/readme.md") The content will be fetched and rendered accordingly.

Examples

Xaml
C#

    <sync:SfMarkdownViewer Source="# Hello World"/>
    (or)
    <sync:SfMarkdownViewer Source="https://example.com/readme.md" />
    (or)
    <sync:SfMarkdownViewer Source="file:///storage/emulated/0/docs/readme.md" />

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Source = "# Hello World";
    (or)
    markdownViewer.Source = "https://example.com/readme.md";
    (or)
    markdownViewer.Source = "file:///storage/emulated/0/docs/readme.md";

Methods

Finalize()

Finalizer that unhooks the event to prevent memory leaks.

Declaration

protected override void Finalize()

GetHtmlText()

Gets the current markdown content converted to HTML.

Declaration

public string GetHtmlText()

Returns

Type	Description
System.String	The HTML representation of the markdown content including images

GetMarkdownText()

Gets the current markdown content as plain text.

Declaration

public string GetMarkdownText()

Returns

Type	Description
System.String	The markdown text content

GetText()

Gets the current markdown content as plain text without markdown formatting.

Declaration

public string GetText()

Returns

Type	Description
System.String	Plain text without markdown formatting (e.g., without #, ##, ###, etc.)

MeasureContent(Double, Double)

Measures the content of the control based on the provided width and height constraints.

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	The width constraint for measuring the content
System.Double	heightConstraint	The height constraint for measuring the content

Returns

Type	Description
Microsoft.Maui.Graphics.Size	The size of the content

Overrides

SfView.MeasureContent(Double, Double)

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

Overrides

SfView.OnBindingContextChanged()

OnParentSet()

Declaration

protected override void OnParentSet()

Events

HyperlinkClicked

Occurs when a hyperlink is clicked in the Markdown content

Declaration

public event EventHandler<MarkdownHyperlinkClickedEventArgs> HyperlinkClicked

Event Type

Type
System.EventHandler<MarkdownHyperlinkClickedEventArgs>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement