Page 1 of 1
Custom title bar with cef
Posted:
Sat Aug 28, 2021 12:13 am
by RobbyDwayne
Hi,
How can go about making a custom title bar? Currently, I have the close and minimize functionality working. The thing I am struggling with is I want the user to be able to reposition the window by dragging it around. It is build in html and css and positioned the same way as a navbar. I also have the window set to borderless.
Is this the correct approach?
Thanks,
Robby
Re: Custom title bar with cef
Posted:
Sat Aug 28, 2021 9:52 am
by magreenblatt
Use “-webkit-app-region: drag” in CSS and implement CefDragHandler::OnDraggableRegionsChanged. See example usage in cefclient.
Re: Custom title bar with cef
Posted:
Tue Aug 31, 2021 12:55 am
by RobbyDwayne
What exactly do I implement?
I have this so far:
- Code: Select all
bool Client::OnDragEnter(CefRefPtr<CefBrowser> browser, CefRefPtr<CefDragData> dragData, CefDragHandler::DragOperationsMask mask)
{
CEF_REQUIRE_UI_THREAD();
//Forbid dragging of URLs and files
if ((mask & DRAG_OPERATION_LINK) && !dragData->IsFragment())
{
return true;
}
return false;
}
void Client::OnDraggableRegionsChanged(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, const std::vector<CefDraggableRegion>& regions)
{
CEF_REQUIRE_UI_THREAD();
HWND AppRoot = GetAncestor(browser->GetHost()->GetWindowHandle(), GA_ROOT);
//Reset draggable region
::SetRectRgn(draggable_region_, 0, 0, 0, 0);
//Determine new draggable region
std::vector<CefDraggableRegion>::const_iterator it = regions.begin();
for (; it != regions.end(); ++it)
{
HRGN region = ::CreateRectRgn(it->bounds.x, it->bounds.y, it->bounds.x + it->bounds.width, it->bounds.y + it->bounds.height);
::CombineRgn(draggable_region_, draggable_region_, region, it->draggable ? RGN_OR : RGN_DIFF);
::DeleteObject(region);
}
if (AppRoot)
{
WNDENUMPROC proc = !regions.empty() ? SubclassWindowsProc : UnSubclassWindowsProc;
::EnumChildWindows(AppRoot, proc, reinterpret_cast<LPARAM>(draggable_region_));
}
}
Thats all swiped from the example, but it doesn't actually work. It there something specific I need?
Re: Custom title bar with cef
Posted:
Tue Aug 31, 2021 8:25 am
by magreenblatt
Did you add the CSS? See
http://tests/draggable in cefclient.
Re: Custom title bar with cef
Posted:
Tue Aug 31, 2021 8:35 pm
by RobbyDwayne
Yup, I added -webkit-app-region: drag to the div which my custom title bar is in.
Re: Custom title bar with cef
Posted:
Tue Aug 31, 2021 9:07 pm
by magreenblatt
Did you implement CefClient::GetDragHandler? Is OnDraggableRegionsChanged called?
Re: Custom title bar with cef
Posted:
Thu Sep 02, 2021 1:40 am
by RobbyDwayne
- Code: Select all
void Client::NotifyDraggableRegions(CefRefPtr<CefBrowser> browser, const std::vector<CefDraggableRegion>& regions)
{
if (!CURRENTLY_ON_MAIN_THREAD())
{
//Execute this method on the main thread
MAIN_POST_CLOSURE(base::Bind(&Client::NotifyDraggableRegions, this, regions));
return;
}
REQUIRE_MAIN_THREAD();
HRGN draggable_region_ = ::CreateRectRgn(0, 0, 0, 0);
//Reset draggable region
::SetRectRgn(draggable_region_, 0, 0, 0, 0);
//Determine new draggable region
std::vector<CefDraggableRegion>::const_iterator it = regions.begin();
for (; it != regions.end(); ++it)
{
HRGN region = ::CreateRectRgn(it->bounds.x, it->bounds.y, it->bounds.x + it->bounds.width, it->bounds.y + it->bounds.height);
::CombineRgn(draggable_region_, draggable_region_, region, it->draggable ? RGN_OR : RGN_DIFF);
::DeleteObject(region);
}
Thats what I have so far. In the sample there is also this bit
- Code: Select all
// Subclass child window procedures in order to do hit-testing.
// This will be a no-op, if it is already subclassed.
if (hwnd_) {
WNDENUMPROC proc =
!regions.empty() ? SubclassWindowsProc : UnSubclassWindowsProc;
::EnumChildWindows(hwnd_, proc,
reinterpret_cast<LPARAM>(draggable_region_));
}
I cant really figure out what to do about that. I don't have a parent proc which the SubclassWindowsProc function uses. My project is basically based of the minimal implementation.
Re: Custom title bar with cef
Posted:
Thu Sep 02, 2021 9:06 am
by magreenblatt
Consider using Views, it will make it easier for you. Run “cefclient --use-views --hide-frame --hide-controls” as an example.
Re: Custom title bar with cef
Posted:
Fri Sep 03, 2021 1:10 am
by RobbyDwayne
Hey. I took your advice and switched over to views. Everything seems to work flawlessly! Thank you so much for your help!
Re: Custom title bar with cef
Posted:
Tue Jan 02, 2024 10:26 pm
by tapineb371
RobbyDwayne wrote:Hi,
How can go about making a custom title bar? Currently, I have the close and minimize functionality working. The thing I am struggling with is I want the user to be able to reposition the window by dragging it around. It is build in html and css and positioned the same way as a navbar. I also have the window set to borderless.
Is this the correct approach?
Thanks,
Robby
Can you kindly elaborate.