Getting Started with SkiaSharp with Xamarin Forms

A couple of months back I wrote about Using OxyPlot with Xamarin Forms, where we created a few graphs to show data, what if a situation arises where we have to draw something like following Image:

Oxyplot doesn’t support this, but we have another open source .Net library to our rescue it’s Skiasharp. It’s the fully cross-platform, rich 2D graphics drawing API powered by Google’s Skia library. This post will be a step by step guide to create an image same as one shown above using SkiaSharp library in a Xamarin Forms App. So let’s get started

1. Create a new Xamarin Forms project with PCL (I prefer PCL over Shared project but that’s just me you can use that too.
2. Right click on the Solution File and select Manage NuGet Packages For Solution… from the context menu, it will open NuGet-Solution window.
3. Click on the Browse tab if it’s not selected by default and write SkiSharp in the search text-box, it will list all the SkiaSharp libraries available in NuGet.The one which is used for Xamarin Forms is called SkiaSharp.View.Forms. select it and install it as shown in below image.
4. Once the NuGets are installed, we can add the SkiaSharp view to the XAML. Here, we’re adding a SKCanvasView, the CPU-based drawing surface, HTML developers can relate this to their canvas :). Also we need to register the SkiaSharp assembly to use in XAML just like any other third party control. Following is the code for MainPage.Xaml of sample application:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:SkiaSharpEx"
                xmlns:sk="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
                x:Class="SkiaSharpEx.MainPage"
                Title="SkiaSharp Forms Example"
                Padding="10">
       <sk:SKCanvasView x:Name="canvasView"
                              Grid.Row="1"
                              Grid.Column="0"
                              Grid.ColumnSpan="2"
                              PaintSurface="OnCanvasViewPaintSurface" />
   </ContentPage>

5. 5. The main event which is used to draw anything on SKCanvasView is PaintSurface and as you can see from the above code we are handling this event in OnCanvasViewPaintSurface method.
6. 6. Following is the code ofstrong>OnCanvasViewPaintSurface method.

       void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
           {
   //Initialize the Canvas
               SKSurface vSurface = args.Surface;
               SKCanvas vCanvas = vSurface.Canvas;
   //Clear the Canvas
               vCanvas.Clear();
   //Creating the Paint object to color the Items 
               SKPaint vBlackPaint = new SKPaint
               {
                   Color = SKColors.Black,
                   StrokeWidth=5,
                   StrokeCap=SKStrokeCap.Round,
                   TextSize = 60             
               };
               SKPaint vWhitePaint = new SKPaint
               {
                   Color = SKColors.White
               };
   
               var vRectangle = new SKRect(100, 100, 900, 900);
               vCanvas.DrawRect(vRectangle,vBlackPaint);
               var vWhiteRectangle = new SKRect(105, 105, 895, 895);
               vCanvas.DrawRect(vWhiteRectangle, vWhitePaint);
   
               //Diagnol Lines
               vCanvas.DrawLine(100, 100, 900, 900, vBlackPaint);
               vCanvas.DrawLine(900, 100, 100, 900, vBlackPaint);
               //Drawing the Numbers between the lines
               vCanvas.DrawText("1", 500, 300, vBlackPaint);
               vCanvas.DrawText("2", 260, 200, vBlackPaint);
               vCanvas.DrawText("3", 150, 350, vBlackPaint);
               vCanvas.DrawText("4", 250, 500, vBlackPaint);
               vCanvas.DrawText("5", 150, 700, vBlackPaint);
               vCanvas.DrawText("6", 260, 800, vBlackPaint);
               vCanvas.DrawText("7", 500, 700, vBlackPaint);
               vCanvas.DrawText("8", 670, 830, vBlackPaint);
               vCanvas.DrawText("9", 780, 700, vBlackPaint);
               vCanvas.DrawText("10", 670, 500, vBlackPaint);
               vCanvas.DrawText("11", 780, 350, vBlackPaint);
               vCanvas.DrawText("12", 670, 200, vBlackPaint);
               //The Side lines for creating other boxes 
               vCanvas.DrawLine(100, 500, 500, 100, vBlackPaint);
               vCanvas.DrawLine(100, 500, 500, 900, vBlackPaint);
               vCanvas.DrawLine(500, 100, 900, 500, vBlackPaint);
               vCanvas.DrawLine(500, 900, 900, 500, vBlackPaint);
           }

7. 7. OnCanvasViewPaintSurface Method Explained:
   1. In the above code first we are initializing the Canvas by pulling the objects from SKPaintSurfaceEventArgs of the method and then clearing it so that whenever this event is executed a fresh graphic is drawn. as shown in following three lines of code:

      //Initialize the Canvas
                  SKSurface vSurface = args.Surface;
                  SKCanvas vCanvas = vSurface.Canvas;
      //Clear the Canvas
                  vCanvas.Clear();

      The SKSurface is the layer that directs drawing commands from SkiaSharp onto the underlying native drawing area and SKCanvas is the layer that translates the drawing commands, such as DrawRect and DrawPath, into the appropriate commands for drawing on the current surface.

   2. The next main item needed for drawing is SKPaint which is used to set the Color of the figure to be drawn, Fontsize (if text is to be written) and other properties needed for beautification of the graphic. In our method this is the main SKPaint object which is used to draw:

      //Creating the Paint object to color the Items 
                  SKPaint vBlackPaint = new SKPaint
                  {
                      Color = SKColors.Black,
                      StrokeWidth=5,
                      StrokeCap=SKStrokeCap.Round,
                      TextSize = 60             
                  };

   3. Then we have used the common methods like DrawRect, DrawLine, DrawText for drawing the the Kundali Image as shown in the beginning of the blog. The units used here are device independent units which are managed by Xamarin & SkiaSharp according to the screen resolution of the device.

This is how the output of above code looks in Android Emulator:

The sample code given in this article are published on Github. This article has just touched the surface of using SkiaSharp library to create simple Kundali structure, you can experiment more with it by going through the Xamarin Forms SkiaSharp Documentation. Let me know if I have missed anything or need any other example.

Happy Coding