Setting the `TitleBar` Control Icon Breaks Window Resizing Behavior

[Zakariathr22]

Describe the bug

When maximizing the window and then dragging it from the TitleBar control, the following issues occur:

• The CenterContent of the TitleBar overlaps the RightContent instead of staying properly aligned.
• The window content does not resize responsively; instead, it becomes cropped.

Steps to reproduce the bug

1. Maximize the window.
2. Drag the window from the TitleBar control.
3. Observe that the CenterContent overlaps the RightContent.
4. Notice that the window content does not resize properly and becomes cropped.

Expected behavior

• CenterContent should remain properly aligned and not overlap RightContent.
• The window content should resize responsively instead of becoming cropped.

Screenshots

Recording.2025-03-13.124500.mp4

NuGet package version

WinUI 3 - Windows App SDK 1.7 Preview 1: 1.7.250208002-preview1

Windows version

Windows 11 (24H2): Build 26100

Additional context

These issues do not occur with the default TitleBar, they only appear when using the TitleBar control.

[Zakariathr22]

@niels9001 FYI

[Zakariathr22]

Other related issues

Recording.2025-03-13.222058.mp4

---

Recording.2025-03-13.222456.mp4

[niels9001]

Other related issues

Recording.2025-03-13.222058.mp4
Recording.2025-03-13.222456.mp4

@Zakariathr22 if you remove the Icon does that make this issue go away?

[Zakariathr22]

@Zakariathr22 if you remove the Icon does that make this issue go away?

Yes, the issue doesn't appear again when you remove the Icon. I'm wondering what the relation is 🤔.

[Zakariathr22]

As a temporary workaround, we can manually add the icon to the left content:

<TitleBar.LeftContent>
    <ImageIcon Source="/Assets/icon.png" Width="20" Margin="12,0,0,0" />
</TitleBar.LeftContent>

[sungaila]

Other related issues

Recording.2025-03-13.222058.mp4

I noticed this one when using Aero Snap (dragging the window to the top to maximize). Glad you came up with a workaround!

However, setting LeftHeader will put the tiltebar into the "extra thick mode". As if I tried to put a textbox into the titlebar but the extra space is not needed for a 16x16 icon.

[Zakariathr22]

However, setting LeftHeader will put the tiltebar into the "extra thick mode". As if I tried to put a textbox into the titlebar but the extra space is not needed for a 16x16 icon.

Yes, according to the Title Bar functional spec, and I quote:

There is no TitleBar.Height property. The height for TitleBar is configured in codebehind depending on whether there is content present in the ContentBefore, Content, and ContentAfter content areas.

So, while the current workaround isn't perfect, it just helps us avoid more complex layout issues.