microsoft-ui-xaml icon indicating copy to clipboard operation
microsoft-ui-xaml copied to clipboard

WinUI 3 - Use extended title bar by default with complete icon and title

Open jaigak opened this issue 4 years ago • 16 comments

Today WinUI 3 uses the default Win32 title bar which has a few issues as I highlighted in #5486 and doesn't look modern. When you extended content into title bar, there's nice modern caption buttons with Fluent tooltip. I think that should be the default even if ExtendsContentIntoTitleBar is false but WinUI should provide a default drag region with app's icon from the manifest and window title as well. When you set ExtendsContentIntoTitleBar as true, you'll have the same caption buttons however the default drag region with icon and title will be removed and you can set your own.

jaigak avatar Aug 26 '21 04:08 jaigak

I don't think it should be the default, but it should certainly be an option in the templates - where it will pre-add the UI elements with their correct padding and margins.

mdtauk avatar Aug 26 '21 04:08 mdtauk

I don't think it should be the default, but it should certainly be an option in the templates - where it will pre-add the UI elements with their correct padding and margins.

It should be the default because developers who don't customize much will get modern UI by default.

jaigak avatar Aug 26 '21 05:08 jaigak

I don't think it should be the default, but it should certainly be an option in the templates - where it will pre-add the UI elements with their correct padding and margins.

It should be the default because developers who don't customize much will get modern UI by default.

Developers need to be aware of the curves and pitfalls for using an extended titlebar - the default titlebar is actually the simplest option.

If having an extended titlebar were easier to work with, then I would argue the default templates should include it.

mdtauk avatar Aug 26 '21 05:08 mdtauk

@mdtauk Why can't the default title bar a modern one? To the default, it will appear as the default and ExtendsContentIntoTitleBar will be fase but actually a customized from the system point of view. The UWP default title bar is already technically extended but it's not customizable by the developer unless they opt-in to the fake extend option. WinUI will display app's icon and title just like the Win32 one but with modern visuals like tooltips and context menus. This way the caption buttons will remain consistent whether you extend or not because it's always using the same instead of using Win32 one when not extended.

jaigak avatar Aug 26 '21 05:08 jaigak

@mdtauk Why can't the default title bar a modern one? To the default, it will appear as the default and ExtendsContentIntoTitleBar will be fase but actually a customized from the system point of view. The UWP default title bar is already technically extended but it's not customizable by the developer unless they opt-in to the fake extend option.

WinUI 3 is being designed to work with existing custom chrome windows, such as Office etc. Where as the UWP core windows are an entirely new concept.

I would like all apps to update to a new modern design, including the Titlebars, but when a default setting/option could end up breaking existing apps, and changing metrics - this is going to be hated by developers, and Microsoft needs them on board with as little friction as possible.

But I think there should be templates that include everything needed for functional and beautiful custom Titlebars. How it currently works, it would either need to be it's own Item/Project Template - or an option you turn on when creating a new project.

mdtauk avatar Aug 26 '21 05:08 mdtauk

@mdtauk Why can't the default title bar a modern one? To the default, it will appear as the default and ExtendsContentIntoTitleBar will be fase but actually a customized from the system point of view. The UWP default title bar is already technically extended but it's not customizable by the developer unless they opt-in to the fake extend option.

WinUI 3 is being designed to work with existing custom chrome windows, such as Office etc. Where as the UWP core windows are an entirely new concept.

I would like all apps to update to a new modern design, including the Titlebars, but when a default setting/option could end up breaking existing apps, and changing metrics - this is going to be hated by developers, and Microsoft needs them on board with as little friction as possible.

But I think there should be templates that include everything needed for functional and beautiful custom Titlebars. How it currently works, it would either need to be it's own Item/Project Template - or an option you turn on when creating a new project.

Many app developers who build simple apps won't bother creating a beautiful modern experience. The default always should always be the best that works for most apps. Apps can customize if they wanted but the default should be modern enough. Also WinUI 3 apps are new apps so it won't break as long as they always used the defaults.

jaigak avatar Aug 26 '21 05:08 jaigak

Take a look at what the Office Hub app has done. Before they just used the default UWP title bar which worked for them (after all the entire app is just a web view) but now since WinUI 3 has ugly Win32 one, they have tried to replicate the UWP but has failed badly. They can fix it however they just wanted the default to be great. Not all apps need title bar customisation yet now just to get the modern style, developers need to customise. While putting it in the template may seem great, it should be the default implicitly and the Win32 old title bar shouldn't be there.

jaigak avatar Aug 26 '21 05:08 jaigak

Many app developers who build simple apps won't bother creating a beautiful modern experience. The default always should always be the best that works for most apps. Apps can customize if they wanted but the default should be modern enough. Also WinUI 3 apps are new apps so it won't break as long as they always used the defaults.

Those who won't bother creating a nice looking app, will not care to ensure their by default extended titlebar will work well with content behind it, or function properly with the proper application of Transparent materials, button colours, and handling inactive states.

How you handle the extended titlebar, also differs depending on the UI layout and structure you use. The NavigationView, Main Menu, and TabView patterns all need to do different things with their titlebars to make them good. There is no one-size fits all approach, except for the current default, which handles inactive states, and ensures the correct font sizes and contrast safe colours are used.

mdtauk avatar Aug 26 '21 05:08 mdtauk

Many app developers who build simple apps won't bother creating a beautiful modern experience. The default always should always be the best that works for most apps. Apps can customize if they wanted but the default should be modern enough. Also WinUI 3 apps are new apps so it won't break as long as they always used the defaults.

Those who won't bother creating a nice looking app, will not care to ensure their by default extended titlebar will work well with content behind it, or function properly with the proper application of Transparent materials, button colours, and handling inactive states.

How you handle the extended titlebar, also differs depending on the UI layout and structure you use. The NavigationView, Main Menu, and TabView patterns all need to do different things with their titlebars to make them good. There is no one-size fits all approach, except for the current default, which handles inactive states, and ensures the correct font sizes and contrast safe colours are used.

I'm asking for the current default to be upgraded and have the same caption buttons that shows up when extended in WinUI 3 with modern tooltip instead of some old one.

jaigak avatar Aug 26 '21 05:08 jaigak

I agree with @Jaiganeshkumaran . The default WinUI titlebar should look like a modern window, especially since it's the default on Windows 11 with all inbox apps adopting it.

To me it doesn't make sense that a new, modern UI framework requires additional work (which you know, some devs won't do) to look like a "default/modern" windows app. I get that there might be some technicalities to be ironed out as @mdtauk mentions, but still would be great to have that.

niels9001 avatar Aug 26 '21 06:08 niels9001

In addition to WinUI 3, the default title bar for UWP apps (non-extended) should be updated to include the app icon. I did propose in Reunion about this but got closed: https://github.com/microsoft/WindowsAppSDK/issues/1123. The problem with UWP apps displaying the icon on an extended title bar is that they don't display the menu when clicked which is fine however it creates inconsistency.

jaigak avatar Aug 26 '21 06:08 jaigak

I opened a discussion that talks about this in microsoft/WindowsAppSDK#1293.

To summarize, there would be a new titlebar used by all Windows 11 and WindowsAppSDK apps, even if you don't extend the app content.

ghost avatar Aug 26 '21 08:08 ghost

@pratikone and @marb2000 FYI

StephenLPeters avatar Sep 16 '21 23:09 StephenLPeters

Those who won't bother creating a nice looking app, will not care to ensure their by default extended titlebar will work well with content behind it, or function properly with the proper application of Transparent materials, button colours, and handling inactive states.

It feels notable that the WinUI 3 Controls Gallery app appears to have not felt that this is worth the work.

fredemmott avatar Feb 25 '22 16:02 fredemmott

the newly released WinUI3 controls gallery have WinUI Titlebar control which people can try out.

pratikone avatar Mar 31 '22 17:03 pratikone

I have to agree with Jaiganesh, if you want to provide as good developer experience as Mac does to their developers, you should at least help people learn about the modern titlebar.

dragonDScript avatar Aug 11 '22 14:08 dragonDScript

Why is this still not implemented and still unreasonable stupid in what is supposed to be considered ready for production? Using workarounds instead of fixing missing components is not the right answer.

EpsiRho avatar Jan 14 '23 02:01 EpsiRho

For what it's worth, I was initially also struggling with the TitleBar being an absolute headache to work with. I have since started using the Template Studio extension for Visual Studio as promoted by the WinUI Gallery app.

It sets it all up for you and haven't had any issues with the TitleBar since. It even sets up a nice solution for MVVM which is a nice benefit if you like.

  • It's properly extended and transparent
  • Resizing works as expected
  • The little VisualTree helper thingymajigger at the titlebar is interactable again
  • Support for icon and title text from the get-go

I highly recommend the template studio if you're new to the WinUI framework like me, it sets up most of the soul draining stuff for you.

Dealman avatar Jun 03 '23 08:06 Dealman

@Dealman That works for new projects, but my project is when it was called Project Reunion two years ago. I hoped there is one centralized taskbar, rather than custom solution, even if pre-generated.

TekuSP avatar Jun 23 '23 17:06 TekuSP

With WinAppSDK 1.4, winui 3 custom titlebar is getting a big overhaul and merging with appwindow titlebar. That leads to better defaults on using custom titlebar and it works well with all low level apis. The icon part is still not default but it is easier to create due to new api. Template Studio and Community Toolkit will fill this gap and create good ready to use customization around custom titlebar.

Since this issue is already 2 years old and already has bunch of outdated comments/suggestions which are no longer applicable, I am closing it. Feel free to open a new one for a more specific issue.

pratikone avatar Jul 11 '23 18:07 pratikone

With WinAppSDK 1.4, winui 3 custom titlebar is getting a big overhaul and merging with appwindow titlebar. That leads to better defaults on using custom titlebar and it works well with all low level apis. The icon part is still not default but it is easier to create due to new api. Template Studio and Community Toolkit will fill this gap and create good ready to use customization around custom titlebar.

Since this issue is already 2 years old and already has bunch of outdated comments/suggestions which are no longer applicable, I am closing it. Feel free to open a new one for a more specific issue.

@pratikone Do you know if this will also start to add support to the taller ~~40 and~~ 48px high Titlebar, marked in the design kit as Future Tall - and as used by the Office apps.

image

mdtauk avatar Jul 11 '23 20:07 mdtauk

I am not aware of any discussions related to it so no. This release is aimed at just beahvior parity between old winui3 custom titlebar and the new one merged with appwindow titlebar while providing some good defaults. For any more features, future releases can be aimed

pratikone avatar Jul 14 '23 06:07 pratikone