How to write GUIs like Spotify or Steam?

[AceDawg45]

So, some of you probably have the desktop programs of Spotify or Steam, and if not those, then Visual Studio 2013 is a suitable example. So, if you have noticed, there isn't a 'red x' at the top right corner of these programs, but a custom version of it. How does one do something like that? And the menus at the top of these are custom. I have no idea if this is making sense, but I am just looking to learn how to modernize my programs.

[ResidentBiscuit]

My guess is they make the programs borderless, and then build their own menu bar within the window. If that makes sense (I'm not a UI guy).

[AceDawg45]

That actually makes a lot of sense. I'll try it.

[ResidentBiscuit]

The window borders are handled by the window manager, which of course varies by operating system and distro in the Linux world. There's probably an API for each of these window managers, but I doubt Valve and Spotify are writing code for each of these.

I know Steam, for example, is written using SDL. I dug through the SDL docs and didn't see anything at all about altering the border of the window other than disabling it all together. So, my educated guess after about 10 minutes of research is that they just disable the border and recreate their own menu bar within their now borderless window. So it gives off the appearance of having a border without actually having one in a technical sense

Don't quote me on this, though. I'm really just throwing out wild guesses with little to back them up.

[z05DSL3A]

This might be a good place to start:
Custom Window Frame Using DWM
http://msdn.microsoft.com/en-gb/library/windows/desktop/bb688195(v=vs.85).aspx

I think the Visual Studio 2013 uses WPF for the UI.

[ResidentBiscuit]

That doesn't look like it does quite what OP was after. That still uses the normal Windows window manager (Aero?) open/mini/max buttons.

After looking at screenshots of Spotify (not home so I cant pull it up), it is using the window manager's borders. Only on Windows does it have the custom open/mini/max buttons.

I can't really tell from looking at the Steam screenshots.

[z05DSL3A]

I'm fairly sure you can do owner drawn buttons with DWM but anyway It shows you how to drawn and hit test in the non client area of a frame. I have been trying to find a better link for custom frames but no luck yet.

re WPF: http://www.codeproject.com/Articles/30062/WPF-Non-Client-Area-Design-Techniques-For-Custom-W is just one of the many links.

[AceDawg45]

I actually got it to work, but I can't move the thing. It is just stuck to the middle of my screen. I looked around, and people say to use SetCapture and ReleaseCapture, but not posting any code, and I am not familiar with those functions. Any help?

A snip of my code that contains the changes I made to make it borderless:

HWND hwnd = CreateWindowEx(
		0,                              // Optional window styles.
		CLASS_NAME,                     // Window class
		L"Learn to Program Windows",    // Window text
		WS_OVERLAPPED | WS_POPUP,            // Window style

		// Size and position
		CW_USEDEFAULT, CW_USEDEFAULT, 600,  400,

		NULL,       // Parent window    
		NULL,       // Menu
		hInstance,  // Instance handle
		NULL        // Additional application data
		);

	if (hwnd == NULL)
	{
		return 0;
	}
	SetWindowLong(hwnd, GWL_STYLE, GetWindowLong(hwnd, GWL_STYLE));
	SetWindowPos(hwnd, HWND_TOP, 600, 500, 600, 400, SWP_FRAMECHANGED);
	ShowWindow(hwnd, nCmdShow);

[knn9]

To move the window is simple. In WM_LBUTTONDOWN do something like this:

SendMessage(hwnd, WM_NCLBUTTONDOWN, HTCAPTION, (LPARAM)0);

Apparently it simulates a click & drag of the caption bar even if the caption bar isn't there. Of course you'll want to do a hit test to make sure the user is clicking in the right area to move the window. You can probably use WM_NCLBUTTONDOWN to initiate resizing as well.

If you do it the manual way you need to call SetCapture() and ReleaseCapture() in WM_LBUTTONDOWN and WM_LBUTTONUP respectively and in WM_MOUSEMOVE set the window position according to the mouse coordinates.

[AceDawg45]

Thanks, knn9, I was able to move the window. You mentioned resizing the window with WM_NCLBUTTONDOWN. How can I do that?

[knn9]

See the constants listed here:

http://msdn.microsoft.com/en-us/library/windows/desktop/ms645618%28v=vs.85%29.aspx

And also this:

http://msdn.microsoft.com/en-us/library/windows/desktop/ms645620%28v=vs.85%29.aspx

Use NCBOTTOM, NCBOTTOMRIGHT, etc to resize

[AceDawg45]

Thanks! Got it to work. A lot simpler than what I was expecting.