Introduction

Introduction

Moving Win2D onto WinUI3/Project Reunion is a work in progress. Some features are not supported, and some of the Documentation still points to old WinUI2 concepts and classes.

Win2D is an easy-to-use Windows Runtime API for immediate mode 2D graphics rendering with GPU acceleration. It is available to WinUI3 app developers. It utilizes the power of Direct2D, and integrates seamlessly with XAML.

Where to get it:

How to use it:

Sample code (Not yet updated for WinUI3)

More info:

Getting set up

Getting Started with Project Reunion:

Add the Win2D NuGet package:

Go to 'Tools' -> 'NuGet Package Manager' -> 'Manage NuGet Packages for Solution...'
Type 'Win2D' into the 'Search Online' box, and hit Enter
Select the 'Microsoft.Graphics.Win2D' package and click 'Install', then 'OK'
Accept the license agreement
Click 'Close'

Write some code

Add a CanvasControl to your XAML page:

Double click on MainWindow.xaml in Solution Explorer to open the XAML editor
Add the Microsoft.Graphics.Canvas.UI.Xaml namespace next to the existing xmlns statements:
Copy
```
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
```

Add a CanvasControl inside the existing Grid control:

Copy

<Grid>
    <canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
</Grid>

Then add some Win2D drawing code.

If you created a C# project, edit MainWindow.xaml.cs:

Copy

using Microsoft.UI;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Graphics.Canvas.UI.Xaml;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
        args.DrawingSession.DrawText("Hello, world!", 100, 100, Colors.Yellow);
    }
}

If you created a C++/CX project, edit MainWindow.xaml.h and add a function declaration to the MainWindow class:

Copy

void CanvasControl_Draw(Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
                        Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args);

Then edit MainWindow.xaml.cpp:

Copy

#include "pch.h"
#include "MainWindow.xaml.h"

using namespace App1;
using namespace Microsoft::UI;
using namespace Microsoft::Graphics::Canvas::UI::Xaml;

MainWindow::MainWindow()
{
    InitializeComponent();
}

void MainWindow::CanvasControl_Draw(CanvasControl^ sender, CanvasDrawEventArgs^ args)
{
    args->DrawingSession->DrawEllipse(155, 115, 80, 30, Colors::Black, 3);
    args->DrawingSession->DrawText("Hello, world!", 100, 100, Colors::Yellow);
}

Or if you created a VB project, edit MainWindow.xaml.vb:

Copy

Imports Microsoft.UI
Imports Microsoft.UI.Xaml.Controls
Imports Microsoft.Graphics.Canvas.UI.Xaml

Public NotInheritable Class MainWindow
    Inherits Page
    Public Sub New()
        Me.InitializeComponent()
    End Sub

    Private Sub CanvasControl_Draw(sender As CanvasControl, args As CanvasDrawEventArgs)
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Colors.Black, 3)
        args.DrawingSession.DrawText("Hello, world!", 100, 100, Colors.Yellow)
    End Sub
End Class

If you prefer to build your own version of Win2D from source, see the WinUI3 branch readme for instructions on how to clone from GitHub and compile it locally.