Click or drag to resize
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 Windows apps for Windows 8.1, Windows Phone 8.1 and Windows 10. It utilizes the power of Direct2D, and integrates seamlessly with XAML and CoreWindow.

Where to get it:

How to use it:

More info:

Getting set up

Download and install Visual Studio:

  • To develop for Windows 10 (Universal Windows Platform):
    • Recommended version: Visual Studio Community 2015 with Update 3 and Universal Windows App Development Tools 1.4.1
    • Minimum version: Visual Studio Community 2015 with Update 1
  • To develop for Windows 8.1 or Windows Phone 8.1:
    • Recommended version: Visual Studio Community 2015
    • Minimum version: Visual Studio Community 2013 with Update 5
    • If using Visual Studio Express, requires the 'for Windows' version (not 'for Windows Desktop')

Create your project:

  • Go to 'File' -> 'New' -> 'Project...'
  • Select 'Visual C#', 'Visual C++', or 'Visual Basic'
  • Create a 'Blank App (Universal Windows)' (Visual Studio 2015) or 'Blank App (Universal Apps)' (Visual Studio 2013)
  • 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' or 'Win2D.win81' package and click 'Install', then 'OK'
    • If building for Windows 10, use Win2D.uwp
    • If building for Windows 8.1 or Windows Phone 8.1, use Win2D.win81
  • Accept the license agreement
  • Click 'Close'
  • If creating a Windows 8.1 or Windows Phone 8.1 app, change Solution Platform from 'Any CPU' to 'x86', 'x64', or 'ARM'
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:
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
  • Add a CanvasControl inside the existing Grid control:
    <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:
    using Windows.UI;
    using Windows.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:
    void CanvasControl_Draw(Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
                            Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args);
    Then edit MainPage.xaml.cpp:
    #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:
    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.