ScratchCard in Xamarin Forms with SkiaSharp
Hi Everyone Its been a while I haven’t written any articles in this blog. Good to be back. Today I am going to explain how you can create a scratch card like a google GPay does or some other applications does. How to do the same with Xamarin Forms? Well, thats what we gonna check it out here. Below video shows how the output will look like, This is what we gonna accomplish. Get Ready Folks !!!
We need to add SkiaSharp.Views.Forms nugets package. Please cofirm it with the image below that you install correct package.
Before we start lets add the effect that we need to achieve this goal.
We will be using Effects for this, each platform effect implementation need to be added.
For this specific touch effect I have referred official document from Microsoft you can find that from this link.
From the above link I was able to demonstrates an effect that implements multi-touch finger tracking, and shows how to trigger events from an effect. With this help I have managed to bring scratch card feature in Xamarin Forms.
Step 1 — Touch Effect
Create TouchEffect.cs which implements RoutingEffect with event handler in it. So the implementation of this effect is carried out in the respective native platforms. Additional to this supporting classes and enums need to be added in the PCL project. Below is how the TouchEffect.cs class looks like,
TouchActionType.cs is an enum which represents the touch action types such as Entered, Pressed, Moved, Released, Exited, and Cancelled. Below is how the enum looks like,
TouchActionEventArgs.cs is created to act as EventArgs for the TouchEventHandler. which had properties such as id, type, location, isInContact within it. below is how it looks,
Step 2 — Android Native Effect implementation
Get TharsanP’s stories in your inbox
Join Medium for free to get updates from this writer.
We need to create TouchEffect class which holds the native implemenation of touch effect with same resolution group as we mentioned in the TouchEffect.cs file in PCL project. We implements the PlatformEffect class and override the existing functions and we add the following implementation which is taken from the Microsoft reference class.
Step 3 — iOS Native Effect implementation
We need to create TouchEffect class which holds the native implemenation of touch effect with same resolution group as we mentioned in the TouchEffect.cs file in PCL project. We implements the PlatformEffect class and override the existing functions and we add the following implementation which is taken from the Microsoft reference class. Additional to that we create TouchRecognizer.cs which extends UIGestureRecognizer which enables to get the touch events and touch action types in iOS. Below is how both the files looks like,
Step 4 — XAML
Now we come to the design part, we use Grid layout for help here.
As you all know, if we place two elements in the same row and column of the grid it overlaps and last element gets displayed in the top.
For example if we place image and a frame in a grid so image is first layer and frame is second layer where frame gets displayed above the image.
So this overlapping helps us here, We place any text or image in first layer and then place SKCanvasView in the second layer where what is in behind layer is not shown as SkCanvasView is overlaping above and hides the behind elements.
We Add the touch effect for the Main Grid and place the TouchAction. where the TouchAction eventhandler is added in the codebehind .cs file.
Below is how XAML file looks like,
Step 5 — TouchEvent
As we places touch effect to grid in the above step the relevant handler function associated is created in the code behind file.
We have PaintSurface=”CanvasView_PaintSurface” mentioned in the SKCanvasView in XAML, this method is called when first time UI is displayed. where the color is set to Orange and rectangle in drawn in the CanvasView in the CanvasView_PaintSurface() function. where inProgressPaths, completedPaths doesnt have any values at the start. Once a touch is happening, touch event gets triggered and the paths values are added in the inProgressPaths, completedPaths once this is added the Canvas view need to be redrawn for this we are calling canvasView.InvalidateSurface(); method which triggers back the CanvasView_PaintSurface() function and redrwing happens again with new values.
Thats is folks, combining all this together we have successfully accomplished a winning Scratch Card feature in Xamarin Forms,
Final ouput looks like below,
Thats the end everyone. Xamarin is way easier than ever before. With .NET MAUI its getting more easier and faster. You can check the full solution in the GitHub Link.
