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

[niels9001]

DO NOT MERGE UNTIL WASDK 1.7 STABLE

Closes: #1736 #1798

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.

[Zakariathr22]

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

[Jay-o-Way]

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

[niels9001]

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

[ghost1372]

Hi @niels9001
The API names have been officially updated to LeftHeader, Content, and RightHeader.
microsoft/microsoft-ui-xaml#10056 (comment)
Therefore, <TitleBar.CenterContent> should be changed to <TitleBar.Content> to reflect these updates.

[niels9001]

Yes, but those changes aren't part of Preview1 that I'm using in this PR..

[niels9001]

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 :)!

[Zakariathr22]

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

[niels9001]

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?

[Zakariathr22]

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="&#xE72C;" FontSize="14"/>
            <ToolTipService.ToolTip>
                Refresh
            </ToolTipService.ToolTip>
        </Button>
    </Border>
</TitleBar.LeftContent>

[ghost1372]

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="&#xE72C;" 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)

[Zakariathr22]

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?

[ghost1372]

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

[niels9001]

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

[Zakariathr22]

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="&#xEA3B;" Foreground="{ThemeResource SystemFillColorSuccessBrush}"
              FontSize="14" Margin="12,0">
        <ToolTipService.ToolTip>
            Online
        </ToolTipService.ToolTip>
    </FontIcon>
</TitleBar.LeftContent>