`CenterContent` in `TitleBar` control does not stretch properly

[Zakariathr22]

Description:

The CenterContent inside the TitleBar does not stretch properly due to the ContentPresenter being constrained by HorizontalAlignment="Center". This causes issues when adding controls like AutoSuggestBox, which remain centered instead of filling the available space.

Steps to Reproduce:

1. Add a control (e.g., AutoSuggestBox) to the CenterContent of the TitleBar.
2. Observe that the control remains centered and does not stretch, even if HorizontalAlignment="Stretch" is set on the child element.
3. Resizing the window may result in unintended cropping if explicit widths are set.

Actual Behavior:

• Controls take up the full height of the title bar, which is inconsistent with the rest of the title bar layout.
• Controls remain centered and do not stretch.
  
• Manually setting widths leads to cropping issues on window resize.
  

<TitleBar.CenterContent>
    <AutoSuggestBox x:Name="SearchBox" Width="480" PlaceholderText="Search..." QueryIcon="Find"/>
</TitleBar.CenterContent>

Expected Behavior:

• Controls inside the CenterContent should stretch properly to fit the available space while maintaining correct alignment with other title bar elements.
• Controls inside the center content area must follow the TitleBar specs correctly (The follwing design from titleBar-dev-spec)
  

Attempted Solution:

I removed HorizontalAlignment="Center" from the ContentPresenter to allow child elements to stretch properly and set VerticalAlignment="Center" to keep alignment consistent with other title bar elements.

<Grid
    x:Name="PART_CenterContentPresenterGrid"
    x:DeferLoadStrategy="Lazy"
    Visibility="Collapsed"
    Grid.Column="8">
    <ContentPresenter
        x:Name="PART_CenterContentPresenter"
        Content="{TemplateBinding CenterContent}"
        VerticalAlignment="Center"/>
</Grid>

Result of Attempted Fix:

• ✅ The CenterContent stretched correctly, and child elements like AutoSuggestBox behaved as expected.
• ❌ However, clicking on the center area of the title bar no longer allowed dragging the window.

Recording.2025-03-12.125951.mp4

<TitleBar.CenterContent>
    <AutoSuggestBox x:Name="SearchBox" MaxWidth="480" PlaceholderText="Search..." QueryIcon="Find"/>
</TitleBar.CenterContent>

NuGet package version

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

Windows version

Windows 11 (24H2): Build 26100

[Zakariathr22]

@karkarl FYI

[niels9001]

I don't think we hit this issue with the TitleBar from WCT, I think we did additional things to punch out content: https://github.com/CommunityToolkit/Labs-Windows/blob/55af2618c8a613bb3f81789aebd318c2432e66a8/components/TitleBar/src/TitleBar.WASDK.cs#L157

[Zakariathr22]

I don't think we hit this issue with the TitleBar from WCT, I think we did additional things to punch out content

Yes, you're right.
It’s likely due to how UpdateDragRegion() calculates the region, idk maybe because it uses GetBounds()? I couldn't find a solution for this, but it should have a deeper review from the maintainers.