Pages

Wednesday, 28 October 2020

Creating Scratch View in Xamarin Forms using SkiaSharp

These Days, We could see that coming to a new fashion for gift scratch card which is using many apps like Phone Pay/ Google Pay.


To create a scratch screen in xamarin forms for cross-platform the two basic things we need are the “animation effects” and touch Events in Xamarin.

Forms include its own animation infrastructure that’s straightforward for creating simple animations, while also being versatile enough to create complex animations.

In our requirement we need more than this, so we are a third party library Skiasharp.SkiaSharp for Xamarin.Forms are packaged as a NuGet package. After you’ve created a Xamarin.Forms solution in Visual Studio or Visual Studio for Mac, you can use the NuGet package manager to search for the SkiaSharp.Views.Forms package and add it to your solution. If you check the References section of each project after adding SkiaSharp, you can see that various SkiaSharp libraries have been added to each of the projects in the solution.

In our application, we are using skiasharp for making a rectangle on a canvas and will provide a scratch effect by using SKPath property. Now as we know we have native touch events on each platform for android and iOS but here we using a third-party library “TouchTracking“to provide touch events for cross-platform which will be applicable to android as well as iOS also.

TouchEffect not work in ios with a stacklayout. it is Known issue in TouchEffect.

So for IOS we have to set below Bold Line Code. Sample Code have added this already.


public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
  global::Xamarin.Forms.Forms.Init();
  LoadApplication(new App());

  var _ = new TouchTracking.Forms.iOS.TouchEffect();

  return base.FinishedLaunching(app, options);
}
Download Full Source code :  Link 
Other Sample Link


1 comment:

  1. Good Tips for IOS , I have try demo from github but not worked on IOS. Your code is running perfect. Thanks

    ReplyDelete