The personal website of Scott W Harden
October 16th, 2021

How to MeasureString() with Maui.Graphics

Starting with .NET 6 Microsoft is sunsetting cross-platform support for System.Drawing.Common. Microsoft.Maui.Graphics is emerging as an excellent replacement and it can be used in any app (not just MAUI apps).

Code here demonstrates how I measure the pixel size of a string using Maui.Graphics in a console application.

/// <summary>
/// Return the pixel size for the given text/font/size combination
/// </summary>
SizeF MeasureString(string text, string fontName, float fontSize)
{
    var fontService = new SkiaFontService("", "");
    using SkiaSharp.SKTypeface typeFace = fontService.GetTypeface(fontName);
    using SkiaSharp.SKPaint paint = new() { Typeface = typeFace, TextSize = fontSize };
    float width = paint.MeasureText(text);
    float height = fontSize;
    return new SizeF(width, height);
}

NOTE: 💡 This method creates a font service (needed for console applications) but if you are developing a graphical application there may already be an existing global font service instance you can reference.

The following code uses MeasureString() to generate the image above:

using Microsoft.Maui.Graphics;
using Microsoft.Maui.Graphics.Skia;

// start with a blue canvas
BitmapExportContext bmp = SkiaGraphicsService.Instance.CreateBitmapExportContext(400, 100);
ICanvas canvas = bmp.Canvas;
canvas.FillColor = Colors.Navy;
canvas.FillRectangle(0, 0, bmp.Width, bmp.Height);

// measure the text to determine its bounding rectangle
string text = "Hello, MAUI!";
float padding = 25;
string fontName = "Arial"; // WARNING: see note below
float fontSize = 36;
SizeF textSize = MeasureString(text, fontName, fontSize);
RectangleF textRect = new(padding, padding, textSize.Width, textSize.Height);

// fill a rectangle behind the text
canvas.FillColor = Colors.Maroon;
canvas.FillRectangle(textRect);

// draw the text inside a bounding box
canvas.FontSize = fontSize;
canvas.FontName = fontName;
canvas.FontColor = Colors.White;
canvas.DrawString(text, padding, padding + textRect.Height, HorizontalAlignment.Left);

// draw a rectangle above the text
canvas.StrokeColor = Colors.Yellow;
canvas.DrawRectangle(textRect);

// save the result
bmp.WriteToFile("demo.png");

WARNING: ⚠️ At the time of writing (October 16, 2021) the Maui.Graphics.Skia package is still in preview and DrawString() is not fully supported - it only draws strings using the default system font. The MeasureString() code above will measure strings of any font.

Resources

Markdown source code last modified on October 16th, 2021
---
Title: MeasureString() with Maui.Graphics
Description: How to measure the pixel dimensions of a string using Microsoft.Maui.Graphics
Date: 2021-10-16 4:15PM EST
tags: csharp, maui
---

# How to MeasureString() with Maui.Graphics

Starting with .NET 6 Microsoft is [sunsetting cross-platform support](https://github.com/dotnet/designs/blob/main/accepted/2021/system-drawing-win-only/system-drawing-win-only.md) for [`System.Drawing.Common`](https://www.nuget.org/packages/System.Drawing.Common/). [`Microsoft.Maui.Graphics`](https://github.com/dotnet/Microsoft.Maui.Graphics) is emerging as an excellent replacement and it can be used in any app (not just MAUI apps).

Code here demonstrates how I measure the pixel size of a string using `Maui.Graphics` in a console application.

```cs
/// <summary>
/// Return the pixel size for the given text/font/size combination
/// </summary>
SizeF MeasureString(string text, string fontName, float fontSize)
{
    var fontService = new SkiaFontService("", "");
    using SkiaSharp.SKTypeface typeFace = fontService.GetTypeface(fontName);
    using SkiaSharp.SKPaint paint = new() { Typeface = typeFace, TextSize = fontSize };
    float width = paint.MeasureText(text);
    float height = fontSize;
    return new SizeF(width, height);
}
```

> **NOTE:** 💡 This method creates a font service (needed for console applications) but if you are developing a graphical application there may already be an existing global font service instance you can reference.

<div class="text-center">

![](demo.png)

</div>

The following code uses `MeasureString()` to generate the image above:

```cs
using Microsoft.Maui.Graphics;
using Microsoft.Maui.Graphics.Skia;

// start with a blue canvas
BitmapExportContext bmp = SkiaGraphicsService.Instance.CreateBitmapExportContext(400, 100);
ICanvas canvas = bmp.Canvas;
canvas.FillColor = Colors.Navy;
canvas.FillRectangle(0, 0, bmp.Width, bmp.Height);

// measure the text to determine its bounding rectangle
string text = "Hello, MAUI!";
float padding = 25;
string fontName = "Arial"; // WARNING: see note below
float fontSize = 36;
SizeF textSize = MeasureString(text, fontName, fontSize);
RectangleF textRect = new(padding, padding, textSize.Width, textSize.Height);

// fill a rectangle behind the text
canvas.FillColor = Colors.Maroon;
canvas.FillRectangle(textRect);

// draw the text inside a bounding box
canvas.FontSize = fontSize;
canvas.FontName = fontName;
canvas.FontColor = Colors.White;
canvas.DrawString(text, padding, padding + textRect.Height, HorizontalAlignment.Left);

// draw a rectangle above the text
canvas.StrokeColor = Colors.Yellow;
canvas.DrawRectangle(textRect);

// save the result
bmp.WriteToFile("demo.png");
```

> **WARNING:** ⚠️ At the time of writing (October 16, 2021) the [`Maui.Graphics.Skia`](https://www.nuget.org/packages/Microsoft.Maui.Graphics.Skia/) package is still in preview and `DrawString()` is not fully supported - it only draws strings using the default system font. The `MeasureString()` code above will measure strings of any font.

## Resources

* Download this project: [**ConsoleApp30.zip**](ConsoleApp30.zip)

* [Maui.Graphics on GitHub](https://github.com/dotnet/Microsoft.Maui.Graphics)

* [Maui.Graphics on NuGet](https://www.nuget.org/packages?q=Maui.Graphics)

* [Maui.Graphics WPF Quickstart](https://maui.graphics/quickstart/wpf/)

* [Maui.Graphics WinForms Quickstart](https://maui.graphics/quickstart/winforms/)