`TitleBar` control content misalignment and cropping after maximizing and dragging

[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

https://github.com/user-attachments/assets/9eb38cc3-26d9-44d7-818e-11c7df6b41ea

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

https://github.com/user-attachments/assets/3b09754f-975c-46ac-8731-ab7bd9661f99

---

https://github.com/user-attachments/assets/8229bf54-83e1-4e50-9e37-d6ec0394a485

[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.

[Gaoyifei1011]

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.

This is my temporary workaround. I tried to use the IContentIslandPartner interface to get the corresponding DesktopSiteBridge from the ContentIsland instance. When the size of the main window is changed, modify the size of the DesktopSiteBridge.

--------------------------------

这是我的临时解决方法。我尝试使用 IContentIslandPartner 接口，从 ContentIsland 实例中获取与之对应的 DesktopSiteBridge。在主窗口大小发生更改时，修改 DesktopSiteBridge 对应的大小即可。

---

It needs to be called after XamlRoot is loaded

--------------------------------

需要 XamlRoot 加载完成后调用

---

contentIsland = Content.XamlRoot.ContentIsland;
contentIsland.As<IContentIslandPartner>().Get_TEMP_DesktopSiteBridge(out IntPtr desktopSiteBridgePtr);
desktopSiteBridge = DesktopSiteBridge.FromAbi(desktopSiteBridgePtr);

---

The AppWindow.Changed event needs to be mounted

--------------------------------

需要挂载 AppWindow.Changed 事件

    private void OnAppWindowChanged(AppWindow sender, AppWindowChangedEventArgs args)
    {
        if (desktopSiteBridge is not null && !desktopSiteBridge.IsClosed)
        {
            desktopSiteBridge.MoveAndResize(new RectInt32(0, 0, AppWindow.ClientSize.Width, AppWindow.ClientSize.Height));
        }
    }

---

IContentIslandPartner Interface definition

--------------------------------

IContentIslandPartner 接口定义

    [GeneratedComInterface, Guid("70CE8275-8D05-5222-A00B-41F9F9B2150C")]
    public partial interface IContentIslandPartner : IInspectable
    {
        [PreserveSig]
        int PlaceHolder(out IntPtr placeHolder);

        [PreserveSig]
        int Get_TEMP_DesktopSiteBridge(out IntPtr desktopSiteBridge);
    }

---

IInspectable Interface definition

--------------------------------

IInspectable 接口定义

  [GeneratedComInterface, Guid("AF86E2E0-B12D-4C6A-9C5A-D7AA65101E90")]
  public partial interface IInspectable
  {
      [PreserveSig]
      int GetIids(out ulong iidCount, out nint iids);

      [PreserveSig]
      int GetRuntimeClassName(out nint className);

      [PreserveSig]
      int GetTrustLevel(out TrustLevel trustLevel);
  }

[Poker-sang]

Yes, I observe the same issue. But it seems to only occur in projects with complex interfaces, I tried to build a minimal replica with just the TitleBar and didn't have this problem:

This problem always occurs when dragging a window while maximized. Adjusting the edges when windowed occasionally causes this problem

https://github.com/user-attachments/assets/9261897f-3936-453b-a4a8-50454958cf05

[Zakariathr22]

Yes, I observe the same issue. But it seems to only occur in projects with complex interfaces, I tried to build a minimal replica with just the TitleBar and didn't have this problem:

@Poker-sang It's not about interface complexity. This issue doesn't occur if you don't set the icon on the TitleBar control, so it's the icon that's breaking the layout. For more details, check the comments on the issue. ☝️

[Poker-sang]

I see, no wonder I can't reproduce it. Thank you I finally know what causes this bug

[Jay-o-Way]

Duplicate of #10374