Introduction

Introduction

Win2D is an easy-to-use Windows Runtime API for immediate mode 2D graphics rendering with GPU acceleration. It is available to C#, C++ and VB developers writing apps for the Windows Universal Platform (UWP). It utilizes the power of Direct2D, and integrates seamlessly with XAML and CoreWindow.

Where to get it:

How to use it:

Sample code - also available in the Store

More info:

Getting set up

Download and install Visual Studio:

Minimum version: Visual Studio Community 2017
Visual Studio Tools for Universal Windows Apps 15.0.27428.01
Windows SDK 17134 (April 2018 Update)

Create your project:

Go to 'File' -> 'New' -> 'Project...'
Select 'Visual C#', 'Visual C++', or 'Visual Basic'
Create a 'Blank App (Universal Windows)'
Enter a project name of your choosing
Click 'OK'

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 'Win2D.uwp' 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 MainPage.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 MainPage.xaml.cs:

Copy

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

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        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 MainPage.xaml.h and add a function declaration to the MainPage class:

Copy

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

Then edit MainPage.xaml.cpp:

Copy

#include "pch.h"
#include "MainPage.xaml.h"

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

MainPage::MainPage()
{
    InitializeComponent();
}

void MainPage::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 MainPage.xaml.vb:

Copy

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

Public NotInheritable Class MainPage
    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 readme for instructions on how to clone from GitHub and compile it locally.

Legacy support for Windows 8.1

Win2D 1.21.0 was the last release to support the Windows 8.1 and Windows Phone 8.1 platforms. From Win2D 1.22.0 onward, only the Windows Universal Platform (UWP) is supported.

Legacy Win2D support for Windows and Phone 8.1 is available as a NuGet package and from the win81 branch on github.