SkiaSharp Graphics in Xamarin.Forms
Use SkiaSharp for 2D graphics in your Xamarin.Forms applications
SkiaSharp is a 2D graphics system for .NET and C# 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. See the 2D Drawing guide for more general information about the SkiaSharp library and some other tutorials.
This guide assumes that you are familiar with Xamarin.Forms programming.
Webinar: SkiaSharp for Xamarin.Forms
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.
If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.
In any C# page that uses SkiaSharp you'll want to include a
using directive for the
SkiaSharp namespace, which encompasses all the SkiaSharp classes, structures, and enumerations that you'll use in your graphics programming. You'll also want a
using directive for the
SkiaSharp.Views.Forms namespace for the classes specific to Xamarin.Forms. This is a much smaller namespace, with the most important class being
SKCanvasView. This class derives from the Xamarin.Forms
View class and hosts your SkiaSharp graphics output.
SkiaSharp.Views.Forms namespace also contains an
SKGLView class that derives from
View but uses OpenGL for rendering graphics. For purposes of simplicity, this guide restricts itself to
SKCanvasView, but using
SKGLView instead is quite similar.
Some of the simplest graphics figures you can draw with SkiaSharp are circles, ovals, and rectangles. In displaying these figures, you will learn about SkiaSharp coordinates, sizes, and colors. The display of text and bitmaps is more complex, but these articles also introduce those techniques.
A graphics path is a series of connected straight lines and curves. Paths can be stroked, filled, or both. This article encompasses many aspects of line drawing, including stroke ends and joins, and dashed and dotted lines, but stops short of curve geometries.
Transforms allow graphics objects to be uniformly translated, scaled, rotated, or skewed. This article also shows how you can use a standard 3-by-3 transform matrix for creating non-affine transforms and applying transforms to paths.
The exploration of paths continues with adding curves to a path objects, and exploiting other powerful path features. You'll see how you can specify an entire path in a concise text string, how to use path effects, and how to dig into path internals.
Bitmaps are rectangular arrays of bits corresponding to the pixels of a display device. This series of articles shows how to load, save, display, create, draw on, animate, and access the bits of SkiaSharp bitmaps.
Effects are properties that alter the normal display of graphics, including linear and circular gradients, bitmap tiling, blend modes, blur, and others.
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.