Recently I was exploring a few random applications and found an interesting behavior that was about scratching an image and revealing the result while doing it. So I was curious about how to do that in Xamarin Forms and came across this sample, so I took it as a base and created my own ScratchViewControl so it can be reused in different projects.
The idea of the control is to be able to configure a FrontImage, BackImage and it will be built using SkiaSharp.
–
Let’s do it step by step
1. Install packages
SkiaSharp.Views.Forms and TouchTracking.Forms in your projects
On iOS AppDelegate classs initialize the TouchTracking library by adding:
new TouchTracking.Forms.iOS.TouchEffect();
2. Create a ScratchView control class
In the Xaml, will add a Grid with an Image and a Skia Canvas View as children.
3. Add the code behind logic
In the code behind of the control we will have 3 bindable properties:
– FrontImage: Image shown in Front
– BackImage: Image shown after scratching
– StrokeWidth: Size of the brush (by default it will be 100)
Will use the TouchAction event to detect the touch changes to draw into the canvas using the PaintSurface event.
How to use it
- Add the front/back images into your Xamarin Forms project as embedded resources
2. Use the control
3. Enjoy the magic:
That’s all for now, you can check the full source code here.
NOTE: The Xamarin image used was done by Luis Matos, if you want to check more images like this you can check these wallpapers he did.
Happy coding!
3 Comments
Nice
I have seen a lot of useful points on your web-site about computers. However, I have the opinion that laptops are still not nearly powerful more than enough to be a good choice if you frequently do things that require lots of power, for instance video croping and editing. But for web surfing, statement processing, and majority of other prevalent computer functions they are fine, provided you never mind the tiny screen size. Thanks for sharing your ideas.
thank you chicken