Create Markdown document in WPF

14 Aug 20265 minutes to read

Syncfusion® Essential® Markdown is a .NET Markdown library used to create, read, and edit Markdown documents programmatically without external dependencies. Using this library, you can Create a Markdown document in WPF.

Steps to Create Markdown document programmatically in WPF:

Prerequisites

  • Visual Studio 2022 (version 17.8 or later, required for .NET 8 support).
  • Install .NET desktop development workload with .NET Framework 4.6.2 or later SDK.

Step 1: Create a new WPF application project.

Create WPF application in Visual Studio

Step 2: Install the Syncfusion.Markdown NuGet package as a reference to your WPF application from NuGet.org.

Install Syncfusion.Markdown NuGet package

NOTE

Starting with v34.x.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your projects. Please refer to this link to know about registering Syncfusion® license key in your application to use our components.

Step 3: Include the following namespaces in the MainWindow.xaml.cs file.

using Syncfusion.Office.Markdown;

Step 4: Add a new button in MainWindow.xaml to create a Markdown document as follows.

<Button Click="btnCreate_Click" Margin="0,0,10,12" VerticalAlignment="Bottom" Height="30" BorderBrush="LightBlue" HorizontalAlignment="Right" Width="180">
    <Button.Background>
        <LinearGradientBrush EndPoint="0.5,-0.04" StartPoint="0.5,1.04">
            <GradientStop Color="#FFD9E9F7" Offset="0"/>
            <GradientStop Color="#FFEFF8FF" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
    <StackPanel Orientation="Horizontal" Height="23" Margin="0,0,0,-2.52" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100">
        <Image Name="image2" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="Create Document" Height="15.96" Width="126" Margin="0,4,0,3" />
    </StackPanel>
</Button>

Step 5: Add the following code in the btnCreate_Click event handler to create a Markdown document with simple text.

// Creates a new instance of MarkdownDocument.
MarkdownDocument markdownDocument = new MarkdownDocument();
// Adds a heading to the Markdown document.
MdParagraph mdHeadingParagraph = markdownDocument.AddParagraph();
// Applies the Heading 1 style to the paragraph.
mdHeadingParagraph.ApplyParagraphStyle("Heading 1");
MdTextRange mdHeadingTextRange = mdHeadingParagraph.AddTextRange();
mdHeadingTextRange.Text = "Adventure Works Cycles";
// Adds a paragraph to the Markdown document.
MdParagraph mdParagraph = markdownDocument.AddParagraph();
MdTextRange mdTextRange = mdParagraph.AddTextRange();
mdTextRange.Text = "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.";
// Adds the first list item.
MdParagraph item1 = markdownDocument.AddParagraph();
item1.ListFormat = new MdListFormat();
item1.ListFormat.IsNumbered = false;
item1.ListFormat.ListLevel = 0;
item1.ListFormat.ListValue = "- ";
item1.AddTextRange().Text = "First item";
// Adds the second list item.
MdParagraph item2 = markdownDocument.AddParagraph();
item2.ListFormat = new MdListFormat();
item2.ListFormat.IsNumbered = false;
item2.ListFormat.ListLevel = 0;
item2.ListFormat.ListValue = "- ";
item2.AddTextRange().Text = "Second item";
// Adds the third list item.
MdParagraph item3 = markdownDocument.AddParagraph();
item3.ListFormat = new MdListFormat();
item3.ListFormat.IsNumbered = false;
item3.ListFormat.ListLevel = 0;
item3.ListFormat.ListValue = "- ";
item3.AddTextRange().Text = "Third item";
// Adds a table to the Markdown document.
MdTable table = markdownDocument.AddTable();
table.ColumnAlignments.Add(MdColumnAlignment.Left);
table.ColumnAlignments.Add(MdColumnAlignment.Left);
// Adds the header row.
MdTableRow headerRow = table.AddTableRow();
MdTableCell header1 = headerRow.AddTableCell();
header1.Items.Add(new MdTextRange { Text = "Profile picture" });
MdTableCell header2 = headerRow.AddTableCell();
header2.Items.Add(new MdTextRange { Text = "Description" });

// Adds a data row.
MdTableRow dataRow = table.AddTableRow();
MdTableCell cell1 = dataRow.AddTableCell();
MdPicture picture = new MdPicture();
picture.Url = "Data\\photo.jpg";
picture.AltText = "Profile picture";
cell1.Items.Add(picture);
MdTableCell cell2 = dataRow.AddTableCell();
cell2.Items.Add(new MdTextRange { Text = "AdventureWorks Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company." });
// Saves the Markdown document
markdownDocument.Save("Output/Sample.md");
// Disposes the document
markdownDocument.Dispose();

NOTE

The code sample references an image file (photo.jpg). Download this asset from the GitHub sample Data folder and place it in the application’s Data folder so the MdPicture.Url value ("Data/photo.jpg") resolves correctly at runtime.

Step 6: Build the project.

Click on Build → Build Solution or press Ctrl+Shift+B to build the project.

Step 7: Run the project.

Click the Start button (green arrow) or press F5 to run the application.

You can download a complete working sample from GitHub.

By executing the program, you will get the Markdown document as follows.

WPF output Markdown document

Looking for the full .NET Markdown Library overview, features, pricing, and documentation? Visit the .NET Markdown Library page.

An online sample link to create a Markdown document in ASP.NET Core.