Create Markdown document in WinUI

14 Aug 202614 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 WinUI.

Prerequisites:

  • Visual Studio 2022 version 17.x or later with the .NET desktop development and Universal Windows Platform development workloads installed.

NOTE

The samples in this topic target Windows App SDK 1.x on Windows 10, version 1809 or later.

WinUI Desktop app

Step 1: Create a new C# WinUI Desktop app. Select Blank App, Packaged (WinUI 3 in Desktop) from the template and click Next.

Create the WinUI Desktop app in Visual Studio

Step 2: Enter the project name and click Create.

Create a project name for your new project

Step 3: Set the Target version to Windows 10, version 2004 (build 19041) and the Minimum version to Windows 10, version 1809 (build 17763) and then click OK.

Set the target version

Step 4: Install the Syncfusion.Markdown NuGet package as a reference to your project from the NuGet.org.

Install the Syncfusion.Markdown NuGet package

NOTE

Starting with v34.x.x, if you reference Syncfusion® assemblies from the trial setup or from the NuGet feed, you must add a reference to the Syncfusion.Licensing assembly and include a valid license key in your application.

Install the Syncfusion.Licensing NuGet package and register the license key during application startup.

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

For more information about generating and registering a license key, refer to the Syncfusion® licensing documentation.

Step 5: Add a new button to the MainWindow.xaml as shown below.

<Window
    x:Class="Create_Markdown_document.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Create_Markdown_document"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="button" Click="CreateDocument">Create Document</Button>
    </StackPanel>
</Window>

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

using Syncfusion.Office.Markdown;
using System.IO;

Step 7: Add a new action method CreateDocument in the MainWindow.xaml.cs file and include the following code snippet to create a Markdown document.

// 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 = "Assets\\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 to MemoryStream
MemoryStream stream = new MemoryStream();
markdownDocument.Save(stream);
stream.Position = 0;
// Disposes the document.
markdownDocument.Dispose();
//Saves and launch the file.
SaveHelper.SaveAndLaunch("Sample.md", stream);

You can download a complete working sample from GitHub.

NOTE

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

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

WinUI Desktop output Markdown document

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

WinUI UWP app

Step 1: Create a new C# WinUI UWP app. Select Blank App (WinUI 3 in UWP) from the template and click Next.

Create the WinUI UWP app in Visual Studio

Step 2: Enter the project name and click Create.

Create a project name for your new project

Step 3: Set the Target version to Windows 10, version 2004 (build 19041) and the Minimum version to Windows 10, version 1809 (build 17763) and then click OK.

Set the target version

Step 4: Install the Syncfusion.Markdown NuGet package as a reference to your project from the NuGet.org.

Install the Syncfusion.Markdown NuGet package

NOTE

Starting with v34.x.x, if you reference Syncfusion® assemblies from the trial setup or from the NuGet feed, you must add a reference to the Syncfusion.Licensing assembly and include a valid license key in your application.

Install the Syncfusion.Licensing NuGet package and register the license key during application startup.

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

For more information about generating and registering a license key, refer to the Syncfusion® licensing documentation.

Step 5: Add a new button in the MainPage.xaml as shown below.

<Page
    x:Class="Create_Markdown_document.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Create_Markdown_document"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="button" Click="CreateDocument">Create Document</Button>
    </StackPanel>
</Page>

Step 6: Include the following namespaces in the MainPage.xaml.cs file.

using System.Reflection;
using Syncfusion.Office.Markdown;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.Storage.Pickers;

Step 7: Add a new action method CreateDocument in the MainPage.xaml.cs file and include the following code snippet to create a Markdown document. Register the Syncfusion license key at application startup (e.g., in the App constructor or the CreateDocument method) before using any Markdown APIs.

//"App" is the class of Portable project.
Assembly assembly = typeof(App).GetTypeInfo().Assembly;
//Create a new document.
// 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 = "Assets\\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 to MemoryStream
using (MemoryStream stream = new MemoryStream())
{
    markdownDocument.Save(stream);
    //Save the stream as a Markdown document file in the local machine.
    Save(stream, "Sample.md");
}

You can download a complete working sample from GitHub.

NOTE

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

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

WinUI UWP output Markdown document

Save a Markdown document in UWP

async void Save(MemoryStream streams, string filename)
{
    streams.Position = 0;
    StorageFile stFile;
    if (!(Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons")))
    {
        FileSavePicker savePicker = new FileSavePicker();
        savePicker.DefaultFileExtension = ".md";
        savePicker.SuggestedFileName = filename;
        savePicker.FileTypeChoices.Add("Markdown Documents", new List<string>() { ".md" });
        stFile = await savePicker.PickSaveFileAsync();
    }
    else
    {
        StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder;
        stFile = await local.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
    }
    if (stFile != null)
    {
        using (IRandomAccessStream zipStream = await stFile.OpenAsync(FileAccessMode.ReadWrite))
        {
            //Write compressed data from memory to file.
            using (Stream outstream = zipStream.AsStreamForWrite())
            {
                byte[] buffer = streams.ToArray();
                outstream.Write(buffer, 0, buffer.Length);
                outstream.Flush();
            }
        }
    }
    //Launch the saved Markdown file.
    await Windows.System.Launcher.LaunchFileAsync(stFile);
}

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.