wails icon indicating copy to clipboard operation
wails copied to clipboard

[v2] Can the background be transparent?

Open ZeronoFreya opened this issue 3 years ago • 11 comments

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

ZeronoFreya avatar Mar 29 '22 13:03 ZeronoFreya

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

leaanthony avatar Mar 29 '22 18:03 leaanthony

@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.

misitebao avatar Mar 30 '22 12:03 misitebao

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

leaanthony avatar Mar 30 '22 13:03 leaanthony

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

misitebao avatar Mar 30 '22 14:03 misitebao

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

leaanthony avatar Mar 30 '22 21:03 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

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

ZeronoFreya avatar Apr 01 '22 03:04 ZeronoFreya

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

leaanthony avatar Apr 06 '22 09:04 leaanthony

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

ZeronoFreya avatar Apr 06 '22 12:04 ZeronoFreya

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.

NanoNik avatar Jun 12 '22 14:06 NanoNik

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

leaanthony avatar Jun 14 '22 09:06 leaanthony

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

NanoNik avatar Jun 24 '22 22:06 NanoNik

@NanoNik still interested in this?

leaanthony avatar Oct 19 '22 11:10 leaanthony

@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.

NanoNik avatar Oct 23 '22 04:10 NanoNik

Is it still impossible to achieve transparent windows on Windows?

sohaha avatar Mar 31 '23 12:03 sohaha

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

claudioluciano avatar Apr 28 '23 02:04 claudioluciano

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

leaanthony avatar Aug 03 '23 22:08 leaanthony