Skip to content

Commit 5a4eb5f

Browse files
Included a new API spec for Webview2 Window Controls Overlay
1 parent 5d6debb commit 5a4eb5f

File tree

2 files changed

+142
-1
lines changed

2 files changed

+142
-1
lines changed

specs/IsWindowControlsOverlayEnabled.md

-1
This file was deleted.
+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
WebView2 Window Controls
2+
===
3+
4+
# Background
5+
This API allows you to Enable and configure The Webview2 Window Controls overlay.
6+
The Overlay is a region on the top right/left of the webview window which contains
7+
the caption buttons (minimize, maximize, restore, close). Enabing the Overlay allows
8+
for custom app title bars rendered completly inside the webview window.
9+
The overlay Settings lives on the controller object.
10+
11+
This API is designed to be used in addition with the other non-client region APIs
12+
and features. These include `app-region: drag`, and `IsNonClientRegionSupportEnabled`.
13+
# Examples
14+
15+
## Win32 C++
16+
```cpp
17+
AppWindow::AppWindow() {
18+
m_mainWindow = CreateWindowExW(
19+
WS_EX_CONTROLPARENT,
20+
GetWindowClass(),
21+
L""
22+
WS_POPUPWINDOW,
23+
0,0, 800, 800,
24+
nullptr, nullptr,
25+
g_hInstance, nullptr);
26+
}
27+
28+
void AppWindow::OnCreateWebview2ControllerCompleted(HRESULT hr, ICoreWebview2Controller* controller)
29+
{
30+
wil::com_ptr<ICoreWebView2Controller5> controller5;
31+
CHECK_FAILURE(controller->QueryInterface(&controller5));
32+
33+
wil::com_ptr<ICoreWebView2WindowControlsOverlaySettings> wco_config;
34+
CHECK_FAILURE(controller5->get_WindowControlsOverlaySettings(&wco_config));
35+
36+
wco_config->put_IsEnabled(true);
37+
COREWEBVIEW2_COLOR color {1, 0, 0, 225};
38+
wco_config->put_TitleBarColor(color);
39+
}
40+
```
41+
## .NET C#
42+
```c#
43+
// WebView2 control is defined in the xaml
44+
// <wv2:WebView2 x:Name="webView" Source="https://www.microsoft.com/"/>
45+
public MainWindow()
46+
{
47+
InitializeComponent();
48+
m_AppWindow.TitleBar.ExtendsContentIntoTitleBar = true;
49+
50+
CoreWebView2WindowControlsOverlaySettings config = _coreWebView2Controller.WindowControlsOverlaySettings;
51+
config.IsEnabled = true;
52+
config.color = Color.FromARGB(0, 0, 255);
53+
}
54+
```
55+
56+
# API Details
57+
## Win32 C++
58+
```cpp
59+
/// Controller API used to configure the window controls overlay.
60+
/// To provide your app users with the best experience, it is important to handle webview
61+
/// initialization errors appropriatly. Provide your users with a way to close the window
62+
/// or restart the App.
63+
[uuid(101e36ca-7f75-5105-b9be-fea2ba61a2fd), object, pointer_default(unique)]
64+
interface ICoreWebView2Controller5 : IUnknown {
65+
/// Gets the `WindowControlsOverlaySettings` object.
66+
[propget] HRESULT WindowControlsOverlaySettings([out, retval] ICoreWebView2WindowControlsOverlaySettings** value);
67+
}
68+
69+
/// This is the ICoreWebView2WindowControlsOverlaySettings
70+
[uuid(c9f7378b-8dbb-5445-bacb-08a3fdf032f0), object, pointer_default(unique)]
71+
interface ICoreWebView2WindowControlsOverlaySettings : IUnknown {
72+
/// Gets the `Height` property.
73+
[propget] HRESULT Height([out, retval] UINT32* value);
74+
75+
76+
/// The `Height` property in raw screen pixels, allows you to set the height of the overlay and
77+
/// title bar area. Defaults to 48px.
78+
///
79+
[propput] HRESULT Height([in] UINT32 value);
80+
81+
82+
/// Gets the `IsEnabled` property.
83+
[propget] HRESULT IsEnabled([out, retval] BOOL* value);
84+
85+
86+
/// The `IsEnabled` property allows you to opt in to using
87+
/// the WebView2 window controls overlay. Defaults to `FALSE`.
88+
///
89+
/// When this property is `TRUE`, WebView2 will draw its own minimize, maximize,
90+
/// and close buttons on the top right corner of the Webview2.
91+
///
92+
/// When using this you should configure your app window to not display its default
93+
/// window control buttons. You are responsible for creating a title bar for your app
94+
/// by using the available space to the left of the controls overlay. In doing so,
95+
/// you can utilize the [IsNonClientRegionSupportEnabled](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2settings9?view=webview2-1.0.2739.15)
96+
/// API to enable draggable regions for your custom title bar.
97+
///
98+
/// The Overlay buttons will sit on top of the HTML content, and will prevent mouse interactions
99+
/// with any elements directly below it, so you should avoid placing content there.
100+
/// To that end, there are four CSS environment vairables defined to help you
101+
/// get the dimensions of the available titlebar area to the left of the overlay.
102+
/// Similarly the navigator object wil contain a WindowControlsOverlay property
103+
/// which can be used to get the titlebar area as a rect, and listen for changes
104+
/// to the size of that area.
105+
///
106+
[propput] HRESULT IsEnabled([in] BOOL value);
107+
108+
/// Gets the `TitleBarColor` property.
109+
[propget] HRESULT TitleBarColor([out, retval] COREWEBVIEW2_COLOR* value);
110+
111+
/// The `TitleBarColor` property allows you to set a background color
112+
/// for the overlay. Based on the background color you choose, Webview2
113+
///will automatically calculate a foreground and hover color that will
114+
/// provide you the best contrast while maintaining accessibility.
115+
/// Defaults to #f3f3f3
116+
[propput] HRESULT TitleBarColor([in] COREWEBVIEW2_COLOR value);
117+
}
118+
```
119+
120+
## .NET and WinRT
121+
```c#
122+
namespace Microsoft.Web.WebView2.Core
123+
{
124+
runtimeclass CoreWebView2Controller
125+
{
126+
[interface_name("Microsoft.Web.WebView2.Core.ICoreWebView2Controller")]
127+
{
128+
CoreWebView2WindowControlsOverlaySettings WindowControlsOverlaySettings { get; };
129+
}
130+
}
131+
132+
runtimeclass CoreWebView2WindowControlsOverlaySettings
133+
{
134+
[interface_name("Microsoft.Web.WebView2.Core.ICoreWebView2WindowControlsOverlaySettings")]
135+
{
136+
Boolean IsEnabled { get; set; };
137+
UInt32 Height { get; set; };
138+
System.Drawing.Color TitleBarColor { get; set; }
139+
}
140+
}
141+
}
142+
```

0 commit comments

Comments
 (0)