[WinUI3 Reunion 0.5] "ExtendsContentIntoTitleBar" Hides Min/Max/Close Buttons

[eleanorleffler]

Describe the bug

In WinUI 3 Reunion 0.5, using "ExtendsContentIntoTitleBar" when the background is set on the
control to be used as the title bar results in the standard action buttons on the window
(minimize, maximize, close) being hidden.

Additionally, the action buttons are a smaller height when "ExtendsContentIntoTitleBar" is used.

In UWP, this was accomplished with code like this:

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
mainWindow.SetTitleBar(AppTitleBarColor);

Steps to reproduce the bug

1. Clone the WinUI3Reunion05_Problems.
2. Go to the WinUI3IssuesReunion05 folder.
3. Open the WinUI3IssuesReunion05.sln solution in Visual Studio 2019 Preview.
4. Build and run with Debug x64.
5. Click on the seventh item on the Navigation View (SetTitleBar).
6. Click through each of the buttons for demonstration.

Expected behavior

We expect to be able to customize the TitleBar without losing the standard window buttons.

Screenshots

Current (WinUI3 Desktop) vs. Expected (UWP) - Setting TitleBar to Blue

Current (WinUI3 Desktop) vs. Expected (UWP) - Setting TitleBar to No Color

Version Info

Targeting:
Target: Universal Windows
Target version: Windows 10, version 2004 (10.0; Build19041)
Min version: Windows 10, version 1809 (10.0; Build 17763)

NuGet package version:
[Microsoft.ProjectReunion 0.5.0]
[Microsoft.ProjectReunion.WinUI 0.5.0]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)	Yes
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[StephenLPeters]

@pratikone and @Austin-Lamb FYI

[codendone]

Dup of #4209?

[eleanorleffler]

Hi @codendone ,

Same bug, new issue for more recent release with an updated solution!

We have been updating to each of the releases to test and track changes in bugs and functionality. This issue is for the most recent release of Reunion 0.5 while the other issue is for Preview 4.

Thanks again!

[marb2000]

Thanks @eleanorleffler,
There is a nasty bug in the custom Title bar that depending on the XAML layout, the window caption buttons don't render on the top of the visual tree. We already have bug fixes for it and I'm expecting to fix this for Reunion 0.8 GA.

[Katherine1]

I'm glad to hear that a fix will be coming for this. In the meantime, are there any workarounds for this issue?

[luckyluka]

It appears this issue is still not fixed.

Using: 0.8 preview

[HEIC-to-JPEG-Dev]

Reunion 0.8 released, issues still remains. To be specific, in a window that uses ExtendsContentIntoTitleBar, the content, typically a grid, extends over the top of chrome buttons and titlebar. If the grids background is null, then the buttons still work and respond visually as expected, however, if the grid's background is set (to a color or image) then this covers the chrome buttons; they will no longer respond to mouse input or display (they are basically underneath the grid).

I'm assuming to fix this, the buttons (and drag drop area) need to be brought to the top (on top of the grid).

[schemburkar]

Just to chime in with what I want to achieve with WinUI 3 C#/.NET 5 but still haven't got success, even after 0.8 Preview

Expected Target UX similar to UWP app

So far have below problems in WinUI, most of them related to TitleBar:

• Title bar has window drag issue. Dragging window does not work on all areas of title bar.
• Min/max and close window buttons are gone,
• Title bar controls to right side have hit target problems. Only work if hovered on bottom 5px.
• Acrylic Brush with host backdrops missing, hoping its back before 1.0/GA

Current UX in WinUI

[pratikone]

Hi all, thanks for bringing this issue out. We found some bugs to fix in this area and some design related restrictions We have catalogued those here : https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.settitlebar?view=winui-3.0#Microsoft_UI_Xaml_Window_SetTitleBar_Microsoft_UI_Xaml_UIElement_ Please follow them and see if they fix anything.

Some of the changes include : not setting background property on custom titlebar uielement as it draws over the min/max/close. By default, the custom titlebar will take the accent colors set in your Windows settings. If you want to customize the theme of custom titlebar, they can be overridden by changing resource values of some brushes. (I will check and post the name of those brushes here)

Edit : we have some more docs which need to be added on the MSDN page.

Second edit : the new documentation is now live. It contains the resources to theme the custom titlebar and a list of restrictions on how to use the custom titlebar feature which you might be hitting https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.settitlebar?view=winui-3.0#Microsoft_UI_Xaml_Window_SetTitleBar_Microsoft_UI_Xaml_UIElement_

[schemburkar]

@pratikone Thanks for the updates. I tried the scenarios with blank app based on your guidance.

I could extend the content on title bar and provide interactive elements (Button "Hey 1" ) on the left area only.

Please confirm on below?

• There is now way to provide interactive elements in the title bar area on the right hand side ? e.g. Button Hey 2
• In UWP versions we could add margin to left/right to restrict the title bar functionality to the middle on the area. Allowing interactive elements on both sides

  • Something like Visual Studio does? Where space between the Project name and User icon is the draggable title bar area

    

  • Like something I have done in my UWP app too!
    

Bug

• The button "Hey 2" covered by title bar area, is not interactable by mouse/touch but works by using keyboard TAB focus.
  

Please do let me know if any more data is needed.

[schemburkar]

Thought of adding scenarios to this thread that are not supported currently within WinUI title Bar but are used in the newly re-designed official Microsoft Store app in Windows 11.
All blank space on the title bar is draggable, while retaining input on other elements.

Overall Title Bar

Search in titlebar with Autocomplete

User Icon in titlebar with menu

Hope all these scenarios are supported when this issue is planned for a fix.

[pratikone]

Thanks for providing all these scenarios. We are aware of this specific feature request which one can call as non contiguous custom titlebar or having interactable elements within titlebar. Both have the same root. There are discussions ongoing on best ways to support these scenarios

[Wufus]

A workaround is described here #4166
But, bugs still exist. As non-draggable area at the top, bottom and right of MinMaxCloseContainer

[pratikone]

@schemburkar can you open another issue with your screenshots ? - it will be helpful to track that issue separately. Closing this one for now as it has been answered

[schemburkar]

Thanks @pratikone, created #6070. Let me know if you need more details on that thread.