C++ – WinAPI: Create resizable window without title bar, but with minimize/maximize/close buttons (as Firefox/Chrome/Opera)

ctitlebarwinapiwindow

If you look at the windows of the browsers Firefox, Chrome or Opera, you'll notice that their windows

have minimize/maximize/close buttons
are resizable
but have no title bar

I'm interested: how can I create such a window?

What I have already tried:

I looked around on StackOverflow (and googled, too), and found this: opening a window that has no title bar with win32

Unluckily, this didn't help completely:

The first step was to extend the solution proposed on opening a window that has no title bar with win32

hWnd = CreateWindow(szWindowClass, szTitle, WS_BORDER, 
  CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, 
  NULL, NULL, hInstance, NULL);

SetWindowLong(hWnd, GWL_STYLE, WS_SIZEBOX);
// See remarks on http://msdn.microsoft.com/en-us/library/windows/desktop/ms633545.aspx
SetWindowPos(hWnd, 0, 
   0, 0, 0, 0, // Position + Size
   SWP_NOMOVE | SWP_NOSIZE | SWP_NOZORDER | SWP_FRAMECHANGED);

Of course, this delivers no minimize/maximize buttons, but on the other hand, if I want minimize/maximize buttons, I have to do:

SetWindowLong(hWnd, GWL_STYLE, WS_SIZEBOX | WS_MAXIMIZEBOX | 
    WS_MINIMIZEBOX | WS_SYSMENU | WS_CAPTION);

Why does this combination seem to be necessary? First I probably want WS_MAXIMIZEBOX | WS_MINIMIZEBOX since I want these buttons.

But http://msdn.microsoft.com/en-us/library/ms632600.aspx says that if I set one of WS_MAXIMIZEBOX and WS_MINIMIZEBOX, I also have to set WS_SYSMENU. And when I set WS_SYSMENU, I also have to set WS_CAPTION but this is not what I want, because I wanted to avoid the title bar (indeed: if WS_CAPTION is not set, no minimize/maximize buttons are shown).

So what is to do?

Best Answer

The programs remove the non-client area (the title bar) and have a bunch of custom handling for reproducing the window buttons, icons, system menu etc. The benefit of this is that they can draw to the new "title bar", which is actually part of the standard client area, adding tabs or other custom controls.

The following two articles will show you how to do this on Vista and above (using the DWM):

Setting up a custom title bar on Windows Vista / 7
Setting up a custom title bar - reprise This one has a demo app showing the result of a number of variations / options.

This is very complex to do and get right, so the above two articles are invaluable. The author must have put a lot of work into them! Both links have example code written in Delphi, but it should be easy enough to translate it to C++ - the concepts are identical, it's just syntax.

You might also be interested in general resources on Glass and DWM, since it's all closely related. You'll spot the above two links included in that list :)

Related Solutions

Create window without titlebar, with resizable border and without bogus 6px white stripe

That's not a bug. In Windows 10 the borders on left/right/bottom are transparent. The top border is not transparent. You should leave it as is. Probably nobody will complain.

To change it, you must modify the non-client area. This is rather difficult in Windows Vista and above. See Custom Window Frame Using DWM for reference.

Find border thickness
Use DwmExtendFrameIntoClientArea to get access to non-client area
Use BeginBufferedPaint to draw opaque color over non-client area

Windows 10 example:

(See the next example for compatibility with Windows Vista, 7, 8)

//requires Dwmapi.lib and UxTheme.lib
#include <Windows.h>
#include <Dwmapi.h>

void my_paint(HDC hdc, RECT rc)
{
    HBRUSH brush = CreateSolidBrush(RGB(0, 128, 0));
    FillRect(hdc, &rc, brush);
    DeleteObject(brush);
}

LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam)
{
    static RECT border_thickness;

    switch (uMsg)
    {
    case WM_CREATE:
    {
        //find border thickness
        SetRectEmpty(&border_thickness);
        if (GetWindowLongPtr(hwnd, GWL_STYLE) & WS_THICKFRAME)
        {
            AdjustWindowRectEx(&border_thickness, GetWindowLongPtr(hwnd, GWL_STYLE) & ~WS_CAPTION, FALSE, NULL);
            border_thickness.left *= -1;
            border_thickness.top *= -1;
        }
        else if (GetWindowLongPtr(hwnd, GWL_STYLE) & WS_BORDER)
        {
            SetRect(&border_thickness, 1, 1, 1, 1);
        }

        MARGINS margins = { 0 };
        DwmExtendFrameIntoClientArea(hwnd, &margins);
        SetWindowPos(hwnd, NULL, 0, 0, 0, 0, SWP_SHOWWINDOW | SWP_NOMOVE | SWP_NOSIZE | SWP_FRAMECHANGED);
        break;
    }

    case WM_PAINT:
    {
        PAINTSTRUCT ps;
        HDC hdc = BeginPaint(hwnd, &ps);

        RECT rc = ps.rcPaint;
        BP_PAINTPARAMS params = { sizeof(params), BPPF_NOCLIP | BPPF_ERASE };
        HDC memdc;
        HPAINTBUFFER hbuffer = BeginBufferedPaint(hdc, &rc, BPBF_TOPDOWNDIB, &params, &memdc);

        my_paint(memdc, rc);

        BufferedPaintSetAlpha(hbuffer, &rc, 255);
        EndBufferedPaint(hbuffer, TRUE);

        EndPaint(hwnd, &ps);
        return 0;
    }

    case WM_NCACTIVATE:
        return 0;

    case WM_NCCALCSIZE:
        if (lParam)
        {
            NCCALCSIZE_PARAMS* sz = (NCCALCSIZE_PARAMS*)lParam;
            sz->rgrc[0].left += border_thickness.left;
            sz->rgrc[0].right -= border_thickness.right;
            sz->rgrc[0].bottom -= border_thickness.bottom;
            return 0;
        }
        break;

    case WM_NCHITTEST:
    {
        //do default processing, but allow resizing from top-border
        LRESULT result = DefWindowProc(hwnd, uMsg, wParam, lParam);
        if (result == HTCLIENT)
        {
            POINT pt = { GET_X_LPARAM(lParam), GET_Y_LPARAM(lParam) };
            ScreenToClient(hwnd, &pt);
            if (pt.y < border_thickness.top) return HTTOP;
        }
        return result;
    }

    case WM_DESTROY:
        PostQuitMessage(0);
        return 0;

    }
    return DefWindowProc(hwnd, uMsg, wParam, lParam);
}

int WINAPI wWinMain(HINSTANCE hInstance, HINSTANCE, PWSTR, int)
{
    const wchar_t CLASS_NAME[] = L"Sample Window Class";

    WNDCLASS wc = {};
    wc.lpfnWndProc = WindowProc;
    wc.hInstance = hInstance;
    wc.hCursor = LoadCursor(NULL, IDC_ARROW);
    wc.lpszClassName = CLASS_NAME;
    RegisterClass(&wc);

    CreateWindowEx(0, CLASS_NAME,   NULL,
        WS_VISIBLE | WS_THICKFRAME | WS_POPUP,
        10, 10, 600, 400, NULL, NULL, hInstance, NULL);

    MSG msg = {};
    while (GetMessage(&msg, NULL, 0, 0))
    {
        TranslateMessage(&msg);
        DispatchMessage(&msg);
    }

    return 0;
}

For compatibility with Windows Vista/7/8 use this procedure instead. This will paint over left/top/bottom borders as well as top border. This window will appear as a simple rectangle, with resizing borders:

//for Windows Vista, 7, 8, 10
LRESULT CALLBACK WindowProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam)
{
    static RECT border_thickness;

    switch (uMsg)
    {
    case WM_CREATE:
    {
        //find border thickness
        SetRectEmpty(&border_thickness);
        if (GetWindowLongPtr(hwnd, GWL_STYLE) & WS_THICKFRAME)
        {
            AdjustWindowRectEx(&border_thickness, GetWindowLongPtr(hwnd, GWL_STYLE) & ~WS_CAPTION, FALSE, NULL);
            border_thickness.left *= -1;
            border_thickness.top *= -1;
        }
        else if (GetWindowLongPtr(hwnd, GWL_STYLE) & WS_BORDER)
        {
            SetRect(&border_thickness, 1, 1, 1, 1);
        }

        MARGINS margins = { 0 };
        DwmExtendFrameIntoClientArea(hwnd, &margins);
        SetWindowPos(hwnd, NULL, 0, 0, 0, 0, SWP_SHOWWINDOW | SWP_NOMOVE | SWP_NOSIZE | SWP_FRAMECHANGED);
        break;
    }

    case WM_PAINT:
    {
        PAINTSTRUCT ps;
        HDC hdc = BeginPaint(hwnd, &ps);

        RECT rc = ps.rcPaint;
        BP_PAINTPARAMS params = { sizeof(params), BPPF_NOCLIP | BPPF_ERASE };
        HDC memdc;
        HPAINTBUFFER hbuffer = BeginBufferedPaint(hdc, &rc, BPBF_TOPDOWNDIB, &params, &memdc);

        my_paint(memdc, rc);

        BufferedPaintSetAlpha(hbuffer, &rc, 255);
        EndBufferedPaint(hbuffer, TRUE);

        EndPaint(hwnd, &ps);
        return 0;
    }

    case WM_NCACTIVATE:
        return 0;

    case WM_NCCALCSIZE:
        if (lParam)
            return 0;

    case WM_NCHITTEST:
    {
        POINT pt = { GET_X_LPARAM(lParam), GET_Y_LPARAM(lParam) };
        ScreenToClient(hwnd, &pt);
        RECT rc;
        GetClientRect(hwnd, &rc);
        enum {left=1, top=2, right=4, bottom=8};
        int hit = 0;
        if (pt.x < border_thickness.left) hit |= left;
        if (pt.x > rc.right - border_thickness.right) hit |= right;
        if (pt.y < border_thickness.top) hit |= top;
        if (pt.y > rc.bottom - border_thickness.bottom) hit |= bottom;

        if (hit & top && hit & left) return HTTOPLEFT;
        if (hit & top && hit & right) return HTTOPRIGHT;
        if (hit & bottom && hit & left) return HTBOTTOMLEFT;
        if (hit & bottom && hit & right) return HTBOTTOMRIGHT;
        if (hit & left) return HTLEFT;
        if (hit & top) return HTTOP;
        if (hit & right) return HTRIGHT;
        if (hit & bottom) return HTBOTTOM;

        return HTCLIENT;
    }

    case WM_DESTROY:
        PostQuitMessage(0);
        return 0;

    }
    return DefWindowProc(hwnd, uMsg, wParam, lParam);
}

Css – How to make minimize, maximize, and close buttons for the website with CSS

Your best bet will be a modal library or a framework that has modals in it (such as bootstrap).

However if you're adamant on making your own, something like this will get you started. The key points of this are:

You need a modal that has a "header" separated from the content
You need JavaScript (jQuery will aide in this) to control the animations
This is something I slapped together, but the principles will apply to anything you build
- Minimize needs to hide the content, NOT the header
- Maximize needs to show the contnet, Not the header
- Both buttons should ideally have an animation on click to show where the modal is going positionally.

jQuery(document).ready(function($){
  $(document).on('click', '.min', function(){
    $(this).closest('.modal').find('.content').slideUp();
    $(this).closest('.modal').animate({'left':0,'bottom':0});
  });
  
  $(document).on('click', '.max', function(){
    $(this).closest('.modal').find('.content').slideDown();
    $(this).closest('.modal').animate({'left':'20px','bottom':'50%'});
  });
  
  $(document).on('click', '.close', function(){
    $(this).closest('.modal').fadeOut();
  });
});

.shield {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.25);
  top: 0;
  left: 0;
  font-family: sans-serif;
}

.modal {
  position: absolute;
  bottom: 50%;
  left: 20px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 15px -5px rgba(0,0,0,.5);
  width: 600px;
}

.modal .header {
  padding: 8px 12px;
  position: relative;
}

.modal .header .buttons {
  position: absolute;
  right: 0;
  top: 9px;
}

.modal .header .buttons span {
  border-left: 1px solid #ccc;
  padding: 8px 20px;
  cursor: pointer;
}

.modal .header .buttons span:hover {
  background: #eee;
}

.modal .content {
  border-top: 1px solid #ccc;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Here's Content</h1>
  <p>Under the modal</p>
  <p>Under the modal</p>
  <p>Under the modal</p>
  <p>Under the modal</p>
</div>
<div class="shield">
  <div class="modal">
    <div class="header">
      <span>Modal Window</span>
      <span class="buttons"><span class="min">_</span><span class="max">[ ]</span><span class="close">X</span></span>
    </div>
    <div class="content">
    Here's modal pop-up content
    </div>
  </div>
</div>

Best Answer

Related Solutions

Create window without titlebar, with resizable border and without bogus 6px white stripe

Css – How to make minimize, maximize, and close buttons for the website with CSS

Related Topic