Search code examples
razorblazormauiskiasharpskia

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?


Solution

  • Short Answer: No; Not Possible. (Unless I am fundamentally wrong about some detail below.)

    Long Answer:

    • In Blazor Hybrid, the view is essentially a browser window.
    • For what you seek to be possible, it has to be fully compatible with web standards.
    • So even though this is inside a desktop app, it comes down to asking how to do SkiaSharp inside a browser.
    • Therefore, it has to run in WASM.

    OTOH, you CAN run SkiaSharp in the NOT BLAZOR part of Maui.

    But that won't be inside a Blazor Component.

    If you've laid out a Maui screen (window) such that Blazor WebView is only part of what is showing, SkiaSharp could be somewhere on the screen; just not integrated into Blazor.

    Its even possible to OVERLAY other Maui controls on top of the Blazor View. But the Maui controls and the Blazor content won't be aware of each other's location on the screen.


    Using SkiaSharp in Maui:

    In XAML:

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

    In c# code-behind:

    using SkiaSharp;
    using SkiaSharp.Views.Forms;
    ...
    
        private void OnYourPaintThisSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            ... // your paint code here
        }