Transparent window has white background

[Yuvix25]

• Electron.NET Version 23.6.1
• .NET Core Version 7.0
• Node.js Version 18.12
• Target: Windows

I have created a window like so:

var window = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions()
{
   Resizable = false,
   Fullscreen = true,
   Minimizable = false,
   Movable = false,
   Frame = false,
   Transparent = true,
   BackgroundColor = "#00000000",
});
window.SetAlwaysOnTop(true, OnTopLevel.screenSaver);

Expecting the background the be transparent, but instead it is white. (The page itself only contains one <p> element, nothing more)
I tried adding some delay before calling CreateWindowAsync, as I saw it solved the issue for some people using normal Electron, but that did not help either.

Any idea how can I fix this?

[IgorVolod]

The white background on startup was the first issue I had to deal with since my app loads in the "dark" theme by default. Try this option. My white canvas has disappeared ... completely ...

//electron.net - start
builder.Services.AddElectron();
builder.WebHost.UseElectron(args);
if (HybridSupport.IsElectronActive)
{
    // Open the Electron-Window here
    Task.Run(async () => {
        var window = await Electron.WindowManager.CreateWindowAsync(
           new BrowserWindowOptions
              {
               Title = "Name app",
               BackgroundColor = "#111",
               Show = false,
               AutoHideMenuBar = true,
           });
        window.Maximize();
        window.OnClosed += () =>
        {
            Electron.App.Quit();
        };
    });
}

[GregorBiswanger]

I built a Blazor server app and it works without any problems. See the screenshot.

For this I changed the site.css in the wwwroot/css directory:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: transparent;
}

This is my Electron.NET startup code:

using ElectronNET.API;
using ElectronNET.API.Entities;
using ElectronNetTransparentWindow.Data;

var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseElectron(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

await app.StartAsync();


await Task.Run(async () =>
{
    Electron.App.CommandLine.AppendSwitch("enable-transparent-visuals");
    Electron.App.CommandLine.AppendSwitch("disable-gpu-compositing");

    var browserWindowOptions = new BrowserWindowOptions
    {
        Frame = false,
        Transparent = true
    };

    await Electron.WindowManager.CreateWindowAsync(browserWindowOptions);
});

await app.WaitForShutdownAsync();

did you make it?

[Yuvix25]

@GregorBiswanger Yes! That's it.
Your solution works perfectly 👌🏻

[Yuvix25]

While we're at it, do you know if it is possible to allow mouse clicks/keystrokes to go through the transparent bits and on to a background app?
So that it is still possible to interact with non-transparent elements, but you can also interact with whatever is running behind the app?

Alternatively, if that's not possible, is it possible to make my window completely ignore any sort of interaction, and let the background app have everything?

[FlorianRappl]

That is not (directly) possible (see electron/electron#1335). You can, however, use one of the workarounds in the linked issue to fake this behavior.

[Yuvix25]

Ok, there are a few good solution there indeed, thanks!