[DRAFT] MainWindow.xaml with new TitleBar + TitleBar samples #1797

niels9001 · 2025-03-08T11:20:50Z

DO NOT MERGE UNTIL WASDK 1.7 STABLE

Changes:

Introducing a new MainWindow.xaml in favor of creating a window in code-behind + NavigationRootPage.
Cleanup of unused code
Using the new TitleBar control: moving the pane toggle button and searchbox to the TitleBar following design best practices for Windows 11
Made the Copy link logic dynamic: in debug mode, the link will open the actual dev version of the Gallery for easier debugging.
Added samples for TitleBar

Copilot

PR Overview

This PR introduces a new MainWindow.xaml and refactors navigation and titlebar logic to follow design best practices for Windows 11. It also removes unused code and makes the copy link logic dynamic based on build configuration.

Migrates navigation calls from NavigationRootPage to App.MainWindow.
Updates version and theme parsing to use the new helper classes.
Adjusts URI schemes for protocol activation based on debug/release mode.

Reviewed Changes

File	Description
WinUIGallery/Helpers/VersionHelper.cs	Adds version details properties and retrieves Windows App Runtime version dynamically.
WinUIGallery/Helpers/EnumHelper.cs	Provides a generic enum parsing helper to replace custom implementations.
WinUIGallery/App.xaml.cs	Refactors window initialization and navigation to use MainWindow instead of a separate NavigationRootPage.
WinUIGallery/Helpers/ProtocolActivationClipboardHelper.cs	Makes copy link logic dynamic by selecting the appropriate URI scheme.
WinUIGallery/Pages/*	Updates various page navigations to reference the new MainWindow navigation APIs.
WinUIGallery/MainWindow.xaml.cs	Consolidates navigation, titlebar, and window management logic into MainWindow.
WinUIGallery/Helpers/NavigationOrientationHelper.cs, ThemeHelper.cs, TitleBarHelper.cs	Adjusts helper methods to align with changes in window and navigation handling.

Copilot reviewed 21 out of 21 changed files in this pull request and generated 1 comment.

WinUIGallery/Helpers/VersionHelper.cs

Zakariathr22

I suggest that the TitleBar sample should also be updated in the same PR to describe the new TitleBar.

WinUIGallery/Helpers/TitleBarHelper.cs

WinUIGallery/MainWindow.xaml

WinUIGallery/MainWindow.xaml.cs

Jay-o-Way · 2025-03-08T13:32:21Z

For me, I have issues with restoring a number of packages. Is there an issue with dev.azure.com?

niels9001 · 2025-03-08T17:40:07Z

I suggest that the TitleBar sample should also be updated in the same PR to describe the new TitleBar.

Maybe better to that in a separate PR? I've created an tracking issue here: #1798

WinUIGallery/MainWindow.xaml

WinUIGallery/Styles/TitleBar.xaml

niels9001 · 2025-03-12T14:08:20Z

I suggest that the TitleBar sample should also be updated in the same PR to describe the new TitleBar.

@Zakariathr22 Since some of that old sample code was intertwined with the Gallery itself, I've created the new samples for TitleBar in this PR as well. Please review :)!

WinUIGallery/Samples/SamplePages/TitleBarWindow.xaml.cs

Zakariathr22 · 2025-03-12T15:15:09Z

WinUIGallery/Samples/ControlPages/TitleBarPage.xaml

+                    BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource OverlayCornerRadius}">
+                    <TitleBar


Maybe we should showcase TitleBar.LeftContent as well, so developers can see all the available customization options for the TitleBar.

Thought about that, but couldn't come up with a good use case really.. since the other content is RightContent I figured it's fine to show one of the two?

I was thinking of adding something like a refresh button?

<TitleBar.LeftContent> <Border> <Border.Resources> <Style x:Key="TitleBarButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Transparent" /> <Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Margin" Value="2" /> <Setter Property="Padding" Value="12,0" /> <Setter Property="CornerRadius" Value="4" /> </Style> </Border.Resources> <Button Style="{StaticResource TitleBarButtonStyle}"> <FontIcon Glyph="" FontSize="14"/> <ToolTipService.ToolTip> Refresh </ToolTipService.ToolTip> </Button> </Border> </TitleBar.LeftContent>

I was thinking of adding something like a refresh button?

<TitleBar.LeftContent> <Border> <Border.Resources> <Style x:Key="TitleBarButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Transparent" /> <Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Margin" Value="2" /> <Setter Property="Padding" Value="12,0" /> <Setter Property="CornerRadius" Value="4" /> </Style> </Border.Resources> <Button Style="{StaticResource TitleBarButtonStyle}"> <FontIcon Glyph="" FontSize="14"/> <ToolTipService.ToolTip> Refresh </ToolTipService.ToolTip> </Button> </Border> </TitleBar.LeftContent>

How about adding a theme toggle button?
Or even better, display current user profile (PersonPicture)

How about adding a theme toggle button?
Or even better, display current user profile (PersonPicture)

Do you mean adding it to the TitleBar sample example or the app's title bar?

How about adding a theme toggle button?
Or even better, display current user profile (PersonPicture)

Do you mean adding it to the TitleBar sample example or the app's title bar?

I dont know, mybe, current user can be added in titlebar sample and theme toggle button in apps titlebar

I'd love to have something that is not a button, so it stands out a bit more compared to the back and panetoggle buttons (as those come with the control by default).

I'd love to have something that is not a button, so it stands out a bit more compared to the back and panetoggle buttons (as those come with the control by default).

What about online/offline status?

<TitleBar.LeftContent> <FontIcon Glyph="" Foreground="{ThemeResource SystemFillColorSuccessBrush}" FontSize="14" Margin="12,0"> <ToolTipService.ToolTip> Online </ToolTipService.ToolTip> </FontIcon> </TitleBar.LeftContent>

Nice idea. I'm sure there is a better icon for that. ~~And let's keep icon font size at 16.~~

And let's keep icon font size at 16.

The font size of the icons on TitleBar buttons is 14, which is why.

WinUIGallery/Samples/Data/ControlInfoData.json

Co-authored-by: Zakaria Tahri | Shade <101801384+Zakariathr22@users.noreply.github.com>

Zakariathr22

We have a more complex issue!

For more details, I reported it at microsoft/microsoft-ui-xaml#10427

My thoughts:
I think the TitleBar control is still far from being stable. I don't know if it will make it into WinAppSDK 1.7 stable or if it will be delayed to 1.8.

…UI-Gallery into niels9001/titlebar

WinUIGallery/MainWindow.xaml

WinUIGallery/Styles/TitleBar.xaml

Zakariathr22 · 2025-04-16T15:40:42Z

WinUIGallery/MainWindow.xaml.cs

-            window.Activated += Window_Activated;
-            window.SetTitleBar(this.AppTitleBar);
-
-            AppWindow appWindow = WindowHelper.GetAppWindow(window);


GetAppWindow method can be removed from the helper class, as it's no longer needed with newer versions of WinAppSDK.

## Description This PR creates a XAML-defined `MainWindow` for improved maintaining of the shell UX going forward. It also uses the new `TitleBar` control and moving the searchbox to the top of the window, following UX-guidance and saving some vertical space in the NavView. Closes: #1736 ~~[DO NOT MERGE]: Blocked on `TitleBar` bugs~~ For TitleBar samples, see: #1797 --------- Co-authored-by: Zakaria Tahri <zakotahri@outlook.com> Co-authored-by: Marcel Wagner <marcelwagner@microsoft.com> Co-authored-by: Marcel W. <marcel.alex.wagner@outlook.com>

niels9001 added 3 commits March 7, 2025 15:07

Move helpers out of App.xaml.cs

25c6b3f

Update NugetPackages

08b7d45

Adding MainWindow and new TitleBar

b4e2d9e

niels9001 added the DO NOT MERGE label Mar 8, 2025

niels9001 requested a review from Copilot March 8, 2025 11:20

Copilot AI reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/Helpers/VersionHelper.cs Show resolved Hide resolved

Update MainWindow.xaml

aab5828

Zakariathr22 suggested changes Mar 8, 2025

View reviewed changes

Jay-o-Way reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/Helpers/TitleBarHelper.cs Show resolved Hide resolved

Jay-o-Way reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/MainWindow.xaml Outdated Show resolved Hide resolved

Jay-o-Way reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/MainWindow.xaml Show resolved Hide resolved

Jay-o-Way reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/MainWindow.xaml.cs Show resolved Hide resolved

niels9001 added 2 commits March 8, 2025 19:23

Changes

fe95f1e

Merge branch 'main' into niels9001/titlebar

78dc9e5

ghost1372 reviewed Mar 8, 2025

View reviewed changes

WinUIGallery/MainWindow.xaml Outdated Show resolved Hide resolved

niels9001 added 8 commits March 10, 2025 16:36

Updating packages

88df92e

Merge branch 'main' into niels9001/titlebar

0a4aa1f

Making it build again

5a5ff36

Enabling reflection for OnNavigatedFrom

a3b8bcc

Update NavigationHelper.cs

0e6b535

Moving window related code to MainWindow

7430ae8

Removing unused code and fixing searchbox alignment

b1de526

Update MainWindow.xaml.cs

91922d7

Zakariathr22 suggested changes Mar 12, 2025

View reviewed changes

WinUIGallery/Styles/TitleBar.xaml Show resolved Hide resolved

niels9001 added 4 commits March 12, 2025 14:03

Remove unused usings

afe1332

Revert back horizontal stretch for TitleBar

6c46371

Adding TitleBar samples

ac20066

Update TitleBarWindow.xaml

a62f63c

niels9001 requested a review from Zakariathr22 March 12, 2025 14:07

niels9001 changed the title ~~[DRAFT] MainWindow.xaml + new TitleBar~~ [DRAFT] MainWindow.xaml with new TitleBar + TitleBar samples Mar 12, 2025

Zakariathr22 suggested changes Mar 12, 2025

View reviewed changes

niels9001 and others added 3 commits March 12, 2025 16:36

TitleBarHeightOption

9c52be5

Co-authored-by: Zakaria Tahri | Shade <101801384+Zakariathr22@users.noreply.github.com>

Update WinUIGallery/Samples/Data/ControlInfoData.json

fe8c29d

Co-authored-by: Zakaria Tahri | Shade <101801384+Zakariathr22@users.noreply.github.com>

Merge branch 'main' into niels9001/titlebar

5696e0c

Zakariathr22 reviewed Mar 13, 2025

View reviewed changes

niels9001 added 5 commits March 19, 2025 09:57

Merge branch 'main' into niels9001/titlebar

e5b25fd

Update standalone.props

486d7d1

Merge branch 'niels9001/titlebar' of https://github.com/microsoft/Win…

aa554bf

…UI-Gallery into niels9001/titlebar

Address new API naming

5f3736c

Fix style

b34c45a

Jay-o-Way reviewed Apr 4, 2025

View reviewed changes

WinUIGallery/MainWindow.xaml Outdated Show resolved Hide resolved

Jay-o-Way reviewed Apr 4, 2025

View reviewed changes

WinUIGallery/Styles/TitleBar.xaml Show resolved Hide resolved

Jay-o-Way reviewed Apr 4, 2025

View reviewed changes

WinUIGallery/Styles/TitleBar.xaml Outdated Show resolved Hide resolved

Jay-o-Way mentioned this pull request Apr 6, 2025

more UI updates AutoDarkMode/Windows-Auto-Night-Mode#934

Closed

niels9001 added 4 commits April 7, 2025 09:11

Merge branch 'main' into niels9001/titlebar

f519976

Update MainWindow.xaml

6b73f33

Update TitleBar.xaml

fcf6a92

Merge branch 'main' into niels9001/titlebar

c226f69

Zakariathr22 reviewed Apr 16, 2025

View reviewed changes

niels9001 added 2 commits April 16, 2025 19:56

Remove unused code

1c7ee33

Update AcrylicPage.xaml.cs

5f87f62

Jay-o-Way mentioned this pull request Apr 24, 2025

Code quality: Streamlined navigation and more improvements AutoDarkMode/Windows-Auto-Night-Mode#954

Merged

niels9001 mentioned this pull request Jul 4, 2025

Replace NavigationRootPage with MainWindow #1908

Merged

niels9001 closed this Jul 4, 2025

[DRAFT] MainWindow.xaml with new TitleBar + TitleBar samples #1797

[DRAFT] MainWindow.xaml with new TitleBar + TitleBar samples #1797

Uh oh!

Conversation

niels9001 commented Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

PR Overview

Reviewed Changes

Uh oh!

Uh oh!

Zakariathr22 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Jay-o-Way commented Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

niels9001 commented Mar 8, 2025

Uh oh!

Uh oh!

Uh oh!

niels9001 commented Mar 12, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghost1372 Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jay-o-Way Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Zakariathr22 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Zakariathr22 Apr 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

niels9001 commented Mar 8, 2025 •

edited

Loading

Jay-o-Way commented Mar 8, 2025 •

edited

Loading

ghost1372 Mar 12, 2025 •

edited

Loading

Jay-o-Way Mar 12, 2025 •

edited

Loading

Zakariathr22 left a comment •

edited

Loading

Zakariathr22 Apr 16, 2025 •

edited

Loading