How can I get a resizable no-frame window without shaking?

[Horbin-Magician]

I writed a resizable no-frame window. However, when I drag it's left margin to resize it, the right margin of the window will shaking, like:

2024-09-23.210927.mp4

This is my demo code:
drag extension_example.zip

[Enyium]

You could also try Window::set_size() instead of passing the size into the Slint code.

Or, try Window::with_winit_window() and then in the closure winit::window::Window::drag_resize_window().

[Horbin-Magician]

You could also try Window::set_size() instead of passing the size into the Slint code.

Or, try Window::with_winit_window() and then in the closure winit::window::Window::drag_resize_window().

The shaking also occurs when using either method : (
A lot of software in Windows has similar problems, but I don't know what the problem is.

[Enyium]

The problem will be like such effects with JavaScript in browsers: Something is changed without the power to prevent another change also. Then the other changed is undone. But in between, the browser, or in this case Windows, renders.

Windows has a number of functions to change the top-left and bottom-right coordinate of a window all in one go. This should normally prevent this. Ideally, these functions would be accessible one way or the other through a framework like winit and Slint:

• https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowpos
• https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-movewindow
• https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowplacement
• https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-adjustwindowrect

StackOverflow answer on the first three functions.

[Horbin-Magician]

The function SetWindowPos can not solve the problem, code:

            ui_clone.window().with_winit_window(|winit_win: &i_slint_backend_winit::winit::window::Window| {
                if let Ok(handle) = winit_win.window_handle(){
                    if let RawWindowHandle::Win32(win32_handle) = handle.as_raw() {
                        unsafe { 
                            let _ = SetWindowPos(
                                HWND(win32_handle.hwnd.get() as *mut _),
                                None,
                                change_pos_x as i32,
                                change_pos_y as i32,
                                win_width as i32,
                                win_height as i32,
                                SWP_NOREDRAW
                            );
                        };
                    }
                }
            });

[Enyium]

Do you abstain from setting your Window-inheriting component's width/height? I'd guess that you could expect Slint to automatically get these properties changed when the OS window changed its size, including by programmatic size changes through the Windows API. I.e., size changes using SetWindowPos() should IMO be reflected in the Slint Window's width/height properties.

You must also remove your usage of Slint's set_position().

You, of course, also need to apply the same delta to, e.g., your x coordinate and the width, when you want to resize the left edge, so that the right edge effectively stays where it is.

[Horbin-Magician]

You must also remove your usage of Slint's set_position().

Yes, I only use SetWindowPos() to change the Window size and position.

You, of course, also need to apply the same delta to, e.g., your x coordinate and the width, when you want to resize the left edge, so that the right edge effectively stays where it is.

Yes, I changed both windows width and position_x when I resize the left edge. In fact, the right edge only shakes when I drag the left edge, and when I stop dragging, it stays in the right place.

By now, I think this is a feature of Windows system, because many programs that draw windows themselves have this problem.
It may be hard to solve with api calls alone :(

[ogoffart]

There is also the resize-border-width property that you can set on Window: https://releases.slint.dev/1.8.0/docs/slint/src/language/builtins/elements.html#id37

[Horbin-Magician]

There is also the resize-border-width property that you can set on Window:

The shaking also occurs when using resize-border-width, but disappear when no-frame: false.