Creating Markdown control with .NET MAUI Graphics

Creating Markdown control with .NET MAUI Graphics

08 January 2023

.NET MAUI/Xamarin

Buy Me A Coffee

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

Android

Markdown on Android

Markdown on iOS

Markdown on iOS

The full code can be found on GitHub.

Happy coding!

Buy Me A Coffee

Related:

Creating Kanban Board using Xamarin.Forms

This article describes how to create Kanban Board using Xamarin Forms (.NET MAUI) only. Drag & Drop Cards, Set Column WIP, Store data in Local Db.

Prepare .NET MAUI application with CommunityToolkit.MAUI to release

The article describes how to configure .NET MAUI CommunityToolkit to avoid crashes at runtime.

An unhandled error has occurred. Reload

🗙