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
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 attribu
🔸 PaintSurface: Indicates the event that you can add to define your paint surface’s initial state.
Getting deep into the PaintSurface and Touch attributes
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
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.
Good luck with your implementation! 😎