Painting your screen with Xamarin Forms

Have you ever need to create an application with painting screen? ? Yes!! Me too. In this post, I’m going to explain step by step how to do it. Let’s see!

First of all… What do I need?

 Add from NuGet Package the plugin: SkiaSharp

Let’s start!

You must add the following namespace on your xaml page:

xmlns:views="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"

view raw PaintSample hosted with by GitHub

After this, you have to add the following tag:

<views:SKCanvasView x:Name="PaintSample"/>

view raw PaintSample1 hosted with by GitHub

Knowing the attributes ?

?  EnableTouchEvents:  Get/sets a boolean value which one indicates if touch events will be enabled or not.

? Touch:               Indicates the event that will be triggered when the screen in touched.  (You must have EnableTouchEvents attribute enabled)

? PaintSurface:         Indicates the event that you can add to define your paint surface’s initial state.

	<Grid>
	<views:SKCanvasView x:Name ="PaintSample"
	PaintSurface ="OnPainting"
	EnableTouchEvents ="True"
	Touch ="OnTouch" />
	</Grid>

view raw PaintSample2 hosted with by GitHub

Getting deep into the PaintSurface and Touch attributes

PaintSurface:

As we show below, PaintSurface is the property where we can define the behavior and characteristics of our screen. For this example, we will start with the surface declaration and clearing it. Here we can see that the Clear method allows a color, we can clean the screen with whatever color that we want just adding SKColors.colorName.

	// 1 - Getting current surface
	var surface = e.Surface;
	// 2 - Getting the canvas to draw
	var canvas = surface.Canvas;
	// 3. Clearing the canvas
	canvas.Clear(SKColors.Bisque);

view raw PaintSample3 hosted with by GitHub

Creating the stroke line

	var stroke = new SKPaint
	{
	Color = SKColors.DarkOrange,
	StrokeWidth = 2,
	Style = SKPaintStyle.Stroke
	};

view raw PaintSample4 hosted with by GitHub

?  Color:                 Indicates the stroke line color.

?  StrokeWidth:   Indicates the stroke line width.

?  Style:                 Indicates the line style that the stroke will get. You can choose three style types:

Drawing the stroke line

	foreach (var touchPath in paths)
	{
	canvas.DrawPath(touchPath, stroke);
	}

view raw PaintSample5 hosted with by GitHub

?  DrawPath method:               Gets SKPath and SKPaint and parameters.

Resuming of the PaintSurface event

	private List<SKPath> paths = new List<SKPath>();
	private void OnPainting(object sender, SKPaintSurfaceEventArgs e)
	{
	var surface = e.Surface;
	var canvas = surface.Canvas;
	canvas.Clear(SKColors.Bisque);
	var stroke = new SKPaint
	{
	Color = SKColors.DarkOrange,
	StrokeWidth = 5,
	Style = SKPaintStyle.Stroke
	};
	foreach (var touchPath in paths)
	{
	canvas.DrawPath(touchPath, stroke);
	}
	}

view raw PaintSample6 hosted with by GitHub

Touch:

In the touch event, we will define the action that the stroke line will get for each one of the action types:  Pressed, Moved, Released, Entered, Cancelled and Exited.

	private List<SKPath> paths = new List<SKPath>();
	private void OnTouch(object sender, SKTouchEventArgs e)
	{
	switch (e.ActionType)
	{
	case SKTouchAction.Pressed:
	var p = new SKPath();
	p.MoveTo(e.Location);
	temporaryPaths[e.Id] = p;
	break;
	case SKTouchAction.Moved:
	if (e.InContact)
	temporaryPaths[e.Id].LineTo(e.Location);
	break;
	case SKTouchAction.Released:
	paths.Add(temporaryPaths[e.Id]);
	temporaryPaths.Remove(e.Id);
	break;
	}
	e.Handled = true;
	// update the UI on the screen
	((SKCanvasView)sender).InvalidateSurface();
	}

view raw PaintSample7 hosted with by GitHub

References:

https://github.com/mattleibow/SkiaSharpDemo

Spanish post:

https://medium.com/@reyes.leomaris/dibujando-en-la-pantalla-en-xamarin-forms-d64c05eaba48

Good luck with your implementation! ?