Render markdown in Control

MdXaml provide MarkdownScrollViewer which is the control to view markdown from string. If you want flowdocument which is converted from markdown, use MarkdownXamlConverter.

MarkdownScrollViewer

Write markdown in Xaml

You can download the example from here.
In a xaml you can write markdown with indent. MarkdownScrollView is remove indent automatically and view as FlowDocument.

MainWindow.xaml

<Window x:Class="HeredocSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        Title="MainWindow" Height="450" Width="800">

	<mdxam:MarkdownScrollViewer xml:space="preserve">
		# sample title
		* document1
			* two
			* three
		* document2
	</mdxam:MarkdownScrollViewer>
</Window>

Use Code-behind

You can download the full-example from here.

MainWindow.xaml

<Window x:Class="render_example_codebehind.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        xmlns:local="clr-namespace:render_example_codebehind"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <mdxam:MarkdownScrollViewer x:Name="Markdownview"/>
</Window>

MainWindow.xaml.cs

using System.IO;
using System.Windows;

namespace render_example_codebehind
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ReadMarkdownAndSetViewer();
        }


        private void ReadMarkdownAndSetViewer()
        {
            Markdownview.Markdown = File.ReadAllText("SampleMarkdown.md");
        }
    }
}

Use Binding

You can download the full-example from here

MainWindow.xaml

<Window x:Class="render_example_binding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        xmlns:local="clr-namespace:render_example_binding"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>

    <mdxam:MarkdownScrollViewer
            Markdown="{Binding MarkdownDoc}"/>
</Window>

MainWindowViewModel.cs

using System.IO;

namespace render_example_binding
{
    class MainWindowViewModel
    {

        public MainWindowViewModel()
        {
            MarkdownDoc = File.ReadAllText("SampleMarkdown.md");
        }

        public string MarkdownDoc { get; }
    }
}

MarkdownXamlConverter

If you want only FlowDocument object but don’t want visual element, you can use MarkdownXamlConverter.

<UserControl x:Class="MdXamlSample.SampleControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        xmlns:local="clr-namespace:MdXamlSample">

    <UserControl.Resources>
        <mdxam:TextToFlowDocumentConverter x:Key="MdConverter"/>
    </UserControl.Resources>

    <UserControl.DataContext>
        <local:SampleControlViewModel/>
    </UserControl.DataContext>

    <FlowDocumentScrollViewer 
            Markdown="{Binding 
                Path=MarkdownDoc, 
                Converter={StaticResource MdConverter}
            }"
            />

</UserControl>

change render style

You can change a markdown style with MarkdownScrollViewer.MarkdownStyle or with Markdown.DocumentStyle

with MarkdownScrollViewer.MarkdownStyle

    <mdxam:MarkdownScrollViewer
            MarkdownStyle="{Binding HugaStyleProperty}"
            Markdown="{Binding MarkdownDoc}"
            />

with Markdown.DocumentStyle

    <UserControl.Resources>

        <mdxam:Markdown
                x:Key="MdEngine"
                DocumentStyle="{Binding HugaStyleProperty}"
                />

        <mdxam:TextToFlowDocumentConverter
                x:Key="MdConverter"
                Markdown="{StaticResource MdEngine}"
                />

    </UserControl.Resources>