Customized title bar isn't clickable in some cases (e.g. after decreasing window size)

[kingcean]

Describe the bug

The area which was set by draggable (by method AppWindow.TitleBar.SetDragRectangles) will no longer draggable nor clickable anymore.

In particular, if we do SetDragRectangles with one area and later SetDragRectangles with another for the window we have set AppWindow.TitleBar.ExtendsContentIntoTitleBar as true, the area in the former one but outside the current one is not draggable nor clickable. It only responds with right clicking but pops up the window menu mistakenly. The only way to work-around is to call ResetToDefault and then re-do all the steps of title bar customization again, but the window will blink unexpectedly (because we set→reset→set).

A case we may call SetDragRectangles twice or more is that we customize the title bar and listen the resizing event to update the draggable rectangles. This issue is always repro when the user decreases the window size if we put something (like search box) in the title bar.

Steps to reproduce the bug

1. Set AppWindow.TitleBar.ExtendsContentIntoTitleBar as true.
2. Add a big button filling the window/page.
3. SetDragRectangles with a bigger area.
4. Then SetDragRectangles with a smaller area.
5. The above complementary set area will have no response (can't be draggable nor be clickable).

The following is a simple example, and the app will no longer be available to click nor to drag.

<Window
    x:Class="Demo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Border>
        <Button Click="Button_Click" >Can you click me or drag window?</Button>
    </Border>
</Window>

// var appWindow = ... The AppWindow instance of MainWindow
appWindow.TitleBar.ExtendsContentIntoTitleBar = true;
appWindow.TitleBar.SetDragRectangles(new RectInt32[]
{
    new RectInt32(0, 0, 10000, 10000)
});
appWindow.TitleBar.SetDragRectangles(new RectInt32[]
{
    new RectInt32(0, 0, 1, 1)
});

Expected behavior

The area mentioned above should be restored to be clickable.

Screenshots

For example, if we set the above red-border rectangle by SetDragRectangles method (and keep updating on resizing), users can drag the area to move window. And of course, users can also click the search box to type some words to search. Suppose the width of the search box is 410px here. Then resize the window to decrease its width by 100px (and the program will do SetDragRectangles with the area updated). However, the user can only click the area of right 310px width part of the search box to type but not left 100px anymore.

NuGet package version

1.1.0

Packaging type

Packaged (MSIX)

Windows version

Windows 11 version 21H2 (22000)

IDE

Visual Studio 2022

Additional context

No response

[rkarman]

I'm copying in my reply for the other issue you have open on the same topic as well:

From the sample code you provide though it looks like you're trying to set a drag region that is smaller than the icon-area, which would not be possible unless you first disable the icon and system menu by calling: appWindow.TitleBar.IconShowOptions = IconShowOptions.HideIconAndSystemMenu; This will allow you to set a drag region for the left-most part of the window as well.

This said, I am unable to reproduce your problem. I can set and re-set the drag region, without a call to ResetToDefault, and have the new drag region be properly set and window be draggable.

Can you create a bare minimal app that reproduces the bug that we can use to investigate further?

[kingcean]

Suppose we have the following window and set a drag region as shown by the blue-border rectangle.

The blue rectangle is draggable now. Then we set the green-border rectangle as drag region like following. And then we can drag the green one as we expect.

The orange rectangle in the above picture is the complementary set area of the blue one (former draggable rectangle) and green one (current one). Any button and other focusable element in the orange rectangle should be clickable now because it is not the drag region.

However, the button still can't be clickable.

The following table is the behavior of click, drag, and right click there.

Case	Expect	Fact
Click an element there	Click	No respond
Drag	Nothing happened unless we listen such events	No respond
Right click	Nothing happened unless we listen such event	The window menu pops up

This issue is about the orange rectangle but not the green one.

[mevey]

We are tracking this bug here. http://task.ms/39944158

[kingcean]

I can still repro this on Windows App SDK 1.1.1.

After maximizing following window and then restore, the search box is no longer available to click or type because of this issue.

[CarstenL]

Same issue with Windows App SDK 1.1.2.

If you remove the Height="48" from the grid element and maximize the window, you can click the textbox at the bottom and you can type.

The drawn area (approximately) allows to use the textbox again. After restore, it is no longer available to click or type.

Also tried with a dropdownbutton. Almost the same behaviour.

[d2dyno1]

Any chance we can expect a fix in WASDK 1.2? @mevey @samanthamsong

[dongle-the-gadget]

Looks like this is fixed in 1.2 Preview 1.

[yki5000]

Come on people but this is still not working in C++ unpackaged apps!

[ms162223]

This issue is not resolved. I am still experiencing the same thing in 1.3.23. Controls in the Titlebar area are not clickable except the bottom few pixel worth of the control.

[Fritierkelle]

There is also a bug that if you place a combo box under the title bar (anywhere) and then the dropdown list opens and juts out over the title bar, the part of the combo box item that sits over the title bar is no longer clickable . Is everything connected?!