Stretchable title bar search box + drag region sample#2182
Merged
marcelwgn merged 12 commits intoMay 29, 2026
Conversation
Bump WindowsAppSdkPackageVersion from 2.0.1 to 2.1.3 (latest stable). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Use new TitleBar drag-region behavior shipped in Windows App SDK 2.1 (microsoft/microsoft-ui-xaml#10936): - MainWindow: drop the fixed Width=320 on the title bar AutoSuggestBox and let it stretch up to MaxWidth=480. The framework now auto-excludes only interactive controls from the drag region, so the empty space around the stretched search box remains draggable. - TitleBar sample: add a new ControlExample demonstrating TitleBar.IsDragRegion (per-element override) and the RecomputeDragRegions() method, with a stretching AutoSuggestBox and a status badge whose drag/click behavior can be toggled. Note: TitleBar.AutoRefreshDragRegions from the spec is not yet shipped in WindowsAppSDK 2.1.3 and is therefore not demonstrated. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…to-end window Same fix as MainWindow: drop fixed Width, use MaxWidth=480 + HorizontalAlignment=Stretch on the AutoSuggestBox so the title bar still has draggable area on the sides thanks to the new TitleBar drag-region auto-detection in WindowsAppSDK 2.1. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
TitleBar.Content's presenter does not stretch its child by default, so HorizontalAlignment=Stretch on the AutoSuggestBox alone has no effect. Wrap it in a Grid with HorizontalAlignment=Stretch so the search box actually grows up to MaxWidth=420. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…lly stretches The TitleBar control template's PART_ContentPresenter binds its HorizontalAlignment to the theme resource TitleBarContentHorizontalAlignment, which defaults to Center. As a result, even though the Content column (column 8) uses Width=*, the ContentPresenter only takes its child's DesiredSize and centers it - so HorizontalAlignment=Stretch on the AutoSuggestBox had no effect. Override the resource globally to Stretch in App.xaml so the search box (and any other custom TitleBar.Content) actually fills the available area up to its MaxWidth. With that in place, the wrapper Grids added in the previous commit are no longer needed; simplified all TitleBar.Content blocks back to a plain AutoSuggestBox with MaxWidth=420 + HorizontalAlignment=Stretch. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…erride Drag regions are only meaningful inside a real window, so refactor the inline ControlExample into a 'Show window' button that activates a new TitleBarDragRegionsWindow with the demo controls (radio buttons for IsDragRegion, toggle extra content, RecomputeDragRegions). Move the TitleBarContentHorizontalAlignment=Stretch override from App.xaml into each TitleBar via TitleBar.Resources and call it out in the displayed snippets so consumers know how to make TitleBar.Content stretch horizontally. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the WinUI Gallery TitleBar experiences to leverage Windows App SDK 2.1 drag-region behavior, allowing title bar content (notably the search box) to stretch while keeping remaining non-interactive space draggable, and adds a dedicated sample window demonstrating drag-region overrides and recomputation.
Changes:
- Updated TitleBar
AutoSuggestBoxusage to stretch (viaTitleBarContentHorizontalAlignment=Stretch) with aMaxWidthcap instead of a fixed width. - Added a new
TitleBarDragRegionsWindowsample window showcasingTitleBar.IsDragRegionoverrides andTitleBar.RecomputeDragRegions()for dynamic content scenarios. - Exposed the new sample from the TitleBar control page and added corresponding snippet documentation.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| WinUIGallery/SampleSupport/SamplePages/TitleBarWindow.xaml | Makes TitleBar content stretch and removes fixed search box width in the sample window. |
| WinUIGallery/SampleSupport/SamplePages/TitleBarDragRegionsWindow.xaml.cs | Adds code-behind for drag-region override UI and dynamic content toggling. |
| WinUIGallery/SampleSupport/SamplePages/TitleBarDragRegionsWindow.xaml | Introduces a new window UI demonstrating drag-region behavior and recomputation. |
| WinUIGallery/Samples/TitleBar/TitleBarPage.xaml.cs | Adds a click handler to launch the new drag-regions sample window. |
| WinUIGallery/Samples/TitleBar/TitleBarPage.xaml | Adds a new ControlExample entry that opens the drag-regions sample window. |
| WinUIGallery/Samples/TitleBar/TitlebarDragRegions.txt | Adds snippet documentation for drag-region defaults, overrides, and recomputation. |
| WinUIGallery/Samples/TitleBar/TitlebarConfiguration.txt | Updates the TitleBar configuration snippet to use stretch + MaxWidth for the search box. |
| WinUIGallery/MainWindow.xaml | Updates the app title bar search box to stretch with a MaxWidth cap. |
| standalone.props | Bumps Windows App SDK package version to 2.1.3. |
Comment on lines
+55
to
+62
| _extraButton = new Button | ||
| { | ||
| Content = "Extra", | ||
| Margin = new Thickness(0, 0, 8, 0), | ||
| VerticalAlignment = VerticalAlignment.Center, | ||
| }; | ||
| Grid.SetColumn(_extraButton, 1); | ||
| contentGrid.Children.Insert(0, _extraButton); |
Comment on lines
+45
to
+58
| <!-- Non-interactive visual: its drag behavior is controlled | ||
| via the TitleBar.IsDragRegion attached property below. --> | ||
| <Border | ||
| x:Name="StatusBadge" | ||
| Grid.Column="1" | ||
| Padding="10,4" | ||
| VerticalAlignment="Center" | ||
| Background="{ThemeResource AccentFillColorDefaultBrush}" | ||
| CornerRadius="4" | ||
| PointerPressed="StatusBadge_PointerPressed"> | ||
| <TextBlock | ||
| Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}" | ||
| Text="Status" /> | ||
| </Border> |
| MaxWidth="580" | ||
| HorizontalAlignment="Stretch" | ||
| VerticalAlignment="Center" | ||
| PlaceholderText="Search.." |
Comment on lines
37
to
41
| <AutoSuggestBox | ||
| x:Name="controlsSearchBox" | ||
| Width="320" | ||
| MaxWidth="580" | ||
| HorizontalAlignment="Stretch" | ||
| VerticalAlignment="Center" |
Comment on lines
+82
to
+89
| <RadioButtons | ||
| x:Name="BadgeIsDragRegionRadios" | ||
| SelectedIndex="0" | ||
| SelectionChanged="BadgeIsDragRegionRadios_SelectionChanged"> | ||
| <x:String>Unset (framework decides — draggable here, since it's non-interactive)</x:String> | ||
| <x:String>True (always draggable)</x:String> | ||
| <x:String>False (always clickable — click handler fires)</x:String> | ||
| </RadioButtons> |
| MaxWidth="580" | ||
| HorizontalAlignment="Stretch" | ||
| VerticalAlignment="Center" | ||
| PlaceholderText="Search.." |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
… overlap - Fix "Search.." -> "Search..." in TitleBarWindow.xaml and TitlebarConfiguration.txt - Convert StatusBadge from Border (PointerPressed) to Button (Click) so it is keyboard accessible and announced as a button by assistive tech; update radio button labels accordingly - Wrap the right side of TitleBar.Content in a StackPanel (RightHeaderPanel) so the dynamically added "Extra" button no longer overlaps StatusBadge in Grid.Column=1 - Sync TitlebarDragRegions.txt snippet with the new XAML Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
marcelwgn
approved these changes
May 29, 2026
Contributor
|
/azp run |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Use the new TitleBar drag-region behavior shipped in Windows App SDK 2.1 (spec: microsoft/microsoft-ui-xaml#10936, tracking: microsoft/microsoft-ui-xaml#10421).
What changed
MainWindow
Width=320on the title barAutoSuggestBoxand let it stretch up toMaxWidth=480.TitleBar.Contentand auto-excludes only interactive controls from the drag region, so the empty space around the stretched search box remains draggable. The narrow fixed width was previously needed to leave a draggable area; that workaround is no longer necessary.TitleBar sample page
AutoSuggestBoxinside aGrid.TitleBar.IsDragRegionattached property (per-element override) on a status badgeBorder, toggleable via aToggleSwitchbetweenTrue(draggable) andFalse(clickable).TitleBar.RecomputeDragRegions()method, invokable via a button for the "I changed Content dynamically" scenario.Dependencies
Builds on the WindowsAppSDK 2.1.3 bump from #2181 (merged into this branch).
Notes
TitleBar.AutoRefreshDragRegionsfrom the spec is not yet shipped in WindowsAppSDK 2.1.3 (verified by attempting to compile against it), so it is intentionally not demonstrated. Once it ships, the sample can be extended with a third toggle.