CHAPTER 13

Lets Get Graphical

In this chapter, you will learn what .NET MAUI Graphics is, how it can be used, and some practical examples of why you would want to use it. You will also gain insight into some of the power provided by .NET MAUI

Graphics and how you can use it to build your own sketch widget with the

.NET MAUI GraphicsView control.

.NET MAUI Graphics

.NET MAUI Graphics is another one of my favorite topics! I am currently exploring the idea of building a game engine on top of it given the amount of power it already offers. If you are interested in the game engine, please feel free to check out the repository on GitHub at https://github.com/ bijington/orbit.

It has the potential to offer the ability for so much to be achieved, things like rendering chart controls or other fancy concepts all through a cross-platform API, meaning you only really need to focus on the problems you are trying to solve and not worry about each individual platform.

Essentially .NET MAUI Graphics offers a surface that can render pixel-­ perfect graphics on any platform supported by .NET MAUI. Consider .NET MAUI Graphics as an abstraction layer, like .NET MAUI itself, on top of the platform-specific drawing libraries. So we get all the power of each platform but with a simple unified .NET API that we as developers can work with.

Chapter 13 Lets Get Graphical

Drawing ontheScreen

.NET MAUI provides GraphicsView, which you can use to draw shapes on the screen. You need to assign the Drawable property on GraphicsView with an implementation that knows how to draw. This implementation must implement the IDrawable interface that defines a Draw method.

Updating theSurface

In order to trigger the application or GraphicsView to update what is rendered on screen, you must call the Invalidate method on

GraphicsView. This will then cause the IDrawable.Draw method to be invoked and your code will be given the chance to update the canvas.

The way to interact with the ICanvas implementation is to first set the values you need such as fill color (FillColor) or stroke color (StrokeColor) and then call the draw method you are interested in (FillSquare() or DrawSquare(), respectively).

Let’s look at some basic examples to get a better understanding of how to use the graphics layer.

Drawing aLine

Inside the Draw method you can interact with the ICanvas to draw a line using the DrawLine method. The following code shows how this can be achieved:

public void Draw(ICanvas canvas, RectF dirtyRect)

{

canvas.StrokeColor = Colors.Red; canvas.StrokeSize = 6; canvas.DrawLine(0, 20, 100, 50);

}

394

Chapter 13 Lets Get Graphical

You set StrokeColor and StrokeSize before calling the DrawLine method. Order is important and you must set these properties before you draw. Figure 13-1 shows the result of the Draw method from above.

Figure 13-1.  Drawing a line in .NET MAUI Graphics

In addition to drawing lines, you can draw many different shapes such as ellipse, rectangle, rounded rectangle, and arc. You can draw even more complex shapes through paths.

Drawing aPath

Paths are not to be confused with the Shapes API provided with .NET MAUI. Paths in .NET MAUI Graphics enable you to build up a set of coordinates in order to draw a more complex shape.

public void Draw(ICanvas canvas, RectF dirtyRect)

{

PathF path = new PathF(); path.MoveTo(40, 10); path.LineTo(70, 80); path.LineTo(10, 50); path.Close(); canvas.StrokeColor = Colors.Red; canvas.StrokeSize = 6; canvas.DrawPath(path);

}

You first build up a PathF through the MoveTo, LineTo, and Close methods. The MoveTo method moves the current location of the path to the

395

Chapter 13 Lets Get Graphical

specified coordinates, and then the LineTo method draws a line from the current location that you just set in MoveTo to the coordinates specified in the LineTo method call. Finally, the Close method allows you to close the path. This means that the final location will have a line added back to the starting location. Notice that you didn’t explicitly add a LineTo(40, 10) method call in; Close does this for you. Then you set the StrokeColor and StrokeSize before calling the DrawPath method. Figure 13-2 shows the result of the Draw method from above.

Figure 13-2.  Drawing a path in .NET MAUI Graphics

It is this DrawPath method that you will be utilizing in the new widget you will be building as part of this chapter.

Maintaining the State of the Canvas

There can be times when you want to preserve some of the settings that you apply to the canvas, such as properties like StrokeColor and FillColor. All properties related to Stroke and Fill, plus others like transformation properties, can be preserved. This can be done through

the SaveState method, which will save the current state. This saved state can then be restored through the RestoreState method. It is also possible to reset the current graphics state back to the default values with the ResetState method. These three methods can provide a large amount

of functionality in specific scenarios. Say you have implemented a chart rendering control where the chart is rendered and then each individual series is rendered separately. You want to preserve the state of the charts graphics settings but wish to reset each time you render a series (e.g., each column in a bar chart).

396