Fabulous for Xamarin.Forms - Guide
- Getting started
- Basic Elements
- Lists and Tables
- Performance hints
- Multi-page applications and Navigation
- Extensions: FFImageLoading (image caching)
- Extensions: Maps (platform maps)
- Extensions: SkiaSharp (drawing 2D graphics)
- Extensions: OxyPlot (charting)
- Extensions: VideoManager (audio and video)
- Update and Messages
- Migration guide from v0.36 to v0.40
- Migration guide from v0.43 to v0.50
- Further Resources
SkiaSharp is a 2D graphics system for .NET powered by the open-source Skia graphics engine that is used extensively in Google products. You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text.
Fabulous.XamarinForms.SkiaSharp implements a view component for the type SKCanvasView.
Fabulous.XamarinForms.SkiaSharp, you must
- Add a reference to
SkiaSharp.Views.Formsacross your whole solution. This will add appropriate references to your platform-specific Android and iOS projects too.
- Next add a reference to
Fabulous.XamarinForms.SkiaSharpacross your whole solution.
After these steps you can use SkiaSharp in your view function. Here is a simple example of using SkiaSharp to draw a circle and respond to touch events:
open Fabulous.XamarinForms View.SKCanvasView(enableTouchEvents = true, paintSurface = (fun args -> let info = args.Info let surface = args.Surface let canvas = surface.Canvas canvas.Clear() use paint = new SKPaint(Style = SKPaintStyle.Stroke, Color = Color.Red.ToSKColor(), StrokeWidth = 25.0f) canvas.DrawCircle(float32 (info.Width / 2), float32 (info.Height / 2), 100.0f, paint) ), touch = (fun args -> printfn "touch event at (%f, %f)" args.Location.X args.Location.Y ) )
By default, the view will not be redrawn when the model changes. You should set
invalidate to true when you know that a redraw is needed. Set it back to false when done, otherwise it will be redrawn at each update.
View.SKCanvasView(..., invalidate = true)