{"id":545,"date":"2017-04-10T17:09:00","date_gmt":"2017-04-10T17:09:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=545"},"modified":"2025-02-25T13:28:43","modified_gmt":"2025-02-25T13:28:43","slug":"using-c-and-skiasharp","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/using-c-and-skiasharp","title":{"rendered":"Using C#, Xamarin and SkiaSharp to Delight and Amaze (Across Platforms)"},"content":{"rendered":"\n

What is SkiaSharp?<\/h2>\n\n\n\n
\"SkiaSharp\"<\/figure>\n\n\n\n

Tools like Xamarin<\/a> help you, at least, use a common programming language across all important platforms, but while that\u2019s great for helping you share the business logic for your application, it doesn\u2019t automatically make it easy to share UI logic.<\/p>\n\n\n\n

Xamarin\/Microsoft provide multiple tools to help share your UI implementation across different platforms. They created Xamarin.Forms<\/a> to help you abstractly define UI views for your application once, and then reuse them across supported platforms. Xamarin.Forms is very cool<\/em>, at least we think so, which is why we have a new product<\/a> available to make sure you can do even more awesome things<\/em> with Xamarin.Forms. But what if there\u2019s still something that Forms can\u2019t do, but you still need? Wouldn\u2019t it be great to render custom graphics across platforms in C#?<\/p>\n\n\n\n

Well, I wanted to do just this, a few years ago, but the challenge was that there was no cross platform C# 2D API available across all important platforms at the time. So, I created an abstraction around the various native 2D rendering APIs to let me write some rendering logic once, and have some abstraction layers convert it to the correct sequence of calls to the various native rendering APIs. What I found, though, is that there winds up being lots of interesting overhead using this path. My logic would build some 2D graphics primitives in C# that would then need to be represented, on Android, as Java objects, and then those Java objects would need to be represented as native classes down in the native rendering layer of Android, and so on and so forth for each platform. Having this many layers of abstraction was causing some not insignificant overhead when combined with the chattiness that you have using a 2D rendering API and complex 2D graphics.<\/p>\n\n\n\n

Well, Xamarin themselves must felt this same pain, because it lead them to create SkiaSharp<\/a>. SkiaSharp is a cross platform 2D graphics rendering API which you can use across a host of different platforms, including Android\/iOS platforms via Xamarin. SkiaSharp is some C# bindings directly around the C native API for the Skia<\/a> rendering library. Skia is a fast, open source rendering library that is heavily used in Android and the Chrome browser and numerous other high profile projects. With SkiaSharp in hand, you can do fast 2D graphics rendering across lots<\/em> of platforms with comparatively little overhead in your interaction with the API since the C# API is able to talk directly to the Skia native library. In this article, I\u2019ll lead you through how you can get started with the API.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

To start with, open Visual Studio and create a new cross platform project. This is one of the templates that Xamarin installs into Visual Studio.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

This can be made to be a Xamarin.Forms app, or a native app, depending on your preference. I just created a native app for the purposes of this demo, sharing code via a PCL (portable class library), rather than a shared project. This will create a host of default platforms associated with the template, and you can add additional projects, provided they also support SkiaSharp, as desired.<\/p>\n\n\n\n

When I selected a native cross platform app, it created a PCL project to share code between platforms, a Xamarin.Android project, and a Xamarin.iOS project, but I then proceeded to also add a WPF project and a UWP project into the mix, since both of these platforms also support SkiaSharp for rendering. I then added references to the PCL project to the two new projects I added to the solution.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

Next, you need to add some NuGet packages to the solution. If you right click on the solution node and select \u201cManage Nuget Packages for the Solution\u201d you should then be able to search online for and install SkiaSharp and SkiaSharp.Views into all projects in the solution. SkiaSharp.Views has some helper classes that help you bootstrap the rendering of SkiaSharp into a native UI view on your platform of choice, saving you some boilerplate logic. SkiaSharp.Views should be installed for all projects except for the PCL, which it provides no utility to (as it isn\u2019t bound to a particular UI platform).<\/p>\n\n\n\n

Our Goal<\/h2>\n\n\n\n

We\u2019ll start with something simple, by rendering a simple circle, but then we\u2019ll move onto something considerably more complicated. One of our older samples browsers had a neat animated iris effect:<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

Which was performed, I gather, by overlaying a bunch of images and then rotating them in different directions. In that case the images were static, but I was curious if you could, alternatively, simply put all the logic into a view and render it all dynamically. Let\u2019s move toward that goal.<\/p>\n\n\n\n

We\u2019ll start by leveraging SkiaSharp.Views to create a component called IrisView<\/strong> for Android. We\u2019ll later extend this further and then fill out the details for the other platforms.<\/p>\n\n\n\n

using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Text;\n \nusing Android.App;\nusing Android.Content;\nusing Android.OS;\nusing Android.Runtime;\nusing Android.Views;\nusing Android.Widget;\nusing SkiaSharp;\nusing Android.Util;\n \nnamespace SkiaSharpDemo.Droid\n{\n    public class IrisView\n        : SkiaSharp.Views.Android.SKCanvasView\n    {\n        private Handler _handler;\n \n        private void Initialize()\n        {\n            _handler = new Handler(Context.MainLooper);\n        }\n \n        public IrisView(Context context)\n            : base(context)\n        {\n            Initialize();\n        }\n \n        public IrisView(Context context, IAttributeSet attrs)\n            : base(context, attrs)\n        {\n            Initialize();\n        }\n        public IrisView(Context context, IAttributeSet attrs, int defStyleAttr)\n            : base(context, attrs)\n        {\n            Initialize();\n        }\n        protected IrisView(IntPtr javaReference, JniHandleOwnership transfer)\n            : base(javaReference, transfer)\n        {\n            Initialize();\n        }\n \n        protected override void OnDraw(SKSurface surface, SKImageInfo info)\n        {\n            base.OnDraw(surface, info);\n \n            \/\/Get the canvas from the skia surface.\n            var context = surface.Canvas;\n \n            \/\/Clear out the current content for the canvas.\n            context.DrawColor(SKColors.Transparent, SKBlendMode.Clear);\n \n            \/\/Determine the center for the circle.\n            var centerX = info.Width \/ 2.0f;\n            var centerY = info.Height \/ 2.0f;\n \n            \/\/Determine the radius for the circle.\n            var rad = Math.Min(info.Width, info.Height) \/ 2.0f;\n \n            \/\/Create the paint object to fill the circle.\n            using (SKPaint p = new SKPaint())\n            {\n                p.IsStroke = false;\n                p.IsAntialias = true;\n                p.Color = new SKColor(255, 0, 0);\n                \/\/Fill the circle.\n                context.DrawCircle(centerX, centerY, rad, p);\n            };\n        }\n    }\n}<\/pre>\n\n\n\n
Most of this code is boilerplate logic to extend one of the views that SkiaSharp.Views provides to be able to render content using SkiaSharp within a normal Android view. If we focus on the logic that does the painting:<\/p>\n\n\n\n
\/\/Get the canvas from the skia surface.\nvar context = surface.Canvas;\n \n\/\/Clear out the current content for the canvas.\ncontext.DrawColor(SKColors.Transparent, SKBlendMode.Clear);\n \n\/\/Determine the center for the circle.\nvar centerX = info.Width \/ 2.0f;\nvar centerY = info.Height \/ 2.0f;\n \n\/\/Determine the radius for the circle.\nvar rad = Math.Min(info.Width, info.Height) \/ 2.0f;\n \n\/\/Create the paint object to fill the circle.\nusing (SKPaint p = new SKPaint())\n{\n    p.IsStroke = false;\n    p.IsAntialias = true;\n    p.Color = new SKColor(255, 0, 0);\n    \/\/Fill the circle.\n    context.DrawCircle(centerX, centerY, rad, p);\n};<\/pre>\n\n\n\n
Here we:<\/p>\n\n\n\n