Click or drag to resize

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:

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:
  • Add a CanvasControl inside the existing Grid control:
        <canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>

Then add some Win2D drawing code.

  • If you created a C# project, edit MainWindow.xaml.cs:
    using Microsoft.UI;
    using Microsoft.UI.Xaml.Controls;
    using Microsoft.Graphics.Canvas.UI.Xaml;
    public sealed partial class MainWindow : Window
        public MainWindow()
        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:
    void CanvasControl_Draw(Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
                            Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args);
    Then edit MainWindow.xaml.cpp:
    #include "pch.h"
    #include "MainWindow.xaml.h"
    using namespace App1;
    using namespace Microsoft::UI;
    using namespace Microsoft::Graphics::Canvas::UI::Xaml;
    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:
    Imports Microsoft.UI
    Imports Microsoft.UI.Xaml.Controls
    Imports Microsoft.Graphics.Canvas.UI.Xaml
    Public NotInheritable Class MainWindow
        Inherits Page
        Public Sub New()
        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.