[v2] Can the background be transparent?

[ZeronoFreya]

v2@latest

I can only make the window semi-transparent, but can I make it fully transparent?

I don't know if you understand it, and if not, I can't explain more

System
------
OS:             Windows 10 Home China              // win11
Version:        2009 (Build: 22000)
ID:             21H2
Go Version:     go1.17.6
Platform:       windows
Architecture:   amd64

Dependency      Package Name    Status          Version
----------      ------------    ------          -------
WebView2        N/A             Installed       99.0.1150.55
npm             N/A             Installed       8.3.0
*upx            N/A             Available
*nsis           N/A             Available

---

I found a way, windows only
Use winapi to modify the window style

import (
"github.com/lxn/win"
)

// other code ...

func (a *App) startup(ctx context.Context) {
    hwnd := win.FindWindow(nil, syscall.StringToUTF16Ptr("Your App Title"))
    win.SetWindowLong(hwnd, win.GWL_EXSTYLE, win.GetWindowLong(hwnd, win.GWL_EXSTYLE)|win.WS_EX_LAYERED)
}

Disable WindowIsTranslucent

[leaanthony]

Hi! It looks like you are trying to open a ticket but haven't provided enough details.

• If you are reporting a bug, please provide clear, reproducible steps
• If you are using v1, use wails issue to report the issue
• If you are using v2, please include the output of wails doctor

[misitebao]

@leaanthony
I understand the meaning of this question. At present, the webview part of the Wails application can only be semi-transparent, not fully transparent. He hopes that the webview part can be fully transparent. This is convenient for developers to realize the special-shaped interface in combination with borderless.

[leaanthony]

It can be fully transparent, but you're not providing any information that the ticket template requests, such as platform.

[misitebao]

I have tested it many times on the windows platform, and it has always been impossible. I originally thought this was intentionally restricted.😂

[leaanthony]

It's possible on Windows just not exposed. It's also supported if you're running windows preview. The problem is, there's no indication on this ticket what OS the poster is talking about.

If you are using v2, please include the output of wails doctor

[ZeronoFreya]

It's possible on Windows just not exposed. It's also supported if you're running windows preview. The problem is, there's no indication on this ticket what OS the poster is talking about.

If you are using v2, please include the output of wails doctor

It's my fault, I did forget to specify the platform
win11
Please see the question for details

[leaanthony]

If you are using v2, please include the output of wails doctor

[ZeronoFreya]

If you are using v2, please include the output of wails doctor

I really don't understand what you want, wails doctor I've appended at the end of the question, or do you want to know the version number?

Wails CLI v2.0.0-beta.34

System
------
OS:             Windows 10 Home China
Version:        2009 (Build: 22000)
ID:             21H2
Go Version:     go1.17.6
Platform:       windows
Architecture:   amd64

Dependency      Package Name    Status          Version
----------      ------------    ------          -------
WebView2        N/A             Installed       100.0.1185.29
npm             N/A             Installed       8.3.0
*upx            N/A             Available
*nsis           N/A             Available

[NanoNik]

I've met the same issue when tried to make my window background transparent. The solution provided in the first post (adding WS_EX_LAYRED) will work only if user have DWM composition enabled, if it is not - window will be invisible.

So before adding WS_EX_LAYRED you should check for composition enabled using DwmIsCompositionEnabled.

My initial goal was to make window borders rounded (on Windows 10 and below), as a workaround for PC's without DWM composition I used SetWindowRgn.

[leaanthony]

@NanoNik Is this something you could consider making a PR for?

[NanoNik]

@leaanthony I'll see what I can do with it in a few days

[leaanthony]

@NanoNik still interested in this?

[NanoNik]

@leaanthony Yes, I'm still intrested in this feature, actually I already use somewhat transparent window in production, but on some systems (especially running Windows 7) even with DWM enabled sometimes it's just doesn't work, so I'm not really sure how to fix or debug it. I was able to reproduce it in a VM only with DWM disabled.

[sohaha]

Is it still impossible to achieve transparent windows on Windows?

[claudioluciano]

any news on the transparent issue?
It's possible to the background be translucid at least ?

[leaanthony]

This has been implemented for v3. If anyone wants to backport, please raise a PR 👍

[gunter423]

Hello, we've been able to set full transparency on Windows 10 and Windows 11 with the following code :

import (
"github.com/lxn/win"
)

// other code ...

func (a *App) startup(ctx context.Context) {
    hwnd := win.FindWindow(nil, syscall.StringToUTF16Ptr("Your App Title"))
    win.SetWindowLong(hwnd, win.GWL_EXSTYLE, win.GetWindowLong(hwnd, win.GWL_EXSTYLE)|win.WS_EX_LAYERED)
}

and set this in main.go :

err = wails.Run(&options.App{
...your_options,
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},
Windows: &windows.Options{
             WebviewIsTransparent: true,
             WindowIsTranslucent: false,
      }
})