Getting Started with SkiaSharp with Xamarin Forms

1
42

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:
    ="1.0"="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) { SKSurface vSurface = args.Surface; SKCanvas vCanvas = vSurface.Canvas; vCanvas.Clear(); 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); vCanvas.DrawLine(100, 100, 900, 900, vBlackPaint); vCanvas.DrawLine(900, 100, 100, 900, vBlackPaint); 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); 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:
       SKSurface vSurface = args.Surface; SKCanvas vCanvas = vSurface.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:
       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 🙂🙂🙂🙂

License

Share

About the Author

Hi There, I am an IT professional with 14 years of experience in architecting, designing and building IT solutions for complex business needs in form of mobile & web applications using Microsoft technologies. Currently working in an multinational company in India as Solutions Architect. The articles here are sourced from my blog : http://err2solution.com/

Comments and Discussions

— There are no messages in this forum —

1 COMMENT

  1. Spot on with this write-up, I honestly believe that
    this website needs a lot more attention. I’ll probably be returning to read more, thanks for the information!

LEAVE A REPLY