- January 29, 2019
- Posted by: admin
- Categories:
To create a scratch screen in xamarin forms for cross-platform the two basic things we need is the “animation effects” and “touch Events” in Xamarin.
Forms includes 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 is 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.
So here we go.
Step1. In the Start screen, launch Visual Studio. In Visual Studio, click Create new project… to create a new project.In the New Project dialog, click Cross-Platform, select the Mobile App (Xamarin.Forms) template,set the Name for the application, choose a suitable location for the project and click the OK button:
Step2. In Solution Explorer, right-click on the main solution and choose Manage NuGet Packages.Choose “nuget.org” as the Package source, select the Browse tab, search for SkiaSharp.Views.Forms,TouchTracking.Forms ,FFImageLoading and select that package in the list, and select Install
For SkiaSharp.Views.Forms
For TouchTracking:
For FFImageLoading
Step3. After installing all the required packages ,copy the code in MainPage.xaml and paste it in your file
In the code behind file MainPage.xaml.cs add the code.
Step4. Add any image or gif file that you want to show on your screen, in my case it is “gify.gif”. Also set the property of the resource to “Embedded Resouce’ by right clicking on the file and open properties dialog, select Embedded Resouce in the build action option.
Step5. Intialize the FFImageLoading library in MainActivity.cs file of droid project and
AppDelegate.cs file of iOS project.
Step6 : Build the solution and run in any physical device or emulator. In my case i am running it in my emulator.
You can find the entire solution on the link below