1

I am working on a cross platform app in Flutter and I want to launch an app with a translucent background without title bar and without the window control buttons. In the bottom right corner of the screen.

It seems to work well but when launching the app it will first show an border and title bar. Then when I start to resize the window it will look like I intended.

This is the code I used for the effect:

HWND window = CreateWindow(
     window_class, title.c_str(), WS_OVERLAPPEDWINDOW,
     Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
     Scale(size.width, scale_factor), Scale(size.height, scale_factor),
     nullptr, nullptr, GetModuleHandle(nullptr), this);

// Hide the window control buttons (minimize, maximize, close)
SetWindowLong(window, GWL_STYLE, GetWindowLong(window, GWL_STYLE) & ~WS_SYSMENU);

// Hide the window titlebar
SetWindowLong(window, GWL_STYLE, GetWindowLong(window, GWL_STYLE) & ~WS_CAPTION);

And this is what it looks like when the app launches:

image

This is how I want the app to launch (after resizing, it will look like this):

image

Remy Lebeau
  • 555,201
  • 31
  • 458
  • 770
Lau Dijksterhuis
  • 17
  • 2
  • This is probably answered [here](https://stackoverflow.com/questions/7442939/opening-a-window-that-has-no-title-bar-with-win32) – user20716902 May 03 '23 at 15:08
  • 4
    Also you don't want to be using `WS_OVERLAPPEDWINDOW` as that includes `WS_CAPTION` , `WS_SYSMENU` ,`WS_THICKFRAME` etc.. you could proably replace with just the minimal `WS_POPUP` – user20716902 May 03 '23 at 15:19
  • Hi @user20716902, I have tried that as well, but the problem is: the corners are not rounded (Windows 11) and I want it to have a look and feel like the rest of Windows 11 – Lau Dijksterhuis May 03 '23 at 15:48

1 Answers1

3

You should be specifying only the styles you actually want in the CreateWindow() call itself, rather than removing the unwanted styles after the window has been created.

For instance, you could do:

CreateWindow(..., WS_OVERLAPPEDWINDOW & ~(WS_SYSMENU | WS_CAPTION), ...);

which is identical to:

CreateWindow(..., WS_OVERLAPPED | WS_THICKFRAME | WS_MINIMIZEBOX | WS_MAXIMIZEBOX, ...);

But, since WS_SYSMENU is not being used, you can then omit the 2 WS_...BOX styles:

CreateWindow(..., WS_OVERLAPPED | WS_THICKFRAME, ...);

And, since you are disabling the title bar anyway, you don't really want WS_OVERLAPPED (which has a title bar), so you should likely be using WS_POPUP instead, as @user20716902 mentioned:

CreateWindow(..., WS_POPUP | WS_THICKFRAME, ...);
Remy Lebeau
  • 555,201
  • 31
  • 458
  • 770
  • I have tried what you & @user20716902 mention, however, using `WS_POPUP | WS_BORDER` will result in a non translucent & square box. But I want a border radius and a transparent background... So do you know how to add them? – Lau Dijksterhuis May 03 '23 at 15:59
  • I think it works! I added the `WS_EX_APPWINDOW` to the input making it: ```CreateWindow( window_class, title.c_str(), (WS_POPUP | WS_BORDER | WS_EX_APPWINDOW), Scale(origin.x, scale_factor), Scale(origin.y, scale_factor), Scale(size.width, scale_factor), Scale(size.height, scale_factor), nullptr, nullptr, GetModuleHandle(nullptr), this);``` and that creates the desired window (rounded, translucent and without title / buttons) – Lau Dijksterhuis May 03 '23 at 16:07
  • 1
    @LauDijksterhuis `WS_EX_APPWINDOW` is an *extended* window style (hence the `EX`), you can't use extended styles with `CreateWindow()`, you need to use `CreateWindowEx()` instead. However, `WS_EX_APPWINDOW` has the same numeric value as `WS_THICKFRAME`, so what you are really doing is: `CreateWindow(..., WS_POPUP | WS_BORDER | WS_THICKFRAME, ...);` I have updated my answer. – Remy Lebeau May 03 '23 at 16:12