In this tutorial, I will show you how to deal with the NuGet package, some class definition, and how to use a canvas.
First, create a new UWP project and from the main menu select Tools – NuGet Package Manager – Package Manager Console.
This will open the Package Manager Console in your Visual Studio.
Use the command Install-Package to install the Win2D package:
1 | PM> Install-Package Win2D.uwp -Version 1.25.0 |
In the Solution Explorer tab you will see these package on References tree.
The UWP project come with many files, in this tutorial I used just these MainPage.xaml and MainPage.xaml.cs.
Open the MainPage.xaml and will see a white rectangle – this is your window application.
In the left area of Visual Studio, you have the Toolbox, also you can open it with Ctrl+Alt+X keys.
This lets you add the canvas to the default window by drag and drop operation.
The MainPage.xaml file is changed and you need to update to this source code and read all comment’s:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <Page x:Class="UWP_Win2D_test_001.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWP_Win2D_test_001" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="480" Width="640"> <Grid> <canvas:CanvasControl x:Name="canvasControl" ClearColor="LightSkyBlue" Draw="canvasControl_Draw" Margin="10,10,10,10"/> </Grid> </Page> |
The next changes comes to the MainPage.xaml.cs and let you to draw on canvas.
I draw on the canvas the SVG images, an eclipse, and one text.
Let’s see the source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | using Microsoft.Graphics.Canvas.UI.Xaml; using System; using Windows.UI; using Windows.UI.Xaml.Controls; using Microsoft.Graphics.Canvas.Svg; using Windows.Foundation; namespace UWP_Win2D_test_001 { /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// draw graphics with Win2D /// </summary> public sealed partial class MainPage : Page { // this class named MainPage is a type that is defined as a class is a reference type. // the public show us the access level for anyone can create instances of this class. // the sealed modifier prevents a derived class from further overriding the method. // the partial class allows us to write a class across multiple files in a project and indicates that the parts of the class // can be defined in the namespace and all the parts must be used with the partial keyword. // the partial modifier can be applied to a class, method, interface or structure. public MainPage() { this.InitializeComponent(); } void canvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args) { CanvasSvgDocument svgDocumentCircle, svgDocumentStar; // define the first SVG svgDocumentCircle = CanvasSvgDocument.LoadFromXml(sender, "<svg><circle fill=\"#660000\" r=\"76\"/></svg>"); // define the another SVG svgDocumentStar = CanvasSvgDocument.LoadFromXml(sender, "<svg viewBox=\" - 10 - 10 120 120\" >" + "<polyline stroke=\"blue\" fill=\"none\" " + " points = \"50,0 21,90 98,35 2,35 79,90\" />" + "</svg>" ); // Size is defined Windows.Foundation.Size Size viewportSize = new Size() { Height = 600, Width = 400, }; //args.DrawingSession let you do add drawing forms from SVG args.DrawingSession.DrawSvg(svgDocumentCircle, viewportSize); args.DrawingSession.DrawSvg(svgDocumentStar, viewportSize); // draw a text args.DrawingSession.DrawText("Hello, world!", 240, 320, Colors.Green); // draw an ecllipse args.DrawingSession.DrawEllipse(100, 200, 80, 30, Colors.YellowGreen, 6); } } } |
The result after building with Ctrl+Shift+B keys and running with F5 key is this:
