Creating Markdown control with .NET MAUI Graphics

Hello and welcome to 2023! 👋

This article is devoted to creating a simple Markdown control using .NET MAUI Graphics.

.NET MAUI Graphics is a cross-platform API for drawing 2D graphics in .NET applications.

The Microsoft.Maui.Graphics namespace provides a cross-platform 2D graphics canvas that supports drawing and painting shapes and images, compositing operations, and graphical object transforms. You can read more about it on Microsoft docs.

Let's see how to add this cool API to your application.

Markdown control

.NET MAUI has a GraphicsView control. It is a graphics canvas for drawing 2D graphics.

Let's create a MarkdownGraphicsView control:

I use M.BindableProperty.Generator Nuget package to simplify bindable property code generation.

MarkdownDrawable

GraphicsView defines the Drawable property, which specifies the content that will be drawn.

To create a new drawable we need to implement Draw method of IDrawable interface.

Please take a look at Read method. .NET MAUI already has a MarkdownAttributedTextReader. So, for a simple scenario you can replace the code with:

But, if you want to implement a custom renderer, or use your Markdown converter (Markdig is currently used), keep it as it is.

CustomRenderer

The final step is implementing a custom renderer for a specific markdown block.

Let's implement it for CodeInline. The CodeInline is a block of text you put in single quotes (`).

We also need to call Renderer.AddTextRun method, but it is internal in .NET MAUI. But we still can call it using reflection:

Result

The full code can be found on GitHub.

Happy coding!