Use touch to drag window

[hbl917070]

I use webview2 to make the entire UI of the program, including the title bar of the window is also HTML.
Electron can use --webkit-app-region: drag; in CSS, but webview2 does not support it.

#200 (comment)
I tried to use this method to implement window dragging, but this method only works with the mouse, and the touch screen will not respond.

Microsoft Teams on Windows 11 also uses webview2,
I use a surface laptop 3 and I can't drag Microsoft Teams on the touch screen.

If possible, would like to be able to support CSS like --webkit-app-region: drag-top; so that the window can be resized.

AB#38450196

[champnic]

Thanks for the feature request @hbl917070! I've added this as a scenario on our backlog.

[champnic]

Looking at the solution in #200, it looks like they are only listening to the mousedown event. Can you try using pointerdown and other pointer events instead and see if that works for touch?

[hbl917070]

JavaScript event pointerdown, touchstart, mousedown cannot drag the window under the touch screen.

I use it in C#

[DllImport("user32.dll", CharSet = CharSet.Auto)]
public static extern bool ReleaseCapture();

public const int WM_SYSCOMMAND = 0x0112;
[DllImport("user32.dll", CharSet = CharSet.Auto)]
public static extern bool SendMessage(IntPtr hwnd, int wMsg, int wParam, int lParam);

public void Drag(){
	ReleaseCapture();
	SendMessage(handle, WM_SYSCOMMAND, (int)0xF009, 0);
}

In WPF or winForm, I can drag the window by calling Drag() in MouseDown.
In webview2 or cef, I can use the mouse to trigger mousedown, thereby dragging the window.
In webview2 or cef, I use touchscreen to trigger touchstart, and make sure Drag() is executed, but I can't drag the window.

This is just my guess. When Chromium receives a touch command, Chromium will intercept the touch command, so that touch does not hold for Windows systems.

[champnic]

Just to be clear, my suggestion was to change the code in #200 from this:

window.addEventListener('DOMContentLoaded', () => {
    document.body.addEventListener('mousedown', evt => {
        const { target } = evt;
        const appRegion = getComputedStyle(target)['-webkit-app-region'];

        if (appRegion === 'drag') {
            chrome.webview.hostObjects.sync.eventForwarder.MouseDownDrag();
            evt.preventDefault();
            evt.stopPropagation();
        }
    });
});

to this:

window.addEventListener('DOMContentLoaded', () => {
    document.body.addEventListener('pointerdown', evt => {
        const { target } = evt;
        const appRegion = getComputedStyle(target)['-webkit-app-region'];

        if (appRegion === 'drag') {
            chrome.webview.hostObjects.sync.eventForwarder.MouseDownDrag();
            evt.preventDefault();
            evt.stopPropagation();
        }
    });
});

By changing mousedown to pointerdown. I don't think anything else needs to change. Is that not working for you?

[hbl917070]

Yes, after my testing, this doesn't work with touchscreens.

Under normal circumstances, when using touch on a touch screen, the mouse cursor will move with the touch.

But in the case of web page, using touch doesn't make the mouse cursor move,
If the mouse coordinates have not changed, then the SendMessage of C# cannot drag the window.

https://youtu.be/ZIOraK74Png
In the first 15 seconds of the video, touch in the webpage will not change the coordinates of the mouse.
In the second half of the video, I dragged the title bar of the browser directly, and the mouse followed the touch.

[champnic]

Oh I see what you are saying. That's unfortunate, but good info for our scenario that there isn't a workaround available.

[nishitha-burman]

Hi @hbl917070,

Can you provide details on the customizations you are looking to do for resize regions?

Thanks!

[hbl917070]

I hope that all UI of the program can be presented through WebView2, including the window title bar.
But WebView2 can be embedded in WinForm, WPF, UWP…
Therefore, the solution needed may be a new window object or a new C# project?

For example

WebView2Window window = new WebView2Window();
window.Style = WebView2WindowStyle.NoTitleBar;
window.Show();
WebView2 wv2 = window.Webview;
wv2.CoreWebView2.Navigate("https://www.bing.com");

WebView2Window is a window object that is similar to Form,
except that it only contains one WebView2 object inside
and can remove the window title bar.
The window also supports full transparency.
Then, following Electron’s approach, you can use CSS --webkit-app-region:drag to enable a DIV to drag the window.

[champnic]

You should now be able to use app-region: drag in window-hosted scenarios (Win32, .NET WPF/Winforms - NOT UWP or WinAppSDK yet), and have that work for touch as well. Can you give that a try and let me know if it's not working?

[hbl917070]

I opened a new project to test it, and neither the mouse nor the touch can drag the window.

Project: net 4.7 WinForm
OS: Windows 10 (19045.2673)
WebView2 version: 1.0.1587.40
WebView2 userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.57

C#

public partial class Form1 : Form {
    public Form1() {
        InitializeComponent();
    }
    private void Form1_Load(object sender, EventArgs e) {
        webView21.Source = new Uri("file:///C:/Users/u1/Desktop/moveTest.html");
    }
}

moveTest.html

<!DOCTYPE html>
<html>
<body>
    <style>
        #move {
            width: 300px;
            height: 300px;
            background-color: rgb(100, 200, 200);

            --app-region: drag;
            -app-region: drag;
            app-region: drag;
            --webkit-app-region: drag;
            -webkit-app-region: drag;
            webkit-app-region: drag;
        }
    </style>
    <div id="move"> </div>
</body>
</html>

[champnic]

@hbl917070 Sorry for the confusion - looks like it requires a flag to enable it currently. Can you try setting this additional browser argument?
--enable-features=msWebView2EnableDraggableRegions

[hbl917070]

It worked, mouse and touch can drag the window!

In addition, if there is a solution to drag the border to change the size of the window, then everything will be perfect.

C#

public partial class Form1 : Form {
        WebView2 webView21;

        public Form1() {
            InitializeComponent();
            this.FormBorderStyle = FormBorderStyle.None;
            InitWebview();
        }

        private async void InitWebview() {
            webView21 = new WebView2();
            this.Controls.Add(webView21);
            webView21.Dock = DockStyle.Fill;
            string arg = @"--enable-features=""msWebView2EnableDraggableRegions""";
            var opts = new CoreWebView2EnvironmentOptions { AdditionalBrowserArguments = arg };
            var webView2Environment = await CoreWebView2Environment.CreateAsync(null, null, opts);
            await webView21.EnsureCoreWebView2Async(webView2Environment);
            webView21.Source = new Uri("file:///C:/Users/u1/Desktop/moveTest.html");
        }
}

moveTest.html

<!DOCTYPE html>
<html>
<body>
    <style>
        #move {
            app-region: drag;
            width: 300px;
            height: 300px;
            background-color: rgb(100, 200, 200);
        }
    </style>
    <div id="move"></div>
</body>
</html>

[nishitha-burman]

Hi @hbl917070,

Glad that worked for you! Can you please expand on the ask to have support for dragging the border to change the size of the window? What properties are you looking to customize for the resize regions? The OS has non client area resize regions, is there a reason you are expanding your app to the OS's non client area in the left, right, bottom sides? Also, if WebView2 by default support the borders as resize regions, does that address your needs or are you looking to configure dimensions of the divs for the resize regions?

Thanks!