[Preview 4] SetTitleBar does not always work

Describe the bug I created a custom TitleBar using an UserControl. In the main Window I have a Grid which contains a Frame and the UserControl of the TitleBar.

The exact order is:

    <Grid x:Name="MainWindowGrid" TabIndex="0" IsTabStop="True" IsTapEnabled="True">
        <Frame x:Name="MainWindowFrame"/>
        <userControl:TitleBarControl x:Name="MainTitleBar" VerticalAlignment="Top"/>     
    </Grid>

I tried to set the custom TitleBar using SetTitleBar, but nothing changes. When I try to grab and move the Window from the TitleBar UserControl nothing happens.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create a Window
2. Insert a Grid
3. Insert a Frame and an UserControl (which will behave as the TitleBar) in the Grid
4. Set the UserControl using SetTitleBar
5. Try to move the Window

Expected behavior Grabbing the TitleBar would allow the user to move around the Window

Screenshots

Version Info Win32 WinUI 3 Preview 4

NuGet package version: Microsoft.WinUI 3.0.0-preview4.210210.4

Windows app type:

UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
October 2020 Update (19042)	Yes
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)	Yes
October 2018 Update (17763)
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

[billhenn]

@jeff-kissinger I’m trying the same thing injecting a custom header title bar element and my header element covers the system title bar buttons. They are still there if I render the header semi-transparently.

If I try to put a margin on my header title bar element to give the system title bar buttons room to render, I found that they seem to “move” to top-right align within my title bar element. So if your header title bar element has a background, it seems to always block them. This doesn’t feel like it’s implemented right yet.

From a consumer point of view, I love the option of extending custom content into the title bar (we did that in UWP too). But…

• The system title bar buttons should render above my content (UWP did that).
• They should tell me how much space they need (UWP supported that).
• They should allow allow rendering color customization (UWP supported that).
• They should also optionally be able to be completely hidden for a scenario where I want to make and use my own custom title bar buttons in place of the system ones. That’s important too.

[bkaankose]

I don’t have much experience on WinUI Desktop side, but in regular UWP world your draggable area should respect the margin values returned by LayoutMetricsChanged event in core title bar. It’s documented here. I assume we don’t have in Desktop world.

I tried your code and it’s working for me on WinUI Desktop project. However, they are invisible as stated also in this issue.

Few more notes that might be helpful for you when creating custom draggable area from UWP world:

• Your draggable area must have Background assigned. If you want to achieve transparent, just assign ‘Transparent’ as value. Otherwise UWP XAML Framework will not route event inputs and eventually it’ll became not draggable.
• Regarding maximize, minimize and close system buttons in UWP, no matter what your custom draggable area Canvas.ZIndex has, system will render it’s own buttons on top of it.

I just wanted to mention that the issue here is invisible system buttons and the notes above can help WinUI dev team to diagnose potential bugs. There might be places that have been forgotten during the process of unification for both code bases 😃