Proposal: A common titlebar control for UWP and Win32 apps

[martibravo]

Proposal: A common TitleBar control for WinUI 3.

In both WinUI2 and 3, the titlebar, albeit different ones, are outdated. I am not saying they should be replaced. But many developers would like a default control for a custom titlebar, following the design of Windows 11's Calculator and Paint apps.

The control would basically be a element with an Icon and a Title, because the window caption buttons are already painted over by the system.

Only for WinUI3 apps: right clicking on the control would show a modern Context Menu (MenuFlyout) with the regular options "Close, Minimize, Maximize/Restore, Move, Size".

Summary

Provide a control named "Microsoft.UI.Xaml.Controls.ModernTitlebar" or "CommonTitlebar" or simply "CustomTitlebar" that can be placed inside the app when ExtendContentsIntoTitleBar is set to true.

Rationale

• Right now, WinUI3 uses the default win32 titlebar with the ability to extend it. The old titlebar doesn't respect dark mode, is thiner than usual when it's maximized and it's context menu looks outdated. In UWP/WinUI2 apps, the titlebar always the same height, but the context menu also looks outdated, from Win32 and doesn't have the option to show the app's icon.
• This control could unify titlebars across all WinUI apps (UWP or Win32) and be more consistent with Windows 11's style choices.

Scope

Capability	Priority
Set a common titlebar for all WinUI apps	Must
Show an app icon's and title in the style of W11's Calculator	Must
Use a modern MenuFlyout to show default options	Should
Have a method to add custom entries to the titlebar's context menu	Could
Have a method to add buttons before the app icon (like a back button)	Should
Be the default titlebar	Won't

[JaiganeshKumaran]

In my opinion there's no need for a separate opt-in cont. Instead for WinUI 3, by default a modern one should be used when not extended. All the functionality mentioned in this proposal such as adding buttons like the back button, hiding/showing app icon can be built-in to the Window class and affect the default title bar.

[mdtauk]

Ideally placing a TitleBar control onto your app's window, would automatically handle the extending of the app's content into the title bar area, the re-colouring of the window controls etc.

In fact, the Window XAML could have a property you populate with a control, so the code is handled for the developers. And default templates could include it.

[JaiganeshKumaran]

Ideally placing a TitleBar control onto your app's window, would automatically handle the extending of the app's content into the title bar area, the re-colouring of the window controls etc.

In fact, the Window XAML could have a property you populate with a control, so the code is handled for the developers. And default templates could include it.

I don't think that's necessary as the title bar will differ if you use NavigationView compared to using something like a tab view, so instead of that creating a custom title bar could be made much easier rather than an entire control that has limited customizability options. These will help more apps, not just ones which follow the standard patterns.

Few things that app developers need to do currently for the best experience:

• Manually set properties for custom title bar area which are dependent on the caption buttons eg inset, height (if same height needed for controls within the custom title bar etc...). All of these are properties are provided in the ApplicationView class and some in CoreApplicationView however since it's independent of the XAML UI framework, those properties aren't observable and can't be data bound. A wrapper class that exposes the same properties in a observable manner will remove the need for setting when it changes through separate events.

• Changing colours of the title bar buttons to fit their needs. This is pretty easy and straightforward, however sometimes the colours you choose are theme dependent and the system doesn't have a way to override a colour for a specific theme, although the default settings do changed automatically based on the system theme. So you have to manually change the colors when the system theme changes. I would suggest a system where you could put the colors for the buttons in a list for each individual theme and the system will transition between them automatically. It could even be a XAML ThemeResource value. The problem is that some apps want to override app theme dynamically which isn't well supported as you can only override theme at app launch and it only affects XAML stuff, not the window and other app model related things. https://github.com/microsoft/WindowsAppSDK/issues/1098 could help.

I'm not a big fan of having complete pre-build solutions for everything with limited customization without delving deep (like retemplating it).

[michael-hawker]

FYI @niels9001