[v2] Can the background be transparent? #1296

ZeronoFreya · 2022-03-29T13:50:14Z

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

The text was updated successfully, but these errors were encountered:

leaanthony · 2022-03-29T18:53:59Z

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 · 2022-03-30T12:39:49Z

@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 · 2022-03-30T13:56:46Z

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

misitebao · 2022-03-30T14:33:02Z

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

leaanthony · 2022-03-30T21:14:22Z

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 · 2022-04-01T03:05:28Z

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 · 2022-04-06T09:37:56Z

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

ZeronoFreya · 2022-04-06T12:34:48Z

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 · 2022-06-12T14:14:47Z

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 · 2022-06-14T09:19:51Z

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

NanoNik · 2022-06-24T22:10:02Z

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

leaanthony · 2022-10-19T11:24:52Z

@NanoNik still interested in this?

NanoNik · 2022-10-23T04:51:27Z

@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 · 2023-03-31T12:41:05Z

Is it still impossible to achieve transparent windows on Windows?

claudioluciano · 2023-04-28T02:13:44Z

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

leaanthony · 2023-08-03T22:42:50Z

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

gunter423 · 2024-05-14T21:35:34Z

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,
      }
})

JadeVane · 2024-08-06T03:49:45Z

I am very happy to see that the effect I want to see is achieved on Windows, but now I want to ask a slightly off-topic question. Can parameters similar to WebviewIsTransparent be implemented on Linux?

The current situation is that only the WindowIsTranslucent parameter is available, so in Linux , either create a window with both background color and shadow, or remove both, which means that if I want to create a window with rounded corners, I can only remove the background color and shadow at the same time, so I need to implement the window shadow effect by myself, but in fact I did not find the parameters to set the window shadow in options.

So I would like to know Are there any plans now to implement the WebviewIsTransparent parameter on Linux as well?

Some necessary information below

# Wails
Version         | v2.9.1
Package Manager | apt   

# System
┌─────────────────────────────────────────────────────────────────────────────────┐
| OS           | Ubuntu                                                           |
| Version      | 22.04                                                            |
| ID           | ubuntu                                                           |
| Go Version   | go1.22.3                                                         |
| Platform     | linux                                                            |
| Architecture | amd64                                                            |
| CPU          | AMD Ryzen 5 PRO 4650U with Radeon Graphics                       |
| GPU          | Renoir (Advanced Micro Devices, Inc. [AMD/ATI]) - Driver: amdgpu |
| Memory       | 23GB                                                             |
└─────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌──────────────────────────────────────────────────────────────────────────┐
| Dependency | Package Name          | Status    | Version                 |
| *docker    | docker.io             | Installed | 24.0.7                  |
| gcc        | build-essential       | Installed | 12.9ubuntu3             |
| libgtk-3   | libgtk-3-dev          | Installed | 3.24.33-1ubuntu2.2      |
| libwebkit  | libwebkit2gtk-4.0-dev | Installed | 2.44.2-0ubuntu0.22.04.1 |
| npm        | npm                   | Installed | 10.5.0                  |
| *nsis      | nsis                  | Available | 3.08-2                  |
| pkg-config | pkg-config            | Installed | 0.29.2                  |
└──────────────────────── * - Optional Dependency ─────────────────────────┘

# Diagnosis
Optional package(s) installation details: 
  - nsis: sudo apt install nsis

jrtp · 2024-08-18T12:49:24Z

Does not work for me, the window is always showing the background color set in main.go without the 0 alpha on windows 11. Is there something else that must be taken care of?

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,
      }
})

AlexyL · 2024-09-23T04:00:38Z

@jrtp Did you replace "Your App Title" with your actual app title?

ZeronoFreya added the Enhancement New feature or request label Mar 29, 2022

leaanthony added this to the v2.5.0 milestone Apr 6, 2022

leaanthony modified the milestones: v2.5.0, v2.2.0 Jun 22, 2022

leaanthony added the TODO The issue is ready to be developed label Jul 3, 2022

stffabi mentioned this issue Oct 10, 2022

How to create a transparent window #1952

Closed

leaanthony added this to Wails Backlog Oct 16, 2022

leaanthony moved this to 🆕 TODO in Wails Backlog Oct 16, 2022

leaanthony modified the milestones: v2.2, v2.3.0 Nov 22, 2022

leaanthony removed this from the v2.4.0 milestone Dec 29, 2022

leaanthony closed this as completed Aug 3, 2023

leaanthony mentioned this issue Mar 18, 2024

Hope to support setting transparent background #3321

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v2] Can the background be transparent? #1296

[v2] Can the background be transparent? #1296

ZeronoFreya commented Mar 29, 2022 •

edited

Loading

leaanthony commented Mar 29, 2022 •

edited

Loading

misitebao commented Mar 30, 2022 •

edited

Loading

leaanthony commented Mar 30, 2022

misitebao commented Mar 30, 2022

leaanthony commented Mar 30, 2022 •

edited

Loading

ZeronoFreya commented Apr 1, 2022

leaanthony commented Apr 6, 2022

ZeronoFreya commented Apr 6, 2022 •

edited

Loading

NanoNik commented Jun 12, 2022

leaanthony commented Jun 14, 2022 •

edited

Loading

NanoNik commented Jun 24, 2022

leaanthony commented Oct 19, 2022

NanoNik commented Oct 23, 2022

sohaha commented Mar 31, 2023

claudioluciano commented Apr 28, 2023

leaanthony commented Aug 3, 2023

gunter423 commented May 14, 2024

JadeVane commented Aug 6, 2024 •

edited

Loading

jrtp commented Aug 18, 2024

AlexyL commented Sep 23, 2024

[v2] Can the background be transparent? #1296

[v2] Can the background be transparent? #1296

Comments

ZeronoFreya commented Mar 29, 2022 • edited Loading

v2@latest

leaanthony commented Mar 29, 2022 • edited Loading

misitebao commented Mar 30, 2022 • edited Loading

leaanthony commented Mar 30, 2022

misitebao commented Mar 30, 2022

leaanthony commented Mar 30, 2022 • edited Loading

ZeronoFreya commented Apr 1, 2022

leaanthony commented Apr 6, 2022

ZeronoFreya commented Apr 6, 2022 • edited Loading

NanoNik commented Jun 12, 2022

leaanthony commented Jun 14, 2022 • edited Loading

NanoNik commented Jun 24, 2022

leaanthony commented Oct 19, 2022

NanoNik commented Oct 23, 2022

sohaha commented Mar 31, 2023

claudioluciano commented Apr 28, 2023

leaanthony commented Aug 3, 2023

gunter423 commented May 14, 2024

JadeVane commented Aug 6, 2024 • edited Loading

jrtp commented Aug 18, 2024

AlexyL commented Sep 23, 2024

ZeronoFreya commented Mar 29, 2022 •

edited

Loading

leaanthony commented Mar 29, 2022 •

edited

Loading

misitebao commented Mar 30, 2022 •

edited

Loading

leaanthony commented Mar 30, 2022 •

edited

Loading

ZeronoFreya commented Apr 6, 2022 •

edited

Loading

leaanthony commented Jun 14, 2022 •

edited

Loading

JadeVane commented Aug 6, 2024 •

edited

Loading