SkiaSharp in Blazor for desktop app without WASM ( Blazor Hybrid? )

I want to use SkiaSharp in a Blazor desktop app ( Windows, Mac, Linux, etc. )

I know about Blazor Hybrid ( Blazor Desktop ) but I didn't find any way to integrate SkiaSharp.

So basically what I want is a way to use SkiaSharp in a Blazor desktop app but without WASM. Does such a thing exist?

Blazor Hybrid does not compile to WASM.

Reference: .Net 8.0 / Blazor Hybrid / full access to native capabilities:

Blazor Hybrid apps have full access to native client API capabilities via .NET native app frameworks. In Blazor Hybrid apps, Razor components run directly in the native app, not on WebAssembly.

This means that in "Maui Blazor Hybrid", Blazor is always "without WASM".

---

Details:

BlazorWebView:

.Net Maui BlazorWebView is a control that enables you to host a Blazor web app in your .NET MAUI app. ...
The Razor components run natively in the .NET process and render web UI to an embedded web view control.

Compare this to using Blazor with ASP.NET for a client/server web setup.
"Razor components run natively" is like "server rendering" in ASP.NET Core. Razor's C# code runs just like any other C# code in your app: JIT-compiled (or AOT pre-compiled) to the device's assembly language.

"embedded web view control" acts as the "browser client". Razor sends it HTML representing current state of the page.

• User actions (such as buttons) are signaled back to the Razor code in your app.
• Optionally, JS Interop can be used to run JavaScript inside the "web view control".

---

What is BlazorWebView?

The "Blazor web view control" is a Maui Control (aka View) that wraps a native WebView provided by the device's OS:

• On Windows WinUI3, BlazorWebView is a Microsoft.UI.Xaml.Controls.WebView2.
• On Android, BlazorWebView is an Android.WebKit.WebView.
• On iOS, BlazorWebView is a WebKit.WKWebView.

Inside BlazorWebView, Razor components display HTML controls, with css styling and C# "code behind".

If desired, a BlazorWebView can be used in a visual tree (a GUI layout) with other "MAUI Controls", typically defined with XAML, though they can also be dynamically added via C#.

"MAUI controls" here refers to MAUI / User Interface / Controls; the cross-platform UI that is the evolution of Xamarin Forms.

---

Using SkiaSharp with Blazor

There are two different ways to use SkiaSharp in Maui Blazor:

1. SkiaSharp as a Maui Control (aka View):

• namespace SkiaSharp.Views.Maui.Controls, class SKCanvasView or SKGLView
• Source code

2. SkiaSharp as a Blazor customized HTML Canvas:

• namespace SkiaSharp.Views.Blazor, class SKCanvasView or SKGLView
• Source code

---

1. SkiaSharp as a Maui Control (aka View)

In this layout, the SkiaSharp view (SK..View) (SKCanvasView or SKGLView) is a separate Maui Control; it is not inside the BlazorWebView. It is not a Razor Component. It is not part of app's HTML layout.

It is possible to OVERLAY the SK..View on top of BlazorWebView.
(And optionally other MAUI Controls).
But the SK..View and the Blazor content (Razor components) won't be aware of each other's location on the screen.

---

Using Maui.SkiaSharp

.NET MAUI - SkiaSharp code sample

• In your class MauiProgram, method CreateMauiApp(),
• • add reference:

using SkiaSharp.Views.Maui.Controls.Hosting;

• • add one line:

builder
.UseMauiApp<App>()
.UseSkiaSharp()    // <-- add this line
...

• Include Nuget SkiaSharp.Views.Maui.Controls. This will pull in other needed SkiaSharp nugets.
• Namespace: SkiaSharp.Views.Maui.Controls
• Class: SKCanvasView.

In XAML:

<ContentPage ...
    xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
    x:Class=...>
...
    <skia:SKCanvasView ... PaintSurface="OnYourPaintThisSurface" ... />

In c# code-behind:

using SkiaSharp;
using SkiaSharp.Views.Maui.Controls;
...

    private void OnYourPaintThisSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        ... // your paint code here
    }

---

2. SkiaSharp as a Blazor customized HTML Canvas:

In this layout, the SkiaSharp view (SK..View) (SKCanvasView or SKGLView) is inside the Blazor Component; it is part of the HTML layout ("HTML hierarchy").

TODO

---

Using Blazor.SkiaSharp

TODO