Maui.Graphics WPF Quickstart

This page demonstrates how to use Maui.Graphics in a WPF application.

Steps

WARNING: At the time of writing Microsoft.Maui.Graphics is still in pre-release and the WPF control is not available as a NuGet package. This is likely to get easier in the future.

  • Create a WPF application
  • Add NuGet packages
  • Add WPF control package from source
  • Create a Drawable that describes what you want to render
  • Place a WDSkiaGraphicsView in your layout
  • Create a Drawable and assign it to WDSkiaGraphicsView
  • Add a Loaded event to invalidate the control (forcing a render at launch)

MyDrawable.cs

using Microsoft.Maui.Graphics;
using System;

public class MyDrawable : IDrawable
{
    private readonly Random Rand = new();

    public void Draw(ICanvas canvas, RectangleF dirtyRect)
    {
        canvas.FillColor = Color.FromArgb("#003366");
        canvas.FillRectangle(dirtyRect);

        for (int i = 0; i < 500; i++)
        {
            canvas.FillColor = Color.FromRgba(
                r: Rand.NextDouble(),
                g: Rand.NextDouble(),
                b: Rand.NextDouble(),
                a: .5);

            canvas.FillCircle(
                centerX: (float)Rand.NextDouble() * dirtyRect.Width,
                centerY: (float)Rand.NextDouble() * dirtyRect.Height,
                radius: (float)Rand.NextDouble() * 5 + 5);
        }

        canvas.FontSize = 36;
        canvas.FontColor = Colors.White;
        canvas.SetShadow(
            offset: new SizeF(2, 2),
            blur: 1,
            color: Colors.Black);

        canvas.DrawString(
            value: "This is Maui.Graphics",
            x: dirtyRect.Width / 2,
            y: dirtyRect.Height / 2,
            horizontalAlignment: HorizontalAlignment.Center);
    }
}

MainWindow.xaml

<Window x:Class="QuickstartWpf.MainWindow"
        ...
        xmlns:Skia="clr-namespace:Microsoft.Maui.Graphics.Skia;assembly=Microsoft.Maui.Graphics.Skia.WPF"
        Title="Maui.Graphics Quickstart - WPF (Skia)" Height="300" Width="400">
    <Grid>
        <Skia:WDSkiaGraphicsView Name="MyGraphicsView" />
    </Grid>
</Window>

MainWindow.xaml.cs

  • 💡 Invaliding the control after the window is loaded forces it to draw after the program starts
using System.Windows;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        MyGraphicsView.Drawable = new MyDrawable();
        Loaded += (_, _) => MyGraphicsView.Invalidate();
    }
}

Source Code

Resources