Cross-platform apps are popular for many years as it is usually cost-effective, easy to deploy, and supports code reusability. However, some projects challenge you with UI designs. This challenge is solved by toolkit like Xamarin.Forms. However, earlier this toolkit was not well versed with cross-platform graphics APIs. To create some interesting graphics across the platform, first, you need to code using the native APIs of your platform. Then, to render the logic across platforms, you need to create abstraction layers and create a call sequence. This whole process is interesting, however, this is a hideous task when you are not satisfied with your creativity or when you need to bring in complex graphics or more ideas with gradients, textures, and so on across platforms.

Later, Xamarin.Forms collaborated with something different to help you solve this issue and that is SkiaSharp. SkiaSharp is based on Google’s Skia library, a cross-platform 2D graphics API for .NET platforms. The amalgamation of Xamarin.Forms and SkiaSharp is fascinating.

Something refreshing about SkiaSharp is that you can create custom controls very easily by drawing it on a UI canvas. It can be used for mobile apps, desktop apps, and so on to render images. SkiaSharp library provides Xamarin bindings to Skia API and is available for all platforms. The interesting part is that every event you code with this API quickly appears on your canvas. Don’t you feel artistic? How about using SkiaSharp in Tizen .NET apps.

Before going into Tizen .NET apps, let’s see what is in the store for us in SkiaSharp.

SkiaSharp

The best part of SkiaSharp is that you will have a canvas of your own when you start designing — not joking!

SkiaSharp has its on canvas, SKCanvas property that helps you to showcase your creativity.

Following are the main properties of SkiaSharp:

• SKCanvas
• SKGLView
• SKPaint
• SKPath
• SKShader

These properties will come handy when you start drawing. Whenever you call the SkiaSharp API, the result appears on your canvas and you can visualize your creativity. To visualize the same, you need an extension library, Views. There are two types of views:

• SKCanvasView: Uses CPU in the backend and is used for simple and easy graphic rendering.
• SKGLView: Uses OpenGL in the backend and is used for complex renderings.

If you are a beginner with SkiaSharp, it is recommended to start with the canvas view.

When you start drawing, a PaintSurface event is triggered. Here, you can also use the OnPaintSurface method or a handler of the PaintSurface event. To proceed with, you have SKPaint class that helps you with color, style, blur, and so on. To create complex shapes like line segments, quadratic curves, cubic curves, and so on, you have the SKPath class. For more artistic features, you have SKShader that specifies the source color for what is being drawn.

You also have a coordinate system with SKPoint, SKRect, SKRegion, and so on.

Now, you know what all are there. To start drawing, follow these guidelines:

• Allocate a memory block as a canvas for SkiaSharp.
• Create a canvas on this memory block and render text or image that you want on this canvas.
• Create a 2D texture from this memory block.
• Draw a 2D texture with graphics APIs.

Let’s see how to use SkiaSharp in Tizen .NET apps.

How to use SkiaSharp in Tizen .NET apps

Before beginning to draw anything with SkiaSharp, you need the following directives of SkiaSharp:

• using SkiaSharp;
• using SkiaSharp.Views.Forms;

Prerequisites

1. Ensure that the target framework is changed to your current Tizen version.

        To change the target framework of your app, open your project file (.csproj) and change `netcoreapp2.0` to `Tizen5.5`:

<PropertyGroup>
    <OutputType>Exe</OutputType>
	<TargetFramework>Tizen5.5</TargetFramework>
</PropertyGroup>

       Note:

        You can use your respective Tizen version.

2. Install the correct NuGet package for SkiaSharp.

        To work with SkiaSharp in Tizen .NET apps, you need to install SkiaSharp.Views.Forms:

1. In Solution Explorer, right-click your project name and select Manage NuGet Packages.

2. Select the Browser tab and choose nugget.org as the package source.

3. In the search bar, enter SkiaSharp and select SkiaSharp.Views from the result and click Install.

3. Create a basic Tizen .NET UI application.

     In the Tizen .NET UI application, you can use SkiaSharp for shapes, text, images, and so on.

Draw a text with SkiaSharp

SkiaSharp can be used according to your requirements.  

Let’s see how to use SkiaSharp commands to draw a simple text, SkiaSharp in Tizen .NET.

1. In your Tizen .NET UI application, create SKCanvasView.
2. Add the PaintSurface event handler of SKCanvasView.
3. In the PaintSurface event handler, create a canvas.
4. Declare and set properties such as scale, size, paint, and coordinates according to your requirement.
5. Use the DrawText method of SKCanvas to draw your text:

canvas.DrawText("SkiaSharp in Tizen.NET", coordinate, paint);

6. Build the app and run.

Here you are! Ready with the basics. Now, you can try more complex graphics using the samples available.

It is said that you don’t have to re-invent the wheel, so don’t re-invent but be different and creative in what you are doing. I found a way to be different while creating user controls using SkiaSharp.
It is good to play around with the technical tools of the trade and its design fundamentals when you are learning something new. So, try SkiaSharp and its amazing features using Tizen .NET and enjoy the powerful APIs.

Let's bring life to designs!