Resources for visualizing data using C# and the .NET platform
How to draw using Maui.Graphics in a WPF application

This page describes how to draw using Maui.Graphics from a WPF application.

⚠️ Warning: The Maui.Graphics package is currently in preview and its API may change as the library matures.

1. Create a WPF Application

dotnet new wpf

2. Add NuGet Packages

dotnet add package Microsoft.Maui.Graphics
dotnet add package Microsoft.Maui.Graphics.Skia
dotnet add package SkiaSharp.Views.WPF

3. Add a SkiaSharp Element

<Window x:Class="QuickstartWpf.MainWindow"
        xmlns:local="clr-namespace:QuickstartWpf"
        xmlns:skia="clr-namespace:SkiaSharp.Views.WPF;assembly=SkiaSharp.Views.WPF">
    <Grid>
        <skia:SKElement PaintSurface="SKElement_PaintSurface"/>
    </Grid>
</Window>

4. Draw Graphics

private void SKElement_PaintSurface(object sender, SkiaSharp.Views.Desktop.SKPaintSurfaceEventArgs e)
{
    ICanvas canvas = new SkiaCanvas() { Canvas = e.Surface.Canvas };

    canvas.FillColor = Colors.Navy;
    canvas.FillRectangle(0, 0, (float)SkElement1.ActualWidth, (float)SkElement1.ActualHeight);

    canvas.StrokeColor = Colors.White.WithAlpha(.5f);
    canvas.StrokeSize = 2;
    for (int i = 0; i < 100; i++)
    {
        float x = Random.Shared.Next((int)SkElement1.ActualWidth);
        float y = Random.Shared.Next((int)SkElement1.ActualHeight);
        float r = Random.Shared.Next(5, 50);
        canvas.DrawCircle(x, y, r);
    }
}

Resources