Search code examples
c#wpfskiaskiasharp

Blurry text with SkiaSharp in WPF

I`m using the SkiaSharp to draw text in WPF.

http://lostindetails.com/blog/post/SkiaSharp-with-Wpf

https://github.com/8/SkiaSharp-Wpf-Example

As you can see the text is not sharp.

enter image description here

You can easily notice that by comparing the text with the MainWindow test in the title which is sharp.

What can be the problem?

Solution

  • The chances are it is that you are not rendering at a high enough resolution. I experience this on my SurfaceBook display, but not on my external display. You actually have to create a "larger" surface than you actually need. For example, my SurfaceBook has a scaling of 300%, so I have to first get the width of the window, and then multiply by 3:

    https://github.com/mono/SkiaSharp/blob/master/source/SkiaSharp.Views/SkiaSharp.Views.WPF/SKElement.cs#L57-L61

    var m = PresentationSource.FromVisual(this).CompositionTarget.TransformToDevice;
var dpiX = m.M11;
var dpiY = m.M22;
var width = (int)(ActualWidth * dpiX);
var height = (int)(ActualHeight * dpiY);

    Instead of having to do this yourself, you can make use of the pre-created views in the NuGet: https://www.nuget.org/packages/SkiaSharp.Views

    You can then just drop in the SKElement as in this sample:

    https://github.com/mono/SkiaSharp/blob/master/samples/WPFSample/WPFSample/MainWindow.xaml#L28

    <views:SKElement x:Name="canvas" PaintSurface="OnPaintCanvas" />