How to use

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
  • Use Binding
  • Use Code-behind
  • Load .md from Resource

• MarkdownXamlConverter

MarkdownScrollViewer

Write markdown in Xaml

MarkdownScrollViewer's Content accept indented markdown. indent-processing-rule is similar to flexible_heredoc_nowdoc_syntaxes in PHP7.3: the indentation of the closing tag dictates the amount of whitespace to strip from each line.

sample project

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 Binding

If you want to change the content dinamically ( for example view help text for user selected content), I suggest to use binding.

MarkdownScrollViewer has Markdown property to use binding.

sample project

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:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        xmlns:local="clr-namespace:render_example_binding"
        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; }
    }
}

Use Code-behind

sample project

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:mdxam="clr-namespace:MdXaml;assembly=MdXaml"
        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");
        }
    }
}

Load md from Resource

When Source property is changed, MarkdownScrollViewer loads markdown from set url. Source property accepts pack://, http://, https://, and file:// scheme.

Source property changing causes AssetPathRoot property changing for loading relative path of the image

sample project

YourProject.csproj

<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
  ...
  <ItemGroup>
    <Resource Include="Assets\Main.md" />
    <Resource Include="Assets\Sub.md" />
    <Resource Include="Assets\img\Image.png" />
  </ItemGroup>
</Project>

Main.md

# Main

[Link to Sub.md](Sub.md)
![im](img/Image.png)

MainWindow.xaml

<Window x:Class="render_example_resource.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
            ClickAction="DisplayAll"
            Source="Assets/Main.md"/>
</Window>

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>