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:

After this, you have to add the following tag:

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.

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.

Creating the stroke line

?  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

?  DrawPath method:               Gets SKPath and SKPaint and parameters.

Resuming of the PaintSurface event

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.

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! ?