I ❤️ .NET

Table of Contents

1. What we gonna do?
2. Why we gonna do?
3. How we gonna do?
4. Summary

What we gonna do?

In this article let's learn how to use libraries written in other languages like C/C++ in Blazor WebAssembly directly in browser. Thanks to the fact that we have blazor running on WebAssembly. we also get access to other things. All these are made possible with WebAssembly.

Why we gonna do?

The main reason to use libraries written in other languages is that it gives us access to powerful and highly optimized code that is already battle tested and refined without reinventing the wheel. These libraries performs the task at near Native speeds and WebAssembly gives us the ability to run these code directly in browser with similar performance like how we run in desktop machine without need of javascript.

For example, we can take graphic libraries already written in other languages and reuse them without reinventing the wheel in dotnet. Skia library written in C++ is a good example. It is a powerful 2D graphics library that is already used in android, chrome, flutter to render highly quality graphics.

How we gonna do?

All you need to do is,

1. Create a new standalone Blazor WebAssembly project.

2. Add a Test.c file to the project.

   Code Sample - Simple C Test file

3. Add a NativeFileReference for Test.c in the app's project file.

   Code Sample - NativeFileReference for Test.c

4. In a Razor component, add a DllImportAttribute for the fact function in the generated Test library and call the fact method from .NET code in the component.

   Code Sample - Calling C function from C#
5. When you build the app with the .NET WebAssembly build tools installed, the native C code is compiled and linked into the .NET WebAssembly runtime (dotnet.wasm). After the app is built, run the app to see the rendered factorial number.

That's a very simple and basic example. Let's try some complex example like generating a .NET logo using Skia Sharp library in Blazor WebAssembly.

1. Install the SkiaSharp.Views.Blazor NuGet package in your Blazor application.
2. The SKCanvasView component is used to render SkiaSharp graphics. It triggers the OnPaintSurface event whenever the canvas needs to be redrawn.
3. canvas.Clear(SKColors.Transparent); clears the canvas with a transparent color to ensure a clean rendering surface.
4. A square background is drawn using SKPaint with the fill style and a purple color #512bd4.
5. The canvas.DrawRect method is used to draw a rectangle spanning the entire canvas dimensions (info.Width and info.Height).
6. The .NET text is drawn using SKFont and SKPaint.
7. SKFont defines the font style and size. The font size is calculated as 20% of the canvas width (info.Width * 0.2f).
8. SKPaint specifies the text color (white) and enables anti-aliasing for smoother edges.
9. The text's bounds are measured using the font.MeasureText method with text.AsSpan(), which calculates the size of the text in pixels and stores it in the bounds variable.
10. The text is centered by aligning its midpoint (bounds.MidX and bounds.MidY) with the center of the canvas (info.Width / 2 and info.Height / 2).
11. The canvas.DrawText method draws the .NET text at the calculated x and y positions.

Why Use SkiaSharp in Blazor?

• Cross-Platform: SkiaSharp works seamlessly across multiple platforms.
• High Performance: It leverages native graphics rendering for smooth and fast visuals.
• Flexibility: Easily create complex graphics, animations, and custom designs.

Summary