How to create a WPF Window without a border that can be resized via a grip only?

If you set ResizeMode=»CanResizeWithGrip» on a WPF Window then a resize grip is shown in the lower right corner, as below:

If you set WindowStyle=»None» as well the title bar disappears but the grey bevelled edge remains until you set ResizeMode=»NoResize» . Unfortunately, with this combination of properties set, the resize grip also disappears.

I have overridden the Window ‘s ControlTemplate via a custom Style . I want to specify the border of the window myself, and I don’t need users to be able to resize the window from all four sides, but I do need a resize grip.

Can someone detail a simple way to meet all of these criteria?

1. Do not have a border on the Window apart from the one I specify myself in a ControlTemplate .
2. Do have a working resize grip in the lower right corner.
3. Do not have a title bar.

5 Answers 5

If you set the AllowsTransparency property on the Window (even without setting any transparency values) the border disappears and you can only resize via the grip.

Result looks like:

I was trying to create a borderless window with WindowStyle=»None» but when I tested it, seems that appears a white bar in the top, after some research it appears to be a «Resize border», here is an image (I remarked in yellow):

After some research over the internet, and lots of difficult non xaml solutions, all the solutions that I found were code behind in C# and lots of code lines, I found indirectly the solution here: Maximum custom window loses drop shadow effect

Note : You need to use .NET 4.5 framework, or if you are using an older version use WPFShell, just reference the shell and use Shell:WindowChrome.WindowChrome instead.

I used the WindowChrome property of Window, if you use this that white «resize border» disappears, but you need to define some properties to work correctly.

CaptionHeight: This is the height of the caption area (headerbar) that allows for the Aero snap, double clicking behaviour as a normal title bar does. Set this to 0 (zero) to make the buttons work.

ResizeBorderThickness: This is thickness at the edge of the window which is where you can resize the window. I put to 5 because i like that number, and because if you put zero its difficult to resize the window.

After using this short code the result is this:

And now, the white border disappeared without using ResizeMode=»NoResize» and AllowsTransparency=»True» , also it shows a shadow in the window.

Later I will explain how to make to work the buttons (I didn’t used images for the buttons) easily with simple and short code, Im new and i think that I can post to codeproject, because here I didn’t find the place to post the tutorial.

Maybe there is another solution (I know that there are hard and difficult solutions for noobs like me) but this works for my personal projects.

Removing window border?

I have a window with a solid border around it. How can I remove the border (all of the non-client area) by using SetWindowLong and GetWindowLong?

4 Answers 4

WS_CAPTION is defined as (WS_BORDER | WS_DLGFRAME). You can get away with removing just these two styles, since the minimize maximize and sytem menu will disappear when the caption disappears, but it’s best to remove them as well.

It’s also best to remove the extended border styles.

And finally, to get your window to redraw with the changed styles, you can use SetWindowPos.

The following Delphi codes does it:

Of course, these API calls look the same in all languages.

This line of code below removes the border of any given window, and remains only its client:

You can use WS_POPUPWINDOW instead in the third parameter of SetWindowLong function. It also removes the borders of the given window and works too, but the difference is that it also draws outlined black rectangle all over the remaining client of the window. The thickness of that outlined rectangle is 1 pixel. WS_POPUP doesn’t draw that rectangle, actually it doesn’t draw anything, just only remove window’s borders.

If you are about to return back the borders of the window, before you use that line of code I posted above, call first that line of code below:

but of course that this function retuns the styles of the window, so create new variable that will keep these styles, i.e. set this variable to the return value of that function.

Then you use SetWindowLong as I showen above to remove its borders, and when you want later to restore its borders back, just recall again SetWindowLong , the first two parameters are same (hWnd and GWL_STYLE), but the third parameter is the styles of the window that returned from GetWindowLong . If you don’t want to call GetWindowLong , but still return the borders of the window, then you can use SetWindowLong with the same first two parameters, and in the third parameter, you can use one of the following: WS_OVERLAPPED or/and WS_OVERLAPPEDWINDOW or/and WS_SIZEFRAME .

NOTE: If you try my answer, but it doesn’t work for you, this can be, because that the both functions SetWindowLong and GetWindowLong have been superseded and doesn’t work for you, and that because they are compatible with only 32-bit version of Windows. Probably you are using 64-bit version of Windows, then use SetWindowLongPtr and GetWindowLongPtr instead, which are compatible with both 32-bit and 64-bit versions of Windows. MSDN informs that about these functions in the Note section. Just search for them in that site. Here are the links to them:

How to hide window borders?

I recently saw that on Manjaro (with XFCE4) it is possible to hide the top border of windows. So the title bar together with the minimize, maximize, close etc. buttons were not visible anymore.

Is that possible on Xubuntu as well? I only managed to do find an option in the terminal app.

2 Answers 2

Yes, you just install maximus.

Then, open a run dialog Ctrl + F2 and type:

(you may have to log out and then back in) .

Some windows like firefox will open with the window showing and all you have to do is use the mouse to tug down and then slam back up against the top panel to get it to go away. Otherwise, just click the maximize button once or twice.

Also, see this related article on how to put the close, maximize, etc buttons in the top panel: http://www.webupd8.org/2014/07/xubuntu-how-to-put-maximized-windows.html

If you are talking about this video https://www.youtube.com/watch?v=U-2KPrzIwao , the guy is using compiz to remove the window borders.

To install compiz, open a terminal and execute the following commands:

Now, make sure the following plugins are enabled Composite, Gnome Compatibility, OpenGL, Move Window, Resize Window, Place Windows. Also, make sure the Window Decoration plugin is not disabled.

After enabling those plugins, run the following command:

To enable window borders, open ccsm and enable the Window Decoration plugin.

Remove title bar and borders on maximized windows in Kubuntu

In gnome-shell there is an extension that removes the window borders, close buttons, title bar, etc on maximized windows to save screen real estate.

How can this behavior be replicated in KDE?

5 Answers 5

To remove the borders of maximized windows in KDE Plasma 5, run the following commands:

This is equivalent to doing the following:

/.config/kwinrc to add the line:

under the [Windows] section, so that it looks something like this:

In older versions of KDE, the file may be located at:

Restart KWin by running:

If that does not work, try one of the following, depending on which display server you are using:

Go crazy and maximize every window in sight! Remember that you can unmaximize them from the window menu ( Alt + F3 ) or from the task manager in your panel. If quick tiling is enabled (System Settings → Desktop → Screen Edges → Window Management), you can also use Alt + Left mouse button to unmaximize windows by dragging them.

References

In Kubuntu 18.04, one can toggle borders (including the titlebar) and the maximized state of windows relatively simply.

In System Settings, choose Shortcuts > Global Shortcuts > KWin. In there, scroll to Hide Window Borders and set a shortcut. I chose Meta + D and clicked Apply.

Now I can toggle borders by just pressing Meta + D .

Still, while in System Settings > Shortcuts > Global Shortcuts > KWin (in Kubuntu 18.04.1 LTS, Kwin corresponds to System Settings Module), scroll further down to Maximize Window. Here, I chose Meta + X and clicked Apply.

Now I can toggle between a non-maximized window and a maximized one by just pressing Meta + X .

Obviously, I can use both Meta + D and Meta + X on the same window whenever I want.

Hide window borders on Windows #211

Comments

Naatan commented Jun 16, 2016

On windows it shows the native window borders (including titlebar).

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

davibe commented Jun 16, 2016

we need windows contributors for this. I am not a windows user.

tvthatsme commented Jun 17, 2016

Confirmed that windows shows the native borders which takes a lot away from the sleek look.

The route forward for this would be to add a frame property if the process.platform is ‘win32’ to the creation of the browser window (src/main.coffee):

However, this removes the toolbars as well (YakYak, View, Color Scheme). So this change is going to need to dig deeper into the UI of the app to be able to expose the toolbar menus without the frame support. I’d like to help but can’t promise my availability for windows access.

Just wanted to help get that conversation started 😄

Naatan commented Jun 17, 2016

I guess it needs a burger menu or something similar. Or you can just make it an ALT menu (hide it by default, show it when someone presses ALT). This would be an issue on linux as well.

davibe commented Jun 17, 2016

Maybe we could un-hide borders when mouse reaches the top yakyak titlebar ?

Naatan commented Jun 17, 2016

That sounds really awkward. Imo ALT hiding would be a better/cleaner solution.

Ctrl+F for autoHideMenuBar

tvthatsme commented Jun 17, 2016 •

Going the ALT or mouse proximity methods hides information from the users which is normally bad from a usability point of view. You have to know that functionality is there before you can use it.

I would favor a full integration of the toolbar into the app (think ) across all platforms. It would be a lot more work but it could be beautiful and wouldn’t put the app at Window’s or Linux’s mercies on how things get styled. It would affect a lot more people though so idk if its worth all the trouble.

tvthatsme commented Jun 17, 2016

Or. hamburger menu on the top right?

Naatan commented Jun 17, 2016

Couldn’t it just be added here?

tvthatsme commented Jun 17, 2016

Yeah, that’s exactly what I was thinking!

davibe commented Jun 17, 2016

we can make the hamburger visible just on windows. It can sit aside of the «three-vertical-dots» icon. Does linux benefit from this too ?

Naatan commented Jun 17, 2016

Linux would benefit too, but why add another burger menu? Just add it to the «3 dots menu» (burger menu).

davibe commented Jun 17, 2016 •

So you would reveal the menu window menu while also revealing the conversation menu at the same time (which is what the buger-menu does right now) ?

Naatan commented Jun 17, 2016 •

No, I would place the menu items that are currently in the menubar inside the «conversation menu». Essentially the conversation menu becomes the all inclusive menu, part of which would have to become for conversations.

Note there is nothing indicating that these 3 dots are a conversation menu, it only becomes evident when clicking it. So the only bias for this being a conversation menu would be your own personal bias.

davibe commented Jun 17, 2016

mh, re-implementing the window menu bar..

Naatan commented Jun 17, 2016

IIRC Electron saves the menu markup in a JSON file, so it shouldn’t be too hard to simply take that JSON file and use it to populate an alternate menu.

Naatan commented Jun 17, 2016

tvthatsme commented Jun 17, 2016

I think the whole point of this is that the style of the default windows menu bar doesn’t mix with the material-like style of yakyak. So to match those styles for a windows user, yes, you would have to re-implement the menu bar. If you do it right, it looks really slick (take GitHub for Windows as an example https://github.com/blog/1127-github-for-windows).

Naatan commented Jun 17, 2016

Given that this menu is unlikely to hold many items it would be overkill to do some type of metro specific styling. Imo putting the relevant menu entries into the dots menu and calling it a day is totally fine given the scope of this application and how often you would be accsessing those menu items (once, twice?)

mrdimfox commented Dec 6, 2016 •

It will be so awesome if you make something with disgusting titlebar in Windows! Completely removing it will be the best option. Something like in Discord. You can use some separated settings screen instead of using menu bar. I hope it will be done someday cause now it is so ugly on Windows. 😢

averissimo commented Dec 6, 2016

@mrdimfox there was a regression on feeabb4 and the menu stop being hidden.

Already corrected and it is already in master branch #489

averissimo commented Dec 6, 2016

@mrdimfox can you try to install 1.4.1 pre-release, it has been updated and does not show menu anymore

you have to click on the 3 stacked lines to show menus 🙂

mrdimfox commented Dec 6, 2016

Yes, thanks. That’s good. But I said about title bar. See in screenshot below with red border.

And Discord here (have no any title bar):

For Discord it’s look very naturaly. For example, Telegram have not any title bar too. But Whatsapp have, and it’s ugly, IMHO.

Sazpaimon commented Mar 25, 2017 •

So I decided to take a stab at this, and experimented with frameless windows and managed to come up with something that looks like this in Windows 10:

Clicking the hamburger menu will bring up the application menu as a context menu instead of displaying the menu as a separate row, and the window controls are integrated with the rest of the application.

I need to double-check if this looks okay on Linux and other Windows versions, but if this design looks good to you all, I’ll make a PR. Word of warning, though, this was my first time working in Electron so I may have made some rookie mistakes in the implementation.