Win2D

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.

1,844

293

1,844

174

View on GitHub

Top Related Projects

WinUI-Gallery

3,102

This app demonstrates the controls available in WinUI and the Fluent Design System.

Windows-universal-samples

9,614

API samples for the Universal Windows Platform.

Windows-classic-samples

5,300

This repo contains samples that demonstrate the API used in Windows classic desktop applications.

Quick Overview

Win2D is an easy-to-use Windows Runtime API for immediate mode 2D graphics rendering with GPU acceleration. It is designed for Universal Windows Platform (UWP) apps and is built on top of Direct2D, providing a high-performance and versatile graphics library for Windows developers.

Pros

High-performance GPU-accelerated graphics rendering
Easy-to-use API with a gentle learning curve
Seamless integration with UWP apps and XAML controls
Extensive documentation and samples provided by Microsoft

Cons

Limited to UWP apps, not available for other platforms
Requires Windows 10 or later, limiting backward compatibility
Less flexible than lower-level APIs like Direct2D for advanced scenarios
Smaller community compared to more widely-used graphics libraries

Code Examples

Drawing a simple shape:

using Microsoft.Graphics.Canvas;
using Windows.UI;

void DrawRectangle(CanvasDrawingSession ds)
{
    ds.DrawRectangle(10, 10, 100, 100, Colors.Red);
}

Loading and drawing an image:

using Microsoft.Graphics.Canvas;

async Task DrawImageAsync(CanvasDrawingSession ds, ICanvasResourceCreator resourceCreator)
{
    var image = await CanvasBitmap.LoadAsync(resourceCreator, "image.png");
    ds.DrawImage(image, 0, 0);
}

Creating a gradient brush:

using Microsoft.Graphics.Canvas;
using Windows.UI;

void DrawGradient(CanvasDrawingSession ds)
{
    var brush = new CanvasLinearGradientBrush(ds, Colors.Blue, Colors.Green);
    ds.FillRectangle(0, 0, 200, 200, brush);
}

Getting Started

Install the Win2D NuGet package in your UWP project:
```
Install-Package Microsoft.Graphics.Win2D
```

Add a CanvasControl to your XAML:

<xaml:Page
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml">
    <canvas:CanvasControl Draw="CanvasControl_Draw" />
</xaml:Page>

Implement the Draw event handler:

void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    using (var ds = args.DrawingSession)
    {
        ds.Clear(Colors.Black);
        ds.DrawCircle(100, 100, 50, Colors.White);
    }
}

Competitor Comparisons

WinUI-Gallery

3,102

This app demonstrates the controls available in WinUI and the Fluent Design System.

Pros of WinUI-Gallery

Comprehensive showcase of WinUI controls and features
Regularly updated with new Windows UI elements
Serves as a learning resource for developers

Cons of WinUI-Gallery

Focused on UI components, less versatile for general graphics programming
Larger repository size due to numerous examples and resources

Code Comparison

Win2D (graphics-focused):

using (CanvasDrawingSession ds = args.DrawingSession)
{
    ds.Clear(Colors.CornflowerBlue);
    ds.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
    ds.DrawText("Hello, world!", 100, 100, Colors.Yellow);
}

WinUI-Gallery (UI-focused):

<Grid>
    <TextBlock Text="Hello, World!"
               FontSize="24"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"/>
</Grid>

Summary

Win2D is a graphics library for DirectX, while WinUI-Gallery is a showcase for Windows UI controls. Win2D offers more flexibility for custom graphics rendering, whereas WinUI-Gallery provides a comprehensive demonstration of pre-built UI components. The code examples highlight their different focuses: Win2D on low-level graphics operations and WinUI-Gallery on declarative UI definition.

Windows-universal-samples

9,614

API samples for the Universal Windows Platform.

Pros of Windows-universal-samples

Broader scope, covering various Windows Universal Platform (UWP) features
More comprehensive, with a wide range of sample applications
Regularly updated to reflect the latest Windows SDK features

Cons of Windows-universal-samples

Larger repository size, potentially overwhelming for beginners
Less focused on a specific technology or API
May require more time to find relevant examples for specific use cases

Code Comparison

Win2D (Graphics-focused):

using (CanvasDrawingSession ds = args.DrawingSession)
{
    ds.Clear(Colors.CornflowerBlue);
    ds.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
    ds.DrawText("Hello, World!", 100, 100, Colors.Yellow);
}

Windows-universal-samples (General UWP):

private void Button_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(SecondPage));
    StatusBlock.Text = "Navigation initiated.";
}

Summary

Win2D is a specialized graphics library for UWP, while Windows-universal-samples covers a broader range of UWP features. Win2D offers a more focused approach to 2D graphics, whereas Windows-universal-samples provides a comprehensive set of examples for various UWP functionalities. Choose based on your specific development needs and expertise level.

Windows-classic-samples

5,300

This repo contains samples that demonstrate the API used in Windows classic desktop applications.

Pros of Windows-classic-samples

Covers a wide range of Windows API and feature samples
Provides examples for both desktop and server applications
Includes samples for various programming languages (C++, C#, VB.NET)

Cons of Windows-classic-samples

Less focused on a specific technology or framework
May contain older or deprecated code samples
Larger repository size, potentially more challenging to navigate

Code Comparison

Win2D (C++/WinRT):

CanvasDevice device = CanvasDevice::GetSharedDevice();
CanvasRenderTarget renderTarget = CanvasRenderTarget(device, 512, 512, 96);

CanvasDrawingSession ds = renderTarget.CreateDrawingSession();
ds.Clear(Colors::White);
ds.DrawEllipse(256, 256, 150, 150, Colors::Blue, 10);
ds.Close();

Windows-classic-samples (Win32 GDI):

HDC hdc = GetDC(hwnd);
HBRUSH hBrush = CreateSolidBrush(RGB(0, 0, 255));
SelectObject(hdc, hBrush);
Ellipse(hdc, 106, 106, 406, 406);
DeleteObject(hBrush);
ReleaseDC(hwnd, hdc);

Win2D focuses on modern graphics programming using DirectX, while Windows-classic-samples covers a broader range of Windows programming concepts, including older APIs like GDI.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Transitioning Win2D to Reunion is In-Progress

Moving Win2D over to WindowsAppSdk and WinUI3 is a work in progress, and some features such as CanvasAnimatedControl have partial or no support.

Win2D

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 WinUI3. It utilizes the power of Direct2D, and integrates seamlessly with XAML.

Visit the DirectX Landing Page for more resources for DirectX developers.

Where to get it

How to use it

Documentation
Sample code - also available in the Store (not updated for Reunion)

More info

Code Example

To give you a flavor of what the code looks like, here is a snippet of XAML:

xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

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

and C#:

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);
}

or C++/CX:

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 C++/WinRT:

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

or VB:

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

Using Win2D

The documentation explains how to install Visual Studio, add the Win2D NuGet package to your project, and get started using the API.

Building Win2D from source

Requirements

Visual Studio 2019 16.9 with Tools for Universal Windows Apps 15.0.27428.01 and Windows SDK 18362

Clone Repository

Go to 'View' -> 'Team Explorer' -> 'Local Git Repositories' -> 'Clone'
Add the Win2D repository URL (https://github.com/Microsoft/Win2D.git) and hit 'Clone'

Build NuGet Packages

Launch 'Developer Command Prompt for VS2019'
Change directory to your cloned Win2D repository and run 'build'

Point Visual Studio at the resulting 'bin' directory

In Visual Studio, go to 'Tools' -> 'NuGet Package Manager' -> 'Package Manager Settings'
Choose 'Package Sources'
Click the '+' button to add a new source
Set 'Name' to 'Win2D' (or a name of your choosing)
Set 'Source' to the full path to the 'bin' directory (inside your cloned Win2D repository)
Click the 'Update' button
Click 'OK'

Locally built versions of Win2D are marked as prerelease, so you must change the 'Stable Only' setting to 'Include Prerelease' when adding them to your project.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot